openlayers绘制图形添加至地图

import 'ol/ol.css'

import { Feature } from "ol"

import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style'

import { Draw, Modify, Snap } from 'ol/interaction'

import { Vector as VectorSource } from 'ol/source'

import { Vector as VectorLayer } from 'ol/layer'

import GeoJSON from "ol/format/GeoJSON"

import { boundingExtent } from 'ol/extent'

import { Point } from 'ol/geom'

`// 初始化

init (type) {

`//type为绘制类型``

//清除次图层

if (_that.iconLayer) {

}

// 移除绘制方法

Map.removeInteraction(_that.draw)

Map.removeInteraction(_that.snap)

// 创建矢量容器

_that.source = new VectorSource()

//创建矢量层

_that.iconLayer = new VectorLayer({

})

//创建绘制修改工具

const modify = new Modify({ source: _that.source })

//添加

Map.addInteraction(modify)

//绑定修改绘制图形触发事件

modify.on('modifyend', this.ModifyIconEnd)

//添加绘制工具

_that.addInteractions()

_that.draw = new Draw({

})

// 此方法用于保存拓扑关系

_that.snap = new Snap({ source: _that.source })

// 添加

Map.addInteraction(_that.draw)

Map.addInteraction(_that.snap)

// 监听绘制结束事件

_that.draw.on("drawend", (evt) =>{

// 获取绘制图形，其余同修改时处理数据

let featureGeoJson = new GeoJSON().writeFeature(evt.feature)

})

//图层添加至地图

Map.addLayer(_that.iconLayer)

},

//样式函数

styleFunction (feature) {

const styles = [

]

// 此处添加箭头样式，绘制线绘制箭头

if (this.type == 'LineString' &&this.operate == 'arrow') {

}

//返回样式

return styles

},

// 修改图形

ModifyIconEnd (evt) {

const _that = this

// 获取修改后的图形，并保存

let featureGeoJson = new GeoJSON().writeFeature(evt.features.array_[0])

this.featureData = featureGeoJson

//绘制为圆时，无法通过geoJson回显，获取半径和中点回显

if (_that.type == 'Circle') {

// 圆的半径换算

}

//绘制线段取绘制次序中点备用

else if (_that.type == 'LineString') {

}

//绘制区域时获取其中点

else if (_that.type == 'Polygon') {

//获取边界值

}

},

点击浏览器左角的左右箭头旁边的小三角查找即可。如果小三角灰色，你打开两个网页看看结果。有时候你用360清理了你也不知道，自己觉得要收藏的网站放到收藏夹里，历史记录随时可能没有的。。不管什么浏览器通用的快捷键是ctrl+h“工具”——internet选项——“内容”——自动完成——设置——勾选地址栏前的勾，你的地址栏就很容易出现了。

---