废话不多说，代码端上来
<template>
<div ref="map" id="map">
<div id="contextmenu_container" class="contextmenu">
<ul>
<li @click="drawFeature">
<a href="#"> 绘制 </a>
</li>
<li @click="toHome">
<a href="#"> 罕用区域 </a>
</li>
<li @click="outputJson">
<a href="#"> 输入 Json</a>
</li>
<li @click="measure('distence')">
<a href="#"> 测距 </a>
</li>
<li @click="measure('area')">
<a href="#"> 测面 </a>
</li>
<li @click="measure('angle')">
<a href="#"> 量角 </a>
</li>
<li @click="fullscreen" v-html="textarr">
<a href="#"> 全屏 </a>
</li>
<li @click="clear">
<a href="#"> 革除 </a>
</li>
<li @click="pointPopup">
<a href="#"> 点坐标 </a>
</li>
<li @click="zoomIn">
<a href="#"> 放大 </a>
</li>
<li @click="zoomOut">
<a href="#"> 放大 </a>
</li>
<li @click="refresh">
<a href="#"> 刷新 </a>
</li>
</ul>
</div>
<div id="popup" class="ol-popup">
<a
href="#"
ref="external nofollow"
id="popup-closer"
class="ol-popup-closer"
></a>
<div id="popup-content"></div>
</div>
</div><import>
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import VectorSource from 'ol/source/Vector'
import OSM from 'ol/source/OSM'
import VectorLayer from 'ol/layer/Vector'
import TileLayer from 'ol/layer/Tile'
import {GeoJSON} from 'ol/format'
import {Draw} from 'ol/interaction'
import Overlay from 'ol/Overlay'
// 线条几何形态。import {LineString} from 'ol/geom'
import Feature from 'ol/Feature'
// 应用返回的键或
import {unByKey} from 'ol/Observable'
// 获取几何形态的球形长度和面积
import {getLength, getArea, offset} from 'ol/sphere'
import Style from 'ol/style/Style'
import Stroke from 'ol/style/Stroke'
import Fill from 'ol/style/Fill'
import Circle from 'ol/style/Circle'
import {ScaleLine, defaults as defaultControls} from 'ol/control'
import MousePosition from 'ol/control/MousePosition'
import {createStringXY} from 'ol/coordinate'
import Icon from 'ol/style/Icon'
import Text from 'ol/style/Text'
import {transform} from 'ol/proj'
import {fromLonLat} from 'ol/proj'
import Point from 'ol/geom/Point'
import ImageSource from 'ol/source/Image'
import {fromExtent} from 'ol/geom/Polygon'重头戏
export default
data() {
return {
map: null,
vectorLayer: null,
vectorSource: null,
draw: null,
select: null,
modify: null,
editorBtnText: '编辑',
overlay: null,
textarr: '全屏',
measureType: 'diatence',
tipDiv: null,
pointermoveEvent: null, // 地图 pointermove 事件
sketchFeature: null, // 绘制的因素
geometryListener: null, // 因素几何 change 事件
measureResult: '0', // 测量后果
pointLayer: null,
}
},mounted
var baseLayer = new TileLayer({source: new OSM(),
})
this.vectorSource = new VectorSource({wrapX: false,})
this.vectorLayer = new VectorLayer({source: this.vectorSource,})
const scaleLineControl = new ScaleLine({
target: 'scalebar',
className: 'ol-scale-line',
})
const mousePositionControl = new MousePosition({coordinateFormat: createStringXY(4),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
})
this.map = new Map({layers: [baseLayer, this.vectorLayer],
controls: defaultControls({
zoom: false,
// rotate: false,
attribution: false,
}).extend([scaleLineControl, mousePositionControl]),
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [123.476492, 25.744676],
zoom: 8,
}),
})
this.map.addControl(scaleLineControl)办法定义
refresh() {
let that = this
that.reload()},
pointPopup() {var container = document.getElementById('popup')
var content = document.getElementById('popup-content')
var popupCloser = document.getElementById('popup-closer')
this.overlay = new Overlay({
element: container,
antoPan: true,
autoPanAnimation: {duration: 250,},
})
this.map.addOverlay(this.overlay)
let that = this
that.map.on('singleclick', function(evt) {let coordinate = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
let coordinate2 = evt.coordinate
that.addPoints(coordinate)
content.innerHTML = `
<p> 你点击了这里:</p>
<p> 坐标:</p>X:${coordinate2[0]} Y:${coordinate2[1]}`
that.overlay.setPosition(coordinate2) // 把 overlay 显示到指定的 x,y 坐标
})
popupCloser.onclick = function() {that.overlay.setPosition(undefined)
popupCloser.blur()
return false
}
},
addPoints(coordinate) {
const feature = new Feature({geometry: new Point(fromLonLat(coordinate)),
name: 'isbig',
})
const iconStyle = new Style({
image: new Icon({anchor: [0.5, 0.5],
src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png',
}),
})
feature.setStyle(iconStyle)
const vectorSource = new VectorSource({})
this.pointLayer = new VectorLayer({source: vectorSource,})
this.map.addLayer(this.pointLayer)
this.vectorSource.addFeature(feature)
return iconStyle
},
drawFeature() {
this.draw = new Draw({
source: this.vectorSource,
// 用此实例绘制的几何形态类型。type: 'Polygon',
})
this.map.addInteraction(this.draw)
// 绘制实现
this.draw.on('drawend', () => {this.map.removeInteraction(this.draw)
this.draw = null
})
},
toHome() {var to = [120.38, 36.07]
var view = this.map.getView()
view.setZoom(8),
view.animate({
center: to,
duration: 0,
})
},
// 输入矢量图层因素为 GeoJson 数据
outputJson() {let features = this.vectorSource.getFeatures()
let jsonObj = new GeoJSON().writeFeatures(features)
console.log('->GeoJson 格局数据：', jsonObj)
},
creatDraw(type) {
let maxPoints = null
if (this.measureType == 'angle') maxPoints = 3
else maxPoints = null
// 矢量图层源
let vectorSource = new VectorSource({wrapX: false,})
// 矢量图层
this.vectorLayer = new VectorLayer({
source: vectorSource,
style: new Style({
fill: new Fill({color: 'rgba(252, 86, 49, 0.1)',
}),
stroke: new Stroke({
color: '#fc5531',
width: 3,
}),
image: new Circle({
radius: 0,
fill: new Fill({color: '#fc5531',}),
}),
}),
name: '测量图层',
})
this.map.addLayer(this.vectorLayer)
this.draw = new Draw({
source: vectorSource,
type: type,
maxPoints: maxPoints,
style: new Style({
fill: new Fill({color: 'rgba(252, 86, 49, 0.1)',
}),
stroke: new Stroke({
color: '#fc5531',
lineDash: [10, 10],
width: 3,
}),
image: new Circle({
radius: 0,
fill: new Fill({color: '#fc5531',}),
}),
}),
// 绘制时点击处理事件
condition: (evt) => {
// 测距时增加点标注
if (
this.measureResult != '0' &&
!this.map.getOverlayById(this.measureResult) &&
this.measureType == 'distence'
)
this.creatMark(
null,
this.measureResult,
this.measureResult
).setPosition(evt.coordinate)
return true
},
})
this.map.addInteraction(this.draw)
/**
* 绘制开始事件
*/
this.draw.on('drawstart', (e) => {
this.sketchFeature = e.feature
let proj = this.map.getView().getProjection()
//****** 间隔测量开始时 *****//
if (this.measureType == 'distence') {this.creatMark(null, '终点', 'start').setPosition(this.map.getCoordinateFromPixel(e.target.downPx_)
)
this.tipDiv.innerHTML = '总长：0 m</br> 单击确定地点，双击完结'
this.geometryListener = this.sketchFeature
.getGeometry()
.on('change', (evt) => {
this.measureResult = this.distenceFormat(
getLength(evt.target, {
projection: 'EPSG:3857',
radius: 6378137,
})
)
this.tipDiv.innerHTML =
'总长：' + this.measureResult + '</br> 单击确定地点，双击完结'
})
}
//****** 面积测量开始时 *****//
else if (this.measureType == 'area') {
this.tipDiv.innerHTML = '面积：0 m<sup>2</sup></br> 持续单击确定地点'
this.geometryListener = this.sketchFeature
.getGeometry()
.on('change', (evt) => {if (evt.target.getCoordinates()[0].length < 4)
this.tipDiv.innerHTML =
'面积：0m<sup>2</sup></br> 持续单击确定地点'
else {
this.measureResult = this.formatArea(getArea(evt.target, { projection: proj, radius: 6378137})
)
this.tipDiv.innerHTML =
'面积：' + this.measureResult + '</br> 单击确定地点，双击完结'
}
})
}
//****** 角度测量开始时 *****//
else if (this.measureType == 'angle') {
this.tipDiv.innerHTML = '持续单击确定顶点'
this.geometryListener = this.sketchFeature
.getGeometry()
.on('change', (evt) => {if (evt.target.getCoordinates().length < 3)
this.tipDiv.innerHTML = '持续单击确定顶点'
else {this.measureResult = this.formatAngle(evt.target)
this.tipDiv.innerHTML =
'角度：' + this.measureResult + '</br> 持续单击完结'
}
})
}
})
/**
* 绘制开始事件
*/
this.draw.on('drawend', (e) => {let closeBtn = document.createElement('span')
closeBtn.innerHTML = '×'
closeBtn.title = '革除测量'
closeBtn.style =
'width: 10px;height:10px;line-height: 12px;text-align: center;border-radius: 5px;display: inline-block;padding: 2px;color: rgb(255, 68, 0);border: 2px solid rgb(255, 68, 0);background-color: rgb(255, 255, 255);font-weight: 600;position: absolute;top: -25px;right: -2px;cursor: pointer;'
closeBtn.addEventListener('click', () => {this.clearMeasure()
})
//****** 间隔测量完结时 *****//
if (this.measureType == 'distence') {this.creatMark(closeBtn, null, 'close1').setPosition(e.feature.getGeometry().getLastCoordinate())
this.creatMark(
null,
'总长：' + this.measureResult + '','length'
).setPosition(e.feature.getGeometry().getLastCoordinate())
this.map.removeOverlay(this.map.getOverlayById(this.measureResult))
}
//****** 面积测量完结时 *****//
else if (this.measureType == 'area') {this.creatMark(closeBtn, null, 'close2').setPosition(
e.feature
.getGeometry()
.getInteriorPoint()
.getCoordinates())
this.creatMark(
null,
'总面积：' + this.measureResult + '','area'
).setPosition(
e.feature
.getGeometry()
.getInteriorPoint()
.getCoordinates())
}
//****** 角度测量完结时 *****//
else if (this.measureType == 'angle') {this.creatMark(closeBtn, null, 'close3').setPosition(e.feature.getGeometry().getCoordinates()[1]
)
this.creatMark(
null,
'角度：' + this.measureResult + '','angle'
).setPosition(e.feature.getGeometry().getCoordinates()[1])
}
// 进行测量
this.stopMeasure()})
},
measure(type) {if (this.draw != null) return false // 避免在绘制过程再创立测量
this.measureType = type
if (this.vectorLayer != null) this.clearMeasure()
this.tipDiv = document.createElement('div')
this.tipDiv.innerHTML = '单击确定终点'
this.tipDiv.className = 'tipDiv'
this.tipDiv.style =
'width:auto;height:auto;padding:4px;border:1px solid #fc5531;font-size:12px;background-color:#fff;position:relative;top:60%;left:60%;font-weight:600;'
let overlay = new Overlay({
element: this.tipDiv,
autoPan: false,
positioning: 'bottom-center',
id: 'tipLay',
stopEvent: false, // 进行事件流传到地图
})
this.map.addOverlay(overlay)
this.pointermoveEvent = this.map.on('pointermove', (evt) => {overlay.setPosition(evt.coordinate)
})
if (this.measureType == 'distence' || this.measureType == 'angle') {this.creatDraw('LineString')
} else if (this.measureType == 'area') {this.creatDraw('Polygon')
}
},
creatMark(markDom, txt, idstr) {if (markDom == null) {markDom = document.createElement('div')
markDom.innerHTML = txt
markDom.style =
'width:auto;height:auto;padding:4px;border:1px solid #fc5531;font-size:12px;background-color:#fff;position:relative;top:60%;left:60%;font-weight:600;'
}
let overlay = new Overlay({
element: markDom,
autoPan: false,
positioning: 'bottom-center',
id: idstr,
stopEvent: false,
})
this.map.addOverlay(overlay)
return overlay
},
distenceFormat(length) {
let output
if (length > 100) {output = Math.round((length / 1000) * 100) / 100 + '' +'km' // 换算成 km 单位
} else {output = Math.round(length * 100) / 100 + '' +'m' // m 为单位
}
return output // 返回线的长度
},
formatArea(area) {
let output
if (area > 10000) {
output =
Math.round((area / 1000000) * 100) / 100 + '' +'km<sup>2</sup>' // 换算成 km 单位
} else {output = Math.round(area * 100) / 100 + '' +'m<sup>2</sup>' // m 为单位
}
return output // 返回多边形的面积
},
formatAngle(line) {var coordinates = line.getCoordinates()
var angle = '0°'
if (coordinates.length == 3) {
const disa = getLength(
new Feature({geometry: new LineString([coordinates[0], coordinates[1]]),
}).getGeometry(),
{
radius: 6378137,
projection: this.map.getView().getProjection(),
}
)
const disb = getLength(
new Feature({geometry: new LineString([coordinates[1], coordinates[2]]),
}).getGeometry(),
{
radius: 6378137,
projection: this.map.getView().getProjection(),
}
)
const disc = getLength(
new Feature({geometry: new LineString([coordinates[0], coordinates[2]]),
}).getGeometry(),
{
radius: 6378137,
projection: this.map.getView().getProjection(),
}
)
var cos = (disa * disa + disb * disb - disc * disc) / (2 * disa * disb) // 计算 cos 值
angle = (Math.acos(cos) * 180) / Math.PI // 角度值
angle = angle.toFixed(2) // 后果保留两位小数
}
if (isNaN(angle)) return '0°'
else return angle + '°' // 返回角度
},
// 进行测量
stopMeasure() {
this.tipDiv = null
this.map.removeInteraction(this.draw)
this.draw = null
this.map.removeOverlay(this.map.getOverlayById('tipLay'))
},
// 革除测量
clearMeasure() {this.vectorLayer.getSource().clear()
this.map.getOverlays().clear()
// 移除监听事件
unByKey(this.pointermoveEvent)
unByKey(this.geometryListener)
this.pointermoveEvent = null
this.geometryListener = null
this.measureResult = '0'
},
// 全屏
fullscreen() {if (this.textarr == '全屏') {
this.textarr = '放大'
let rfs =
this.$refs.map.requestFullScreen ||
this.$refs.map.webkitRequestFullScreen ||
this.$refs.map.mozRequestFullScreen ||
this.$refs.map.msRequestFullScreen
if (typeof rfs !== 'undefined' && rfs) {rfs.call(this.$refs.map)
console.log('1 全屏')
} else if (typeof window.ActiveXObject !== 'undefined') {
// for IE，这里其实就是模仿了按下键盘的 F11，使浏览器全屏
// eslint-disable-next-line no-undef
let wscript = new ActiveXObject('WScript.Shell')
console.log(wscript)
if (wscript != null) {wscript.SendKeys('{F11}')
console.log('3 全屏')
}
console.log('2 全屏')
}
} else {// el.webkitExitFullscreen()
this.textarr = '全屏'
let cfs =
document.exitFullscreen ||
document.msExitFullscreen ||
document.mozCancelFullScreen ||
document.webkitCancelFullScreen
console.log(cfs, 'cfs')
if (typeof cfs !== 'undefined' && cfs) {cfs.call(document)
console.log('4 全屏')
} else if (typeof window.ActiveXObject !== 'undefined') {
// for IE，这里和 fullScreen 雷同，模仿按下 F11 键退出全屏
// eslint-disable-next-line no-undef
let wscript = new ActiveXObject('WScript.Shell')
console.log('5 全屏')
if (wscript != null) {wscript.SendKeys('{F11}')
console.log('6 全屏')
}
}
}
// this.map.addControl(new FullScreen())
},
// 革除
clear() {this.vectorLayer.getSource().clear()
this.map.getOverlays().clear()
},
zoomIn() {let view = this.map.getView()
let zoom = view.getZoom()
view.setZoom(zoom + 1)
},
zoomOut() {let view = this.map.getView()
let zoom = view.getZoom()
view.setZoom(zoom - 1)
},
},css 款式这玩意就不展现了，菜鸟一个，请多指教