openlayers4.6.5實現(xiàn)距離量測和面積量測
更新時間：2020年09月25日 16:27:29 作者：yangniceyang
這篇文章主要為大家詳細(xì)介紹了openlayers4.6.5實現(xiàn)距離量測和面積量測，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了openlayers4.6.5實現(xiàn)距離量測和面積量測的具體代碼，供大家參考，具體內(nèi)容如下
版本： openlayers4.6.5
效果圖：
小插曲：
原本使用ol官方提供的 量測例子，就挺不錯的。但是由于放在項目中后。量測樣式不知道為啥出不來，找了半天原因 也沒有找到，單獨在一個html中完全沒問題。所以推測可能和項目中哪些地方有沖突，但是問題暫時沒找出來，項目也比較急，所以只能自己實現(xiàn)文字標(biāo)注部門的樣式，實現(xiàn)效果如上圖gif所示。
實現(xiàn)原理：
量測功能還是使用了ol例子提供的源碼，修改部分主要是在標(biāo)注這一塊，另外就是時刻去添加這個標(biāo)注 然后時刻刪除這個標(biāo)注 就可以了。
完整的js代碼如下（鼠標(biāo)樣式圖標(biāo) 我沒放上來，有需要的我給你發(fā)郵箱）：
var draw;
var click=false;
var output=0;
var vector;
var source;
var lastPolygonLabelFeature;//記錄上一個面標(biāo)注要素
var lastLengthLabelFeature;//記錄上一個點標(biāo)注要素
$(
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){
//鼠標(biāo)移動 不停的添加和刪除
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));
}
//設(shè)置要素樣式
source.addFeature(newFeature);
}
};
map.on('pointermove', pointerMoveHandler);
map.on('click', function(evt){
var coordinate = evt.coordinate; //鼠標(biāo)單擊點的坐標(biāo)
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)); //設(shè)置要素樣式
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)); //設(shè)置要素樣式
source.addFeature(newFeature);
}
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //幾何信息
name: output
});
source.addFeature(pointFeature);
}
});
//矢量標(biāo)注樣式設(shè)置函數(shù)，設(shè)置image為圖標(biāo)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' //圖標(biāo)的URL
// }),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基準(zhǔn)線
font: 'normal 10px sans-serif', //文字樣式
text: feature.get('name'), //文本內(nèi)容
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;
};
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實現(xiàn)tab響應(yīng)式切換特效
這篇文章主要為大家介紹了javascript實現(xiàn)tab響應(yīng)式切換特效，以一個完整的實例對tab響應(yīng)式切換特效進行詳細(xì)的分析，感興趣的小伙伴們可以參考一下2016-01-01
用javascript實現(xiàn)讀取txt文檔的腳本...2007-07-07
我們需要引入幾個相關(guān)的概念：執(zhí)行環(huán)境棧、全局對象、執(zhí)行環(huán)境、變量對象、活動對象、作用域和作用域鏈等，這些概念正是JS引擎工作的核心組件。這篇文章的目的不是孤立的為你講解每一個概念需要的朋友可以參考下2016-11-11
js調(diào)用百度地圖及調(diào)用百度地圖的搜索功能
本文給大家介紹js調(diào)用百度地圖的方法以及調(diào)用百度地圖的搜索功能，有需要的朋友可以跟著腳本之家的小編一起學(xué)習(xí)2015-09-09
這篇文章主要介紹了JavaScript動態(tài)加載重復(fù)綁定問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
怎樣去掉Javascript的Array的重復(fù)項，這個問題看起來簡單，但考的不僅僅是實現(xiàn)這個功能，更能看出你對計算機程序執(zhí)行的深入理解2014-09-09
最近工作中遇到了一些死循環(huán)導(dǎo)致的頁面卡死問題,經(jīng)過 trouble shooting 和代碼修復(fù)解決了問題,所以下面這篇文章主要給大家介紹了怎么檢測和防止JavaScript死循環(huán)的相關(guān)資料,需要的朋友可以參考下2021-11-11
在視頻前插入廣告...2006-11-11
這篇文章主要為大家詳細(xì)介紹了JS上傳組件FileUpload自定義模板的使用方法，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家介紹了TypeScript類型使用示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05