首页 >> js开发 >> jsopenlayers4.6.5实现距离量测和面积量测js大全
jsopenlayers4.6.5实现距离量测和面积量测js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例为大家分享了openlayers4.6.5实现距离量测和面积量测的具体代码，供大家参考，具体内容如下版本： openlayers4.6.5效果图：小插曲：小插曲：原本使用ol官方提供的 量测例子，就挺不错的。但是由于放在项目中后。量测样式不知道为啥出不来，找了半天原因 也没有找到，单独在一个html中完全没问题。所以推测可能和项目中哪些地方有冲突，但是问题暂时没找出来，项目也比较急，所以只能自己实现文字标注部门的样式，实现效果如上图gif所示。实现原理：
实现原理：量测功能还是使用了ol例子提供的源码，修改部分主要是在标注这一块，另外就是时刻去添加这个标注 然后时刻删除这个标注 就可以了。完整的js代码如下（鼠标样式图标 我没放上来，有需要的我给你发邮箱）：
var draw;
var click=false;
var output=0;
var vector;
var source;
var lastPolygonLabelFeature;//记录上一个面标注要素
var lastLengthLabelFeature;//记录上一个点标注要素
$(
function(){
$("#measureDistance").click(function(){
if(draw){
map.removeInteraction(draw);
}
addInteraction("length");
setMeasureCur();
})
$("#measureArea").click(function(){
if(draw){
map.removeInteraction(draw);
}
addInteraction("area");
setMeasureCur();
})
$("#measureClear").click(function(){
map.removeInteraction(draw);
vector.setSource(null);
source=new ol.source.Vector();
vector.setSource(source);
lastPolygonLabelFeature=null;
lastLengthLabelFeature=null;
click=false;
sketch = null;
output="0";
reSetCur();
})
function setMeasureCur(){
$('#map').css({
cursor:"url(../../static/images/measureIcon/measure.cur), auto"
});
}
function reSetCur(){
$('#map').css('cursor','default');
}
source = new ol.source.Vector();
vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({//面的填充颜色
color: 'rgba(255, 0, 0, 0.1)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,116,3)',
width: 2
}),
image: new ol.style.Circle({
radius: 3,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0,1)',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,255)'
})
})
})
});
map.addLayer(vector);
var sketch;
var pointerMoveHandler = function(evt) {
if (evt.dragging) {
return;
}
var Coord;
if(sketch){
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
if(lastPolygonLabelFeature){
//鼠标移动 不停的添加和删除
source.removeFeature(lastPolygonLabelFeature);
}
Coord = geom.getInteriorPoint().getCoordinates();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastPolygonLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,0,0));
} else if (geom instanceof ol.geom.LineString) {
if(lastLengthLabelFeature){
source.removeFeature(lastLengthLabelFeature);
}
Coord = geom.getLastCoordinate();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastLengthLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,35,-10));
}
//设置要素样式
source.addFeature(newFeature);
}
};
map.on('pointermove', pointerMoveHandler);
map.on('click', function(evt){
var coordinate = evt.coordinate; //鼠标单击点的坐标
console.log(coordinate);
if(output=="0"){
lastPolygonLabelFeature=null;
if(lastLengthLabelFeature){
source.removeFeature(lastLengthLabelFeature);
lastLengthLabelFeature=null;
}
return;
}
var Coord;
if(sketch){
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
if(lastPolygonLabelFeature){
source.removeFeature(lastPolygonLabelFeature);
}
Coord = geom.getInteriorPoint().getCoordinates();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastPolygonLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,0,0)); //设置要素样式
source.addFeature(newFeature);
} else if (geom instanceof ol.geom.LineString) {
Coord = geom.getLastCoordinate();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
newFeature.setStyle(createLabelStyle(newFeature,35,-10)); //设置要素样式
source.addFeature(newFeature);
}
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //几何信息
name: output
});
source.addFeature(pointFeature);
}
});
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle(feature,offsetX,offsetY){
return new ol.style.Style({
// image: new ol.style.Icon({
//
anchor: [0.5, 60], //锚点
//
anchorOrigin:'top-right', //锚点源
//
anchorXUnits: 'fraction', //锚点X值单位
//
anchorYUnits: 'pixels', //锚点Y值单位
//
offsetOrigin: 'top-right', //偏移原点
//
opacity: 0.75,
//
src: 'OL3Demo/images/label/blueIcon.png' //图标的URL
// }),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 10px sans-serif', //文字样式
text: feature.get('name'), //文本内容
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: 'white'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 5
}),
offsetX:offsetX,
offsetY:offsetY
})
});
}
function addInteraction(drawType) {
var type = (drawType== 'area' ? 'Polygon' : 'LineString');
draw = new ol.interaction.Draw({
source: source,
type: type,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,116,3)',
// lineDash: [10, 10],//虚线
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 0.1)'
}),
fill: new ol.style.Fill({
color: 'rgba(255,116,3, 0.3)'
})
})
})
});
map.addInteraction(draw);
var listener;
draw.on('drawstart',
function(evt) {
// set sketch
sketch = evt.feature;
listener = sketch.getGeometry().on('change', function(evt) {
var geom = evt.target;
if (geom instanceof ol.geom.Polygon) {
output = formatArea(geom);
} else if (geom instanceof ol.geom.LineString) {
output = formatLength(geom);
}
});
}, this);
draw.on('drawend',
function() {
// unset sketch
sketch = null;
ol.Observable.unByKey(listener);
output="0";
}, this);
}
var formatLength = function(line) {
var length = ol.Sphere.getLength(line);
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + '千米';
} else {
output = (Math.round(length * 100) / 100) +
' ' + '米';
}
return output;
};
var formatArea = function(polygon) {
var area = ol.Sphere.getArea(polygon);
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + '平方千米';
} else {
output = (Math.round(area * 100) / 100) +
' ' + '平方米';
}
return output;
};
})
var draw;
var click=false;
var output=0;
var vector;
var source;
var lastPolygonLabelFeature;//记录上一个面标注要素
var lastLengthLabelFeature;//记录上一个点标注要素
$(
function(){
$("#measureDistance").click(function(){
if(draw){
map.removeInteraction(draw);
}
addInteraction("length");
setMeasureCur();
})
$("#measureArea").click(function(){
if(draw){
map.removeInteraction(draw);
}
addInteraction("area");
setMeasureCur();
})
$("#measureClear").click(function(){
map.removeInteraction(draw);
vector.setSource(null);
source=new ol.source.Vector();
vector.setSource(source);
lastPolygonLabelFeature=null;
lastLengthLabelFeature=null;
click=false;
sketch = null;
output="0";
reSetCur();
})
function setMeasureCur(){
$('#map').css({
cursor:"url(../../static/images/measureIcon/measure.cur), auto"
});
}
function reSetCur(){
$('#map').css('cursor','default');
}
source = new ol.source.Vector();
vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({//面的填充颜色
color: 'rgba(255, 0, 0, 0.1)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,116,3)',
width: 2
}),
image: new ol.style.Circle({
radius: 3,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0,1)',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,255)'
})
})
})
});
map.addLayer(vector);
var sketch;
var pointerMoveHandler = function(evt) {
if (evt.dragging) {
return;
}
var Coord;
if(sketch){
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
if(lastPolygonLabelFeature){
//鼠标移动 不停的添加和删除
source.removeFeature(lastPolygonLabelFeature);
}
Coord = geom.getInteriorPoint().getCoordinates();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastPolygonLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,0,0));
} else if (geom instanceof ol.geom.LineString) {
if(lastLengthLabelFeature){
source.removeFeature(lastLengthLabelFeature);
}
Coord = geom.getLastCoordinate();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastLengthLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,35,-10));
}
//设置要素样式
source.addFeature(newFeature);
}
};
map.on('pointermove', pointerMoveHandler);
map.on('click', function(evt){
var coordinate = evt.coordinate; //鼠标单击点的坐标
console.log(coordinate);
if(output=="0"){
lastPolygonLabelFeature=null;
if(lastLengthLabelFeature){
source.removeFeature(lastLengthLabelFeature);
lastLengthLabelFeature=null;
}
return;
}
var Coord;
if(sketch){
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
if(lastPolygonLabelFeature){
source.removeFeature(lastPolygonLabelFeature);
}
Coord = geom.getInteriorPoint().getCoordinates();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastPolygonLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,0,0)); //设置要素样式
source.addFeature(newFeature);
} else if (geom instanceof ol.geom.LineString) {
Coord = geom.getLastCoordinate();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
newFeature.setStyle(createLabelStyle(newFeature,35,-10)); //设置要素样式
source.addFeature(newFeature);
}
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //几何信息
name: output
});
source.addFeature(pointFeature);
}
});
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle(feature,offsetX,offsetY){
return new ol.style.Style({
// image: new ol.style.Icon({
//
anchor: [0.5, 60], //锚点
//
anchorOrigin:'top-right', //锚点源
//
anchorXUnits: 'fraction', //锚点X值单位
//
anchorYUnits: 'pixels', //锚点Y值单位
//
offsetOrigin: 'top-right', //偏移原点
//
opacity: 0.75,
//
src: 'OL3Demo/images/label/blueIcon.png' //图标的URL
// }),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 10px sans-serif', //文字样式
text: feature.get('name'), //文本内容
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: 'white'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 5
}),
offsetX:offsetX,
offsetY:offsetY
})
});
}
function addInteraction(drawType) {
var type = (drawType== 'area' ? 'Polygon' : 'LineString');
draw = new ol.interaction.Draw({
source: source,
type: type,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,116,3)',
// lineDash: [10, 10],//虚线
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 0.1)'
}),
fill: new ol.style.Fill({
color: 'rgba(255,116,3, 0.3)'
})
})
})
});
map.addInteraction(draw);
var listener;
draw.on('drawstart',
function(evt) {
// set sketch
sketch = evt.feature;
listener = sketch.getGeometry().on('change', function(evt) {
var geom = evt.target;
if (geom instanceof ol.geom.Polygon) {
output = formatArea(geom);
} else if (geom instanceof ol.geom.LineString) {
output = formatLength(geom);
}
});
}, this);
draw.on('drawend',
function() {
// unset sketch
sketch = null;
ol.Observable.unByKey(listener);
output="0";
}, this);
}
var formatLength = function(line) {
var length = ol.Sphere.getLength(line);
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + '千米';
} else {
output = (Math.round(length * 100) / 100) +
' ' + '米';
}
return output;
};
var formatArea = function(polygon) {
var area = ol.Sphere.getArea(polygon);
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + '平方千米';
} else {
output = (Math.round(area * 100) / 100) +
' ' + '平方米';
}
return output;
};
})以上就是本文的全部内容，希望对大家的学习有所帮助。
实现原理：量测功能还是使用了ol例子提供的源码，修改部分主要是在标注这一块，另外就是时刻去添加这个标注 然后时刻删除这个标注 就可以了。完整的js代码如下（鼠标样式图标 我没放上来，有需要的我给你发邮箱）：
var draw;
var click=false;
var output=0;
var vector;
var source;
var lastPolygonLabelFeature;//记录上一个面标注要素
var lastLengthLabelFeature;//记录上一个点标注要素
$(
function(){
$("#measureDistance").click(function(){
if(draw){
map.removeInteraction(draw);
}
addInteraction("length");
setMeasureCur();
})
$("#measureArea").click(function(){
if(draw){
map.removeInteraction(draw);
}
addInteraction("area");
setMeasureCur();
})
$("#measureClear").click(function(){
map.removeInteraction(draw);
vector.setSource(null);
source=new ol.source.Vector();
vector.setSource(source);
lastPolygonLabelFeature=null;
lastLengthLabelFeature=null;
click=false;
sketch = null;
output="0";
reSetCur();
})
function setMeasureCur(){
$('#map').css({
cursor:"url(../../static/images/measureIcon/measure.cur), auto"
});
}
function reSetCur(){
$('#map').css('cursor','default');
}
source = new ol.source.Vector();
vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({//面的填充颜色
color: 'rgba(255, 0, 0, 0.1)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,116,3)',
width: 2
}),
image: new ol.style.Circle({
radius: 3,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0,1)',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,255)'
})
})
})
});
map.addLayer(vector);
var sketch;
var pointerMoveHandler = function(evt) {
if (evt.dragging) {
return;
}
var Coord;
if(sketch){
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
if(lastPolygonLabelFeature){
//鼠标移动 不停的添加和删除
source.removeFeature(lastPolygonLabelFeature);
}
Coord = geom.getInteriorPoint().getCoordinates();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastPolygonLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,0,0));
} else if (geom instanceof ol.geom.LineString) {
if(lastLengthLabelFeature){
source.removeFeature(lastLengthLabelFeature);
}
Coord = geom.getLastCoordinate();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastLengthLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,35,-10));
}
//设置要素样式
source.addFeature(newFeature);
}
};
map.on('pointermove', pointerMoveHandler);
map.on('click', function(evt){
var coordinate = evt.coordinate; //鼠标单击点的坐标
console.log(coordinate);
if(output=="0"){
lastPolygonLabelFeature=null;
if(lastLengthLabelFeature){
source.removeFeature(lastLengthLabelFeature);
lastLengthLabelFeature=null;
}
return;
}
var Coord;
if(sketch){
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
if(lastPolygonLabelFeature){
source.removeFeature(lastPolygonLabelFeature);
}
Coord = geom.getInteriorPoint().getCoordinates();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastPolygonLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,0,0)); //设置要素样式
source.addFeature(newFeature);
} else if (geom instanceof ol.geom.LineString) {
Coord = geom.getLastCoordinate();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
newFeature.setStyle(createLabelStyle(newFeature,35,-10)); //设置要素样式
source.addFeature(newFeature);
}
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //几何信息
name: output
});
source.addFeature(pointFeature);
}
});
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle(feature,offsetX,offsetY){
return new ol.style.Style({
// image: new ol.style.Icon({
//
anchor: [0.5, 60], //锚点
//
anchorOrigin:'top-right', //锚点源
//
anchorXUnits: 'fraction', //锚点X值单位
//
anchorYUnits: 'pixels', //锚点Y值单位
//
offsetOrigin: 'top-right', //偏移原点
//
opacity: 0.75,
//
src: 'OL3Demo/images/label/blueIcon.png' //图标的URL
// }),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 10px sans-serif', //文字样式
text: feature.get('name'), //文本内容
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: 'white'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 5
}),
offsetX:offsetX,
offsetY:offsetY
})
});
}
function addInteraction(drawType) {
var type = (drawType== 'area' ? 'Polygon' : 'LineString');
draw = new ol.interaction.Draw({
source: source,
type: type,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,116,3)',
// lineDash: [10, 10],//虚线
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 0.1)'
}),
fill: new ol.style.Fill({
color: 'rgba(255,116,3, 0.3)'
})
})
})
});
map.addInteraction(draw);
var listener;
draw.on('drawstart',
function(evt) {
// set sketch
sketch = evt.feature;
listener = sketch.getGeometry().on('change', function(evt) {
var geom = evt.target;
if (geom instanceof ol.geom.Polygon) {
output = formatArea(geom);
} else if (geom instanceof ol.geom.LineString) {
output = formatLength(geom);
}
});
}, this);
draw.on('drawend',
function() {
// unset sketch
sketch = null;
ol.Observable.unByKey(listener);
output="0";
}, this);
}
var formatLength = function(line) {
var length = ol.Sphere.getLength(line);
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + '千米';
} else {
output = (Math.round(length * 100) / 100) +
' ' + '米';
}
return output;
};
var formatArea = function(polygon) {
var area = ol.Sphere.getArea(polygon);
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + '平方千米';
} else {
output = (Math.round(area * 100) / 100) +
' ' + '平方米';
}
return output;
};
})
var draw;
var click=false;
var output=0;
var vector;
var source;
var lastPolygonLabelFeature;//记录上一个面标注要素
var lastLengthLabelFeature;//记录上一个点标注要素
$(
function(){
$("#measureDistance").click(function(){
if(draw){
map.removeInteraction(draw);
}
addInteraction("length");
setMeasureCur();
})
$("#measureArea").click(function(){
if(draw){
map.removeInteraction(draw);
}
addInteraction("area");
setMeasureCur();
})
$("#measureClear").click(function(){
map.removeInteraction(draw);
vector.setSource(null);
source=new ol.source.Vector();
vector.setSource(source);
lastPolygonLabelFeature=null;
lastLengthLabelFeature=null;
click=false;
sketch = null;
output="0";
reSetCur();
})
function setMeasureCur(){
$('#map').css({
cursor:"url(../../static/images/measureIcon/measure.cur), auto"
});
}
function reSetCur(){
$('#map').css('cursor','default');
}
source = new ol.source.Vector();
vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({//面的填充颜色
color: 'rgba(255, 0, 0, 0.1)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,116,3)',
width: 2
}),
image: new ol.style.Circle({
radius: 3,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0,1)',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,255)'
})
})
})
});
map.addLayer(vector);
var sketch;
var pointerMoveHandler = function(evt) {
if (evt.dragging) {
return;
}
var Coord;
if(sketch){
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
if(lastPolygonLabelFeature){
//鼠标移动 不停的添加和删除
source.removeFeature(lastPolygonLabelFeature);
}
Coord = geom.getInteriorPoint().getCoordinates();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastPolygonLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,0,0));
} else if (geom instanceof ol.geom.LineString) {
if(lastLengthLabelFeature){
source.removeFeature(lastLengthLabelFeature);
}
Coord = geom.getLastCoordinate();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastLengthLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,35,-10));
}
//设置要素样式
source.addFeature(newFeature);
}
};
map.on('pointermove', pointerMoveHandler);
map.on('click', function(evt){
var coordinate = evt.coordinate; //鼠标单击点的坐标
console.log(coordinate);
if(output=="0"){
lastPolygonLabelFeature=null;
if(lastLengthLabelFeature){
source.removeFeature(lastLengthLabelFeature);
lastLengthLabelFeature=null;
}
return;
}
var Coord;
if(sketch){
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
if(lastPolygonLabelFeature){
source.removeFeature(lastPolygonLabelFeature);
}
Coord = geom.getInteriorPoint().getCoordinates();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
lastPolygonLabelFeature=newFeature;
newFeature.setStyle(createLabelStyle(newFeature,0,0)); //设置要素样式
source.addFeature(newFeature);
} else if (geom instanceof ol.geom.LineString) {
Coord = geom.getLastCoordinate();
//新建一个要素ol.Feature
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(Coord), //几何信息
name: output
});
newFeature.setStyle(createLabelStyle(newFeature,35,-10)); //设置要素样式
source.addFeature(newFeature);
}
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //几何信息
name: output
});
source.addFeature(pointFeature);
}
});
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle(feature,offsetX,offsetY){
return new ol.style.Style({
// image: new ol.style.Icon({
//
anchor: [0.5, 60], //锚点
//
anchorOrigin:'top-right', //锚点源
//
anchorXUnits: 'fraction', //锚点X值单位
//
anchorYUnits: 'pixels', //锚点Y值单位
//
offsetOrigin: 'top-right', //偏移原点
//
opacity: 0.75,
//
src: 'OL3Demo/images/label/blueIcon.png' //图标的URL
// }),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 10px sans-serif', //文字样式
text: feature.get('name'), //文本内容
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: 'white'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 5
}),
offsetX:offsetX,
offsetY:offsetY
})
});
}
function addInteraction(drawType) {
var type = (drawType== 'area' ? 'Polygon' : 'LineString');
draw = new ol.interaction.Draw({
source: source,
type: type,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,116,3)',
// lineDash: [10, 10],//虚线
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 0.1)'
}),
fill: new ol.style.Fill({
color: 'rgba(255,116,3, 0.3)'
})
})
})
});
map.addInteraction(draw);
var listener;
draw.on('drawstart',
function(evt) {
// set sketch
sketch = evt.feature;
listener = sketch.getGeometry().on('change', function(evt) {
var geom = evt.target;
if (geom instanceof ol.geom.Polygon) {
output = formatArea(geom);
} else if (geom instanceof ol.geom.LineString) {
output = formatLength(geom);
}
});
}, this);
draw.on('drawend',
function() {
// unset sketch
sketch = null;
ol.Observable.unByKey(listener);
output="0";
}, this);
}
var formatLength = function(line) {
var length = ol.Sphere.getLength(line);
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + '千米';
} else {
output = (Math.round(length * 100) / 100) +
' ' + '米';
}
return output;
};
var formatArea = function(polygon) {
var area = ol.Sphere.getArea(polygon);
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + '平方千米';
} else {
output = (Math.round(area * 100) / 100) +
' ' + '平方米';
}
return output;
};
})以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章:
- js详解ES6 扩展运算符的使用与注意事项js大全
- js如何通过JS实现日历简单算法js大全
- js代码JavaScript常用进制转换及位运算实例解析
- js解决vue打包 npm run build-test突然不动了的问题js大全
- jsVueCli生产环境打包部署跨域失败的解决js大全
- js解决iview table组件里的 固定列 表格不自适应的问题js大全
- js如何基于viewport vm适配移动端页面js大全
- jsvue切换菜单取消未完成接口请求的案例js大全
- jsIDEA配置jQuery, $符号不再显示黄色波浪线的问题js大全
- jsvue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
