Openlayers实现距离面积测量

本文实例为大家分享了Openlayers实现距离面积测量的具体代码,供大家参考,具体内容如下

CSS

.ol-tooltip {

position: relative;

background: rgba(0, 0, 0, 0.5);

border-radius: 4px;

color: white;

padding: 4px 8px;

opacity: 0.7;

white-space: nowrap;

font-size: 12px;

}

.ol-tooltip-measure {

opacity: 1;

font-weight: bold;

}

.ol-tooltip-static {

background-color: #ffcc33;

color: black;

border: 1px solid white;

}

.ol-tooltip-measure:before,

.ol-tooltip-static:before {

border-top: 6px solid rgba(0, 0, 0, 0.5);

border-right: 6px solid transparent;

border-left: 6px solid transparent;

content: "";

position: absolute;

bottom: -6px;

margin-left: -7px;

left: 50%;

}

.ol-tooltip-static:before {

border-top-color: #ffcc33;

}

具体实现

let layer_1 =new ol.layer.Tile({

source: new ol.source.OSM()

});

let source = new ol.source.Vector();

let vector = new ol.layer.Vector({

source: source,

style: new ol.style.Style({

fill: new ol.style.Fill({

color: 'rgba(255, 255, 255, 0.2)'

}),

stroke: new ol.style.Stroke({

color: '#ffcc33',

width: 2

}),

image: new ol.style.Circle({

radius: 7,

fill: new ol.style.Fill({

color: '#ffcc33'

})

})

})

});

let map=new ol.Map({

layers: [

layer_1 ,vector

],

view: new ol.View({

center: [-11000000, 4600000],

zoom: 5,

}),

target: 'map'

});

let count=0;

let draw;

let sketch=new ol.Feature();

let listener;

let helpTooltipElement;

let helpTooltip;

let measureTooltipElement;

let measureTooltip;

let continuePolygonMsg="继续点击绘制多边形";

let continueLineMsg="继续点击绘制线";

createMeasureTooltip();

createHelpTooltip();

let pointerMoveHandler=function(evt){

if (evt.dragging) {

return;

}

/** @type {string} */

let helpMsg = 'Click to start drawing';

if (sketch) {

let geom = (sketch.getGeometry());

if (geom instanceof ol.geom.Polygon) {

helpMsg = continuePolygonMsg;

} else if (geom instanceof ol.geom.LineString) {

helpMsg = continueLineMsg;

}

}

helpTooltipElement.classList.remove('hidden');

};

map.on('pointermove', pointerMoveHandler);

map.getViewport().addEventListener('mouseout', function() {

});

let formatLength=function (line) {

let length = ol.sphere.getLength(line);

let output;

if(length>100){

output=(Math.round(length/1000*100)/100)+''+'km'

}else{

output=(Math.round(length*100)/100)+''+'m'

}

return output;

};

let formatArea=function (polygon) {

let area = ol.sphere.getArea(polygon);

let output;

if(area>10000){

output=(Math.round(area/1000000*100)/100)+''+'km<sup>2</sup>'

}else{

output=(Math.round(area*100)/100)+''+'m<sup>2</sup>'

}

return output;

};

function addInteraction(){

let type="Polygon";

draw=new ol.interaction.Draw({

source:source,

type:type,

style: new ol.style.Style({

fill: new ol.style.Fill({

color: 'rgba(255, 255, 255, 0.2)'

}),

stroke: new ol.style.Stroke({

color: 'rgba(0, 0, 0, 0.5)',

lineDash: [10, 10],

width: 2

}),

image: new ol.style.Circle({

radius: 5,

stroke: new ol.style.Stroke({

color: 'rgba(0, 0, 0, 0.7)'

}),

fill: new ol.style.Fill({

color: 'rgba(255, 255, 255, 0.2)'

})

})

}),

snapTolerance:50

});

map.addInteraction(draw);

map.on('singleclick',function (evt) {

measureTooltip.setPosition(evt.coordinate);

if(count==0){

measureTooltipElement.innerHTML='起点'

}else{

measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';

measureTooltip.setOffset([0, -20]);

// unset sketch

sketch = null;

// unset tooltip so that a new one can be created

measureTooltipElement = null;

createMeasureTooltip();

//map.removeInteraction(draw);

}

createMeasureTooltip();

//点击次数增加

count++;

});

draw.on('drawstart',function (evt) {

sketch=evt.feature;

let tooltipCoord=evt.coordinate;

listener=sketch.getGeometry().on('change',function (evt) {

let geom=evt.target;

let output;

if(geom instanceof ol.geom.Polygon){

map.removeEventListener('singleclick');

output=formatArea(geom);

tooltipCoord=geom.getInteriorPoint().getCoordinates();

}else if(geom instanceof ol.geom.LineString){

output=formatLength(geom);

tooltipCoord=geom.getLastCoordinate();

}

measureTooltipElement.innerHTML = output;

measureTooltip.setPosition(tooltipCoord);

})

});

draw.on('drawend',

function() {

measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';

measureTooltip.setOffset([0, -7]);

// unset sketch

sketch = null;

// unset tooltip so that a new one can be created

measureTooltipElement = null;

createMeasureTooltip();

map.removeInteraction('singleclick');

count=0;

ol.Observable.unByKey(listener);

});

}

function createHelpTooltip() {

if (helpTooltipElement) {

helpTooltipElement.parentNode.removeChild(helpTooltipElement);

}

helpTooltipElement = document.createElement('div');

helpTooltipElement.className = 'ol-tooltip hidden';

helpTooltip = new ol.Overlay({

element: helpTooltipElement,

offset: [15, 0],

positioning: 'center-left'

});

map.addOverlay(helpTooltip);

}

/**

* Creates a new measure tooltip

*/

function createMeasureTooltip() {

if (measureTooltipElement) {

measureTooltipElement.parentNode.removeChild(measureTooltipElement);

}

measureTooltipElement = document.createElement('div');

measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';

measureTooltip = new ol.Overlay({

element: measureTooltipElement,

offset: [-30, -30],

positioning: 'center-center'

});

map.addOverlay(measureTooltip);

}

/**

* Let user change the geometry type.

*/

addInteraction();

参考官网教程 

在线引用地址

<link rel="stylesheeth" ref="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">

<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>

多了一个singleclick来用于显示距离测量时每个线段节点到起点的距离

绘制类型我写死为Polygon了 注意自己修改一下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Openlayers实现距离面积测量 的全部内容, 来源链接: utcz.com/p/218111.html

回到顶部