openlayers4.6.5實(shí)現(xiàn)距離量測(cè)和面積量測(cè)
本文實(shí)例為大家分享了openlayers4.6.5實(shí)現(xiàn)距離量測(cè)和面積量測(cè)的具體代碼,供大家參考,具體內(nèi)容如下
版本: openlayers4.6.5
效果圖:
小插曲:
原本使用ol官方提供的 量測(cè)例子,就挺不錯(cuò)的。但是由于放在項(xiàng)目中后。量測(cè)樣式不知道為啥出不來,找了半天原因 也沒有找到,單獨(dú)在一個(gè)html中完全沒問題。所以推測(cè)可能和項(xiàng)目中哪些地方有沖突,但是問題暫時(shí)沒找出來,項(xiàng)目也比較急,所以只能自己實(shí)現(xiàn)文字標(biāo)注部門的樣式,實(shí)現(xiàn)效果如上圖gif所示。
實(shí)現(xiàn)原理:
量測(cè)功能還是使用了ol例子提供的源碼,修改部分主要是在標(biāo)注這一塊,另外就是時(shí)刻去添加這個(gè)標(biāo)注 然后時(shí)刻刪除這個(gè)標(biāo)注 就可以了。
完整的js代碼如下(鼠標(biāo)樣式圖標(biāo) 我沒放上來,有需要的我給你發(fā)郵箱):
var draw; var click=false; var output=0; var vector; var source; var lastPolygonLabelFeature;//記錄上一個(gè)面標(biāo)注要素 var lastLengthLabelFeature;//記錄上一個(gè)點(diǎn)標(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)移動(dòng) 不停的添加和刪除 source.removeFeature(lastPolygonLabelFeature); } Coord = geom.getInteriorPoint().getCoordinates(); //新建一個(gè)要素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(); //新建一個(gè)要素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)單擊點(diǎn)的坐標(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(); //新建一個(gè)要素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(); //新建一個(gè)要素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], //錨點(diǎn) // anchorOrigin:'top-right', //錨點(diǎn)源 // anchorXUnits: 'fraction', //錨點(diǎn)X值單位 // anchorYUnits: 'pixels', //錨點(diǎn)Y值單位 // offsetOrigin: 'top-right', //偏移原點(diǎn) // 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; }; })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)tab響應(yīng)式切換特效
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)tab響應(yīng)式切換特效,以一個(gè)完整的實(shí)例對(duì)tab響應(yīng)式切換特效進(jìn)行詳細(xì)的分析,感興趣的小伙伴們可以參考一下2016-01-01用javascript實(shí)現(xiàn)讀取txt文檔的腳本
用javascript實(shí)現(xiàn)讀取txt文檔的腳本...2007-07-07js調(diào)用百度地圖及調(diào)用百度地圖的搜索功能
本文給大家介紹js調(diào)用百度地圖的方法以及調(diào)用百度地圖的搜索功能,有需要的朋友可以跟著腳本之家的小編一起學(xué)習(xí)2015-09-09JavaScript動(dòng)態(tài)加載重復(fù)綁定問題
這篇文章主要介紹了JavaScript動(dòng)態(tài)加載重復(fù)綁定問題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04詳解怎么檢測(cè)和防止JavaScript死循環(huán)
最近工作中遇到了一些死循環(huán)導(dǎo)致的頁面卡死問題,經(jīng)過 trouble shooting 和代碼修復(fù)解決了問題,所以下面這篇文章主要給大家介紹了怎么檢測(cè)和防止JavaScript死循環(huán)的相關(guān)資料,需要的朋友可以參考下2021-11-11