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

圆形头像图标"/>

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

记录一个使用canvas 将一张图片等比缩放，裁剪为一个圆

1、原始图片

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

3、设置样式的函数

    /*** 设置Style*/setStyleOnPersonLocation (feature) {const data = feature.values_var imgUrl = 'https://person_head_img/avatar.jpg'// 绘制圆角矩形let canvas = document.createElement('canvas')canvas.width = 80canvas.height = 80var context = canvas.getContext('2d')var img = new Image()img.src = imgUrl // 原始图片let w = canvas.widthlet h = canvas.heightimg.onload = function () {context.save()// context.arc(x,y,r,sAngle,eAngle,counterclockwise);context.arc(40, 40, 20, 0, 2 * Math.PI) // 从画布上裁剪出这个圆形context.clip()// context.drawImage(img,x,y,width,height);context.drawImage(img, 20, 20, 40, 40)}// 设置stylereturn new Style({image: new Icon({crossOrigin: 'anonymous',img: canvas,imgSize: [w, h]}),text: new Text({text: data.name,offsetY: -26,scale: 0.6,font: '12px Microsoft YaHei',fill: new Fill({color: '#808080'}),stroke: new Stroke({color: '#333',width: 1})})})},

4、绘制

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

import {Vector as VectorLayer} from 'ol/layer'
import GeoJSON from 'ol/format/GeoJSON'
import VectorSource from 'ol/source/Vector'
import {Point} from 'ol/geom'
import {boundingExtent, getCenter} from 'ol/extent'
import {Style, Icon, Stroke, Text, Fill} from 'ol/style'methods:{addlayerToMap(){const geologyData = {type: 'FeatureCollection',crs: {type: 'Feature'},features: [type: 'Feature',properties: 'extraData',id:'userId',geometry: {type: 'Point',coordinates: [104.050629,30.65769]}]}let nomalSource = new VectorSource({features: (new GeoJSON()).readFeatures(geologyData)})this.shareLocationLayer = new VectorLayer({source: nomalSource,// style: _this.setStyleOnPersonLocation // 不能在此设置style 否则地图移动会持续触发重绘})this.map.addLayer(this.shareLocationLayer)this.shareLocationLayer.getSource().forEachFeature(featureObj => {featureObj.setStyle(_this.setStyleOnPersonLocation(featureObj))})}
}

记录记录便于查阅