vue中使用OpenLayers（四）：事件和取值

vue中使用OpenLayers（四）：事件和取值

（一）创建地图

    initPointMap() {
        this.map = new Map({
          target: "mainDiv",
          view: new View({
            center: fromLonLat([119.60753817138888, 30.49043631527778]),
            projection: "EPSG:3857",
            zoom: 8
          }),
          layers: [
            new TileLayer({
              source: new XYZ({
                url: "静态服务器给你的地址',
                wrapX: true
              })
            })
          ]
        });
      },//绘制第一层地图

首先是创建地图。这里要提点一下 ，OpenLayers创建地图只能创建一次，之后再创建会地图会蹦掉，想要地图叠加，你只能再写个div。

（二）点击事件和鼠标移入事件

this.map.on(“click”, (evt) => { }）
和
this.map.on(“pointermove”, (evt) => { }）这两个事件
这里要了解，OpenLayers的机制，他和其他地图不一样的地方，他会把所有的点击事件和鼠标事件全部遍历一遍，我们在其中找到我们想要点的，通过判断触发我们的事件

代码：

 this.map.on("click", (evt) => {
        var feature = this.map.forEachFeatureAtPixel(evt.pixel,
          function(feature) {
            return feature;
          });
        if (feature) { //这里说明我们点击的是点标记，
          let lnglat = feature.get("lnglat");//我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
           if (lnglat) {
          //含有lnglat 参数的点标记触发事件
          }
          
        }
      });
      this.map.on("pointermove", (evt) => {

        var feature = this.map.forEachFeatureAtPixel(evt.pixel,
          function(feature) {
            return feature;
          });
        if (feature) {
          let lnglat = feature.get("lnglat");//点标记坐标

         }

      });



  let  rome = new Feature({
            lnglat: [item.lng, item.lat], //这里我传入lnglat 。
            geometry: new Point(fromLonLat([item.lng, item.lat]))
          });
          rome.setStyle(new Style({
            image: new Icon({
              color: "#eee",
              crossOrigin: "anonymous",
              src: redta
            })
          }));

OpenLayers和其他地图不一样，事件只能写一次，不然他会不断的遍历。本来就是遍历所有事件了，再不断的遍历，性能方面可想而知。

我们可以通过给点传了那些值来判断我到底点的是哪个点。