项目背景vue-cli3.0

public下html需要引入文件

<link rel="stylesheet" href="<%= BASE_URL %>./css/gr-ol.css" type="text/css">
<script src="<%= BASE_URL %>./js/ol.js" type="text/javascript"></script>

这里地图为公共组件，方法写在公共组件的init方法里，kpst._this为地图对象

调用

     //测距/面var draw = me.map._this.interactions.getArray()[10]me.map._this.removeInteraction(draw);if (data.name == '测距' || data.name == '测面') {me.map._this.interactions.array_ = arr.slice(0, 10)if (data.name == '测距') {me.mtype = 'LineString'} else {me.mtype = 'Polygon'}me.map._this.measure(me.mtype)   //map已挂载到vue原型Vue.prototype.map = map} else if (data.name == '清除') {me.map._this.clear()}

方法挂载

 // 测距、面//创建一个当前要绘制的对象var sketch//创建一个帮助提示框对象var helpTooltipElement;//创建一个帮助提示信息对象var helpTooltip;//创建一个测量提示框对象var measureTooltipElement;//创建一个测量提示信息对象var measureTooltip;//继续绘制多边形的提示信息var continuePolygonMsg//继续绘制线段的提示信息var continueLineMsg//帮助提示信息var helpMsg//定义矢量数据源var source = new ol.source.Vector();//定义矢量图层var 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: '#e21e0a',width: 2}),image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: '#ffcc33'})})})});//创建比例尺控件var scaleLineControl = new ol.control.ScaleLine({units: 'metric',target: 'scalebar',className: 'ol-scale-line'});function measure(mtype) {sketch = new ol.Feature();// continuePolygonMsg = 'Click to continue drawing the polygon';// continueLineMsg = 'Click to continue drawing the line';//将矢量图层添加到地图中kpst._this.removeLayer(vector);kpst._this.addLayer(vector);//添加比例尺控件kpst._this.removeControl(scaleLineControl);kpst._this.addControl(scaleLineControl);//鼠标移动触发的函数var pointerMoveHandler = function (evt) {//如果是平移地图则直接结束if (evt.dragging) {return;}//帮助提示信息helpMsg = 'Click to start drawing';if (sketch) {//获取绘图对象的几何要素var geom = sketch.getGeometry();//如果当前绘制的几何要素是多线段，则将绘制提示信息设置为多线段绘制提示信息// if (geom instanceof ol.geom.Polygon) {//   helpMsg = continuePolygonMsg;// } else if (geom instanceof ol.geom.LineString) {//   helpMsg = continueLineMsg;// }}//设置帮助提示要素的内标签为帮助提示信息// if (helpTooltipElement)// helpTooltipElement.innerHTML = helpMsg;//设置帮助提示信息的位置// if (helpTooltip)helpTooltip.setPosition(evt.coordinate);//移除帮助提示要素的隐藏样式// $(helpTooltipElement).removeClass('hidden');removeClass(document.getElementsByClassName('tooltip')[0], 'hidden')};//触发pointermove事件kpst._this.on('pointermove', pointerMoveHandler);//当鼠标移除地图视图的时为帮助提示要素添加隐藏样式document.querySelector('.ol-viewport').onmouseout = function () {addClass(document.getElementsByClassName('tooltip')[0], 'hidden')}// 判断class有无function hasClass(ele, cls) {if (ele) {cls = cls || '';if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回falsereturn new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');}}//添加classfunction addClass(ele, cls) {if (!hasClass(ele, cls) && ele) {ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;}}// 去除classfunction removeClass(ele, cls) {if (hasClass(ele, cls) && ele) {var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';while (newClass.indexOf(' ' + cls + ' ') >= 0) {newClass = newClass.replace(' ' + cls + ' ', ' ');}ele.className = newClass.replace(/^\s+|\s+$/g, '');}}//定义一个交互式绘图对象var draw;//添加交互式绘图对象的函数function addInteraction() {//创建一个交互式绘图对象draw = new ol.interaction.Draw({//绘制的数据源source: source,//绘制类型type: mtype,//样式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)'})})})});//将交互绘图对象添加到地图中kpst._this.addInteraction(draw);//创建测量提示框createMeasureTooltip();//创建帮助提示框createHelpTooltip();//定义一个事件监听var listener;//定义一个控制鼠标点击次数的变量var count = 0;//绘制开始事件draw.on('drawstart', function (evt) {//The feature being drawn.sketch = evt.feature;//提示框的坐标var tooltipCoord = evt.coordinate;//监听几何要素的change事件//Increases the revision counter and dispatches a 'change' event.listener = sketch.getGeometry().on('change', function (evt) {//The event target.//获取绘制的几何对象var geom = evt.target;//定义一个输出对象，用于记录面积和长度var output;if (geom instanceof ol.geom.Polygon) {kpst._this.removeEventListener('singleclick');kpst._this.removeEventListener('dblclick');//输出多边形的面积output = formatArea(geom);//Return an interior point of the polygon.//获取多变形内部点的坐标tooltipCoord = geom.getInteriorPoint().getCoordinates();} else if (geom instanceof ol.geom.LineString) {//输出多线段的长度output = formatLength(geom);//Return the last coordinate of the geometry.//获取多线段的最后一个点的坐标tooltipCoord = geom.getLastCoordinate();}//设置测量提示框的内标签为最终输出结果// if (measureTooltipElement)measureTooltipElement.innerHTML = output;//设置测量提示信息的位置坐标// if (measureTooltip)measureTooltip.setPosition(tooltipCoord);});//地图单击事件kpst._this.on('singleclick', function (evt) {//设置测量提示信息的位置坐标，用来确定鼠标点击后测量提示框的位置// if (measureTooltip)measureTooltip.setPosition(evt.coordinate);//如果是第一次点击，则设置测量提示框的文本内容为起点if (count == 0 && measureTooltipElement) {measureTooltipElement.innerHTML = "起点";}//根据鼠标点击位置生成一个点var point = new ol.geom.Point(evt.coordinate);//将该点要素添加到矢量数据源中source.addFeature(new ol.Feature(point));//更改测量提示框的样式，使测量提示框可见measureTooltipElement.className = 'tooltip tooltip-static';//创建测量提示框createMeasureTooltip();//点击次数增加count++;});//地图双击事件kpst._this.on('dblclick', function (evt) {//根据var point = new ol.geom.Point(evt.coordinate);source.addFeature(new ol.Feature(point));});}, this);//绘制结束事件draw.on('drawend', function (evt) {count = 0;//设置测量提示框的样式measureTooltipElement.className = 'tooltip tooltip-static';//Set the offset for this overlay.//设置偏移量measureTooltip.setOffset([0, -7]);//清空绘制要素sketch = null;//清空测量提示要素measureTooltipElement = null;//创建测量提示框createMeasureTooltip();//Removes an event listener using the key returned by on() or once().//移除事件监听ol.Observable.unByKey(listener);//移除地图单击事件kpst._this.removeEventListener('singleclick');}, this);}//创建帮助提示框function createHelpTooltip() {//如果已经存在帮助提示框则移除if (helpTooltipElement) {helpTooltipElement.parentNode.removeChild(helpTooltipElement);}//创建帮助提示要素的divif (!helpTooltipElement)helpTooltipElement = document.createElement('div');//设置帮助提示要素的样式helpTooltipElement.className = 'tooltip hidden';//创建一个帮助提示的覆盖标注helpTooltip = new ol.Overlay({element: helpTooltipElement,offset: [15, 0],positioning: 'center-left'});//将帮助提示的覆盖标注添加到地图中kpst._this.addOverlay(helpTooltip);}//创建测量提示框function createMeasureTooltip() {//创建测量提示框的div// if (!measureTooltipElement)measureTooltipElement = document.createElement('div');measureTooltipElement.setAttribute('id', 'lengthLabel');//设置测量提示要素的样式measureTooltipElement.className = 'tooltip tooltip-measure';//创建一个测量提示的覆盖标注measureTooltip = new ol.Overlay({element: measureTooltipElement,offset: [0, -15],positioning: 'bottom-center'});//将测量提示的覆盖标注添加到地图中kpst._this.addOverlay(measureTooltip);}//格式化测量长度var formatLength = function (line) {//定义长度变量var length;//计算平面距离length = Math.round(line.getLength() * 100) / 100;//定义输出变量var output;//如果长度大于1000，则使用km单位，否则使用m单位if (length > 100) {output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位} else {output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位}return output;};//格式化测量面积var formatArea = function (polygon) {//定义面积变量var area;//获取平面面积area = polygon.getArea();// }//定义输出变量var output;//当面积大于10000时，转换为平方千米，否则为平方米if (area > 1000) {output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>';} else {output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';}return output;};//添加交互绘图对象addInteraction();}// 清除提示对象function clear() {source.clear()kpst._this.getOverlays().clear();kpst._this.removeLayer(vector);kpst._this.removeControl(scaleLineControl);}kpst._this.measure = measurekpst._this.clear = clear