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 中的应用，这里以加载 mapbox 样式图层为例来说明矢量切片图层的使用。例子中使用的是 OpenStreetMap 的街道数据，将提供免费的数据，但需要在官网申请一个 key 。进入 OpenStreetMap 的 官方文档 ,可以查看获取 key 的相关信息。

使用矢量切片图层跟使用其它图层的方法差不多，首先就是引入相关的类，如下所示：

然后再创建相关的图层：

加载图层后的效果图如下所示：

MVT 为 Mapbox Vector Tiles 的缩写，表示数据来源格式采用的是 Mapbox 的矢量切片，加载地图时，将以切片的方式来加载数据，切片大小默认为 512 x 512 。

由于矢量地图的数据是保存在客户端的，但保存数据仅仅是一些渲染相关的，还有可以获取到 geometries ，我们就可以利用这一点来对地图做一起交互，这里做一个示例，当鼠标移动时，在鼠标移动所处的位置根据 geometries 来绘制一个矩形。

首先为地图添加一个 pointermove 事件，然后再使用 forEachFeatureAtPixel 来获取当前点关联的要素，在将 geometry 添加到矢量图层上。效果如下所示：

---