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') {

//获取边界值

}

},

通常需要在地图上标注出一些景点、建筑或者公共设施，可以选择使用矢量标注或者聚合标注。openlayers 添加矢量标注的原理是将标注添加到一个新建的矢量层上，再将矢量层添加到地图上叠加显示；聚合标注的原理同上，但它适用于标注的数据量非常大的场景，随着层级的放大，会展示更多的标注，缩小时，则将标注聚合显示，能够在大量加载标注时提高渲染性能。

1、矢量标注

2、聚合标注

openlayers 可以创建一个 Overlay 覆盖层，这个覆盖层能够展示自己写的 html 内容，从而实现添加各种所需的覆盖物。也可以通过这个方法来添加标注，但覆盖层添加的覆盖物会影响地图的拖动（即在覆盖物上进行滑动 *** 作时地图无法响应，虽然可以通过设置 stopEvent 将滑动事件传递到地图上，但这样会导致在IOS端的覆盖物无法进行点击 *** 作）。

因此如果要添加可以点击并且不影响地图拖动的标注时，建议使用矢量层标注，而如果要展示自定义的一些内容，如点击地图d出对话信息框、地图上的自定义按钮等则使用覆盖层更加合适。

1、加载覆盖层

2、添加地图点击监听事件

原理大致与添加矢量标注相同，都是添加在矢量图层上，不过这里添加的是线对象。

获取GeoJSON数据，可以通过http请求获取，也可以自己定义json数据。

注意格式

var geojsonObject = {        'type': 'FeatureCollection',        'crs': {          'type': 'name',          'properties': {            'name': 'EPSG:3857'

         }

       },        'features': [{          'type': 'Feature',          'geometry': {            'type': 'Point',            'coordinates': [0, 0]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'LineString',            'coordinates': [[4e6, -2e6], [8e6, 2e6]]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'LineString',            'coordinates': [[4e6, 2e6], [8e6, -2e6]]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'Polygon',            'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'MultiLineString',            'coordinates': [              [[-1e6, -7.5e5], [-1e6, 7.5e5]],              [[1e6, -7.5e5], [1e6, 7.5e5]],              [[-7.5e5, -1e6], [7.5e5, -1e6]],              [[-7.5e5, 1e6], [7.5e5, 1e6]]

           ]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'MultiPolygon',            'coordinates': [              [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],              [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],              [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]

           ]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'GeometryCollection',            'geometries': [{              'type': 'LineString',              'coordinates': [[-5e6, -5e6], [0, -5e6]]

           }, {              'type': 'Point',              'coordinates': [4e6, -5e6]

           }, {              'type': 'Polygon',              'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]

           }]

         }

       }]

     }

创建矢量图层Source

var vectorSource = new ol.source.Vector({

       features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)

     })

创建图层并绑定Source

var vectorLayer = new ol.layer.Vector({

       source: vectorSource,

       style: ''

     })

添加到map中即可

---