openlayers+vue2,绘制iconfont图标

思路： 使用canvas绘制出图标输出成图片，再利用Style的image即可

1.绘制iconfont图标要使用iconfont的unicode格式

2.确保iconfont.css中的font-family和画布的font保持一致

这个iconStyle返回的其实就是图片地址

<script>
import XYZ from 'ol/source/XYZ'
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import { Vector as VectorSource } from 'ol/source.js'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js'
import { Draw, Modify } from 'ol/interaction.js'
import {
  Style,
  Icon,
} from 'ol/style.js'
export default {
  name: 'index',
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let vecLayer = new TileLayer({
        source: new XYZ({
          url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=2d59099fbdfa866dd9bdc3b0c878c12e',
        }),
      })
      // 标注图层(就是我们所看见的行政区名称，道路)
      let vectorMark = new TileLayer({
        source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2d59099fbdfa866dd9bdc3b0c878c12e',
        }),
      })

      // 创建绘制数据源
      let drawSource = new VectorSource()
      let drawVector = new VectorLayer({
        source: drawSource,
      })
      let pointDraw = new Draw({
        source: drawSource,
        type: 'Point',
      })
      let pointModify = new Modify({
        source: drawSource,
      })
      //  创建地图对象
      this.map = new Map({
        target: 'map', // 地图容器 对应id
        layers: [vecLayer, vectorMark, drawVector], // 图层
        view: new View({
          // 视图
          projection: 'EPSG:4326', // 坐标系
          // 初始化地图中心
          center: [108.81, 23.22],
          zoom: 18,
          maxZoom: 18,
          minZoom: 1,
        }),
      })

      // 将鼠标样式改为十字
      this.map.getTargetElement().style.cursor = 'crosshair'

      this.map.addInteraction(pointDraw)
      this.map.addInteraction(pointModify)

      // 创建一个图标样式
      const iconStyle = new Style({
        image: new Icon({
          anchor: [0.5, 0.5],
          src: this.iconStyle('&#xe6f7;', '#EB2F96', 24), // 图标文件路径
        }),
      })
      // 绘制结束设置该特征样式
      pointDraw.on('drawend', (evt) => {
        evt.feature.setStyle(iconStyle)
      })
    },
    iconStyle(code, color, size) {
      const canvas = document.createElement('canvas')
      canvas.width = size
      canvas.height = size
      //  获取画布
      const context = canvas.getContext('2d')

      context.font = size + 'px "iconfont"'
      context.textAlign = 'left'
      context.textBaseline = 'top'
      const icon = eval(
        '("' + `${code}`.replace('&#x', '\\u').replace(';', '') + '")'
      )

      context.fillStyle = color
      context.fillText(icon, 0, 0)
      return canvas.toDataURL('image/png')
    },
  },
}
</script>

效果

如果出现一个方框，确保woff2 也就是字体文件先加载