vue+openlayers在地图添加图标

参考帖子：https://blog.csdn.net/feiteyizu/article/details/81133845
有两种方式，介绍第二种，第一种太简单，，而且不能动态增加dom元素从而添加图标，也就是说，如果使用上述帖子的第一种方式，你需要加几个图标，就需要提前预定好多少个图标对应的dom元素，而且未被使用的图标会显示在地图下面，地图会被撑变形，需求如果只是添加一两个图标，且是固定的，可以参考第一种方式，相对而言，第一种能简单点

首先是地图的初始化，参考上篇帖子，很详细了，使用的是Tomcat虚拟目录添加离线地图

https://blog.csdn.net/u013772906/article/details/96429589
下面是是添加图标的代码：

上代码

// 需要提前import的类
// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
// 用来添加相关文字描述的
import Text from 'ol/style/Text' 
import Fill from 'ol/style/Fill'

// 添加图标的方法
addIconMarker(map) {
      var startMarker = new OlFeature({
        type: 'icon',
        geometry: new OlGeomPoint([118.10131072998047, 36.819305419921875])
      })

      var vectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: [startMarker]
        }),
        style: new OlStyleStyle({
          image: new OlStyleIcon({
            anchor: [0.5, 1],
            src: window.location.origin + window.location.pathname + 'static/mapMoniter/0.png'
            // src: http://192.168.4.61:9527/static/mapMoniter/0.png
            // 说明下，因为vue项目打包之后，我这张图片放到了static目录下，直接给相对路径是无法访问到，
            // 可以通过js原生的API拿到对应的前台服务器ip和端口，还有项目名称，就可以访问到，下面附了对应帖子链接
          }),
          // 设置图片下面显示字体的样式和内容
          text: new Text({
            text: '文字描述'// 添加文字描述
            font: '14px font-size', // 设置字体大小
            fill: new Fill({// 设置字体颜色
              color: '#1CAF9A'
            }),
            offsetY: 10// 设置文字偏移量
          })
        })
      })
      map.addLayer(vectorLayer)
    }

实现效果（文字描述部分，我这边是动态加的，参考效果）

动态加载静态资源图标那块，可以参考如下帖子vue打包之后无法访问相对路径的图片

具体的类说明可以参考openlayers官网的API，里面有关于vue的用法和调用方式，我就不赘述了，上面描述的也比我详尽很多

Fill对应的API：https://openlayers.org/en/latest/apidoc/module-ol_style_Fill-Fill.html
截图如下

另外附一个点击对应图标，获取到这个feature（图标）的方法

// 监听singleclick事件,通过点击事件，获取对应点的feature图标
  map.on('singleclick', function(e) {
	console.log(e.coordinate)
	if (map.hasFeatureAtPixel(e.pixel)) {
	  var feature = map.getFeaturesAtPixel(e.pixel)
	}
  })

地图绑定的事件是单击事件，e.coordinate，对应的是点击地图点的经纬度，获取图标需要用e.pixel这个参数来获取
返回的feature就是对应你点击地方的图标的对象了