引入
import Draw from 'ol/interaction/Draw'
import VectorLayer from 'ol/layer/Vector';
import VectorSoure from 'ol/Soure/Vector';
import { unByKey } from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {getLength} from 'ol/sphere';
import {getArea} from 'ol/sphere';
import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';
import { Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
参数
data(){
return {
draw: null, //定义画图
measureSource: new VectorSource(), //定义测距图层源
sketch: null, //测量画图之前的要素
helpTooltipElement: null, //点击测距之后出现在鼠标附近的overlay内容
helpTooltip: null, //点击测距测面之后出现在鼠标附近的overlay
measureTooltipElement: null,
measureTooltip: null,
helpMsg: "点击地图开始绘制",
continueLineMsg: "点击地图继续绘制",
continuePolygonMsg: "点击地图继续绘制",
}
}
测距
LineMeasure() {
this.measureSource.clear();
this.measureType = "LineString";
if (document.getElementById("tooltip") != null) {
var obj = document.getElementById("tooltip")
obj.parentNode.remove();
}
let _this = this;
this.map.on("pointermove", function (evt) {
if (evt.dragging) {
return;
}
if (_this.sketch) {
var geom = _this.sketch.getGeometry();
if (geom instanceof LineString) {
_this.helpMsg = _this.continueLineMsg;
}
}
_this.helpTooltipElement.innerHTML =
`<span style="color:white;font-size:18px;background-color:#D3D3D3;">${_this.helpMsg}</span>`;
_this.helpTooltip.setPosition(evt.coordinate);
_this.helpTooltipElement.classList.remove('hidden');
});
let vectorMeasure = new VectorLayer({
source: this.measureSource,
style: new Style({
fill: new Fill({
color: "rgba(255, 255, 255, 0.2)",
}),
stroke: new Stroke({
color: "red",
width: 2,
}),
}),
});
this.map.addLayer(vectorMeasure);
this.map.removeInteraction(this.draw);
this.addInteraction();
}
测面
pologonMeasure(){ //测面
this.measureSource.clear();
this.measureType = "Polygon";
let _this = this;
this.map.on("pointermove", function(evt) {
if (evt.dragging) {
return;
}
if (_this.sketch) {
var geom = _this.sketch.getGeometry();
if (geom instanceof Polygon) {
_this.helpMsg = _this.continuePolygonMsg;
} else if (geom instanceof LineString) {
_this.helpMsg = _this.continueLineMsg;
}
}
_this.helpTooltipElement.innerHTML =`<span style="color:white;font-size:18px;background-color:#D3D3D3;">${_this.helpMsg}</span>` ;
_this.helpTooltip.setPosition(evt.coordinate);
_this.helpTooltipElement.classList.remove('hidden');
});
//
let vectorMeasure = new VectorLayer({
source: this.measureSource,
style: new Style({
fill: new Fill({
color: "#FFFFFF4d",
}),
stroke: new Stroke({
color: "red",
width: 2,
}),
}),
});
this.map.addLayer(vectorMeasure);
this.map.removeInteraction(this.draw);
this.addInteraction();
}
其他
addInteraction() {
var type = this.measureType;
this.draw = new Draw({
source: this.measureSource,
type: type,
style: new Style({
fill: new Fill({
color: "#FFA5004d",
}),
stroke: new Stroke({
color: "#FFA500",
lineDash: [10, 10],
width: 2,
}),
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: "#FFA500",
}),
fill: new Fill({
color: "#FFA500",
}),
}),
}),
});
this.map.addInteraction(this.draw);
this.createMeasureTooltip();
this.createHelpTooltip();
var listener;
let _this = this;
this.draw.on( "drawstart", function (evt) {
_this.sketch = evt.feature;
var tooltipCoord = evt.coordinate;
listener = _this.sketch.getGeometry().on("change", function (evt) {
var geom = evt.target;
var output;
if (geom instanceof Polygon) {
output = _this.formatArea(geom);
tooltipCoord = geom.getInteriorPoint().getCoordinates();
} else if (geom instanceof LineString) {
output = _this.formatLength(geom);
tooltipCoord = geom.getLastCoordinate();
}
_this.measureTooltipElement.innerHTML = `<span style="color:white;font-size:20px;background-color:#0b9170;">${output}</span>`;
_this.measureTooltip.setPosition(tooltipCoord);
});
});
this.draw.on( "drawend", function () {
_this.measureTooltipElement.className = "tooltip tooltip-static";
_this.measureTooltipElement.id = "tooltip";
_this.measureTooltip.setOffset([0, -7]);
// unset sketch
_this.sketch = null;
// unset tooltip so that a new one can be created
_this.measureTooltipElement = null;
_this.createMeasureTooltip();
unByKey(listener);
_this.map.un("pointermove", function(evt) {
if (evt.dragging) {
return;
}
if (_this.sketch) {
var geom = this.sketch.getGeometry();
if (geom instanceof Polygon) {
_this.helpMsg = this.continuePolygonMsg;
} else if (geom instanceof LineString) {
_this.helpMsg = this.continueLineMsg;
}
}
_this.helpTooltipElement.innerHTML = _this.helpMsg;
_this.helpTooltip.setPosition(evt.coordinate);
_this.helpTooltipElement.classList.remove("hidden");
});
_this.map.removeInteraction(_this.draw);
_this.map.removeOverlay(_this.helpTooltip);
_this.helpTooltipElement.classList.add("hidden");
});
},
formatLength(line) {
//获取投影坐标系
var sourceProj = this.map.getView().getProjection();
//ol/sphere里有getLength()和getArea()用来测量距离和区域面积,默认的投影坐标系是EPSG:3857, 其中有个options的参数,可以设置投影坐标系
var length = getLength(line, { projection: sourceProj });
//var length = getLength(line);
var output;
if (length > 100) {
output = Math.round((length / 1000) * 100) / 100 + " " + "km";
} else {
output = Math.round(length * 100) / 100 + " " + "m";
}
return output;
},
formatArea(polygon) {
//获取投影坐标系
var sourceProj = this.map.getView().getProjection();
var area = getArea(polygon, {projection: sourceProj})
//var area = getArea(polygon);
//console.info(area)
var 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;
},
createMeasureTooltip() {
if (this.measureTooltipElement) {
this.measureTooltipElement.parentNode.removeChild(
this.measureTooltipElement
);
}
this.measureTooltipElement = document.createElement("div");
this.measureTooltipElement.className = "tooltip tooltip-measure";
this.measureTooltip = new Overlay({
element: this.measureTooltipElement,
offset: [0, -15],
positioning: "bottom-center",
});
this.map.addOverlay(this.measureTooltip);
},
createHelpTooltip() {
if (this.helpTooltipElement) {
this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
}
this.helpTooltipElement = document.createElement("div");
this.helpTooltipElement.className = "tooltip hidden";
this.helpTooltip = new Overlay({
element: this.helpTooltipElement,
offset: [15, 0],
positioning: "center-left",
});
this.map.addOverlay(this.helpTooltip);
},
效果图