初次使用openlayers地图进行开发各种地图功能,测距和测面积使用的是官方例子并进行了一些简单的修改,官方示例在测量一次之后不能停止,修改后,每点击测量,只会测量一次。
而且需要注意的是,官方例子测距测面积使用的投影坐标系是3857。
js文件:measure.js
import Draw from 'ol/interaction/Draw'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';import {unByKey
} from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {getArea,getLength
} from 'ol/sphere.js';
import View from 'ol/View';
import {LineString,Polygon
} from 'ol/geom.js';
import {Circle as CircleStyle,Fill,Stroke,Style,Text
} from 'ol/style.js';
export default{measure(map, measureType) {var source = new VectorSource();var vector = new VectorLayer({id:'lineAndArea',source: source,style: new Style({fill: new Fill({color: 'rgba(255, 255, 255, 0.2)'}),stroke: new Stroke({color: '#ffcc33',width: 2}),image: new CircleStyle({radius: 7,fill: new Fill({color: '#ffcc33'})})}),zIndex:16});map.addLayer(vector)/*** Currently drawn feature.* @type {module:ol/Feature~Feature}*/var sketch;/*** The help tooltip element.* @type {Element}*/var helpTooltipElem