openlayers 使用canvas绘制圆形头像图标

1、原始图片

2、绘制后在地图中呈现的样式

3、设置样式的函数

4、绘制

上面样式设置的函数写好后，这里就可以开始实例化vector , 将其添加到地图中去了

记录记录便于查阅

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中，控件SelectFeature主要用于 *** 作(鼠标移入、移出、单击、双击)矢量图层(OpenLayers.Layer.Vector)的要素。那么它是如何实现的呢，还是让我们看代码吧。

首先我们还是先把所有要用到类实例化出来，参考代码：

View Code

矢量要素的单击事件，仅需在实例化类时注册onSelect事件即可，参考代码：

View Code

矢量要素的鼠标移入事件，需要实例化时注册onSelect事件，同时设置hover属性为true，参考代码：

View Code

矢量要素的鼠标各种事件的混合 *** 作，如需要鼠标移入、移出、单击、双击等事件，参考代码：

View Code

对于事件的混合 *** 作行为，我们不能在callbacks对象中同时注册click和dblclick事件，这样的话单击事件会屏蔽双击事件。对于下述代码，dblclick事件永不触发：

View Code

---