leaflet.txt

学习地址：
https://blog.csdn.net/naipeng/article/category/6584421









（1）var myIcon = L.divIcon({className: 'my-div-icon'});

在使用divIcon时className中定义的样式不能定义position属性值除了absolute以外的任何值，因为在leaflet中已经定义该属性为position = absolute了，
如果更改，marker在地图上的标记会出现异常，所有最好不要再设置position = absolute了






（2）得到不重叠的数据

var page = {
  map: leafletMap,  //地图实例
  // 得到不相交的数据
  getNoIntersectData: function(data) {
    var self = this;
    var result = [];
    var widthOffet = 30;
    var heightOffset = 15;

    data.forEach(function(el) {
      var p = self.map.latLngToLayerPoint([el.lat, el.lon]);
      var left1 = p.x - widthOffet;
      var right1 = p.x + widthOffet;
      var top1 = p.y - heightOffset;
      var bottom1 = p.y + heightOffset;
      var isNoIntersect = true; //是否不相交

      for (var i = 0; i < result.length; i++) {
        var item = result[i];
        var p = self.map.latLngToLayerPoint([item.lat, item.lon]);
        var left2 = p.x - widthOffet;
        var right2 = p.x + widthOffet;
        var top2 = p.y - heightOffset;
        var bottom2 = p.y + heightOffset;

        // 判断两个矩形（60*30）是否相交
        if (
          !(
            left2 > right1 ||
            right2 < left1 ||
            top2 > bottom1 ||
            bottom2 < top1
          )
        ) {
          isNoIntersect = false;
          break;
        }
      }

      if (isNoIntersect) {
        result.push(el);
      }
    });

    return result;
  }
}





（3）写leaflet插件的方式： http://0x0803.top/2018/06/05/gis-leaflet-tutorials-extends/








（4）地图分配相关代码： 这里分了两个地图，分别为mapAct， mapFcst（改代码摘自vue项目）



    <div class="map-box">
      <div @mouseenter="onMouseenterMap('act', $event)" @mouseleave="onMouseleaveMap('act', $event)">
        <div id="mapAct"></div>
      </div>
      <div @mouseenter="onMouseenterMap('fcst', $event)" @mouseleave="onMouseleaveMap('fcst', $event)">
        <div id="mapFcst"></div>
      </div>
    </div>





    actMoveendHandler(e) {
      const center = this.mapAct.getCenter();
      const zoom = this.mapAct.getZoom();
      this.mapFcst.flyTo(center, zoom);
    },
    
    fcstMoveendHandler(e) {
      const center = this.mapFcst.getCenter();
      const zoom = this.mapFcst.getZoom();
      this.mapAct.flyTo(center, zoom);
    },

    onMouseenterMap(type, event) {
      if (type === 'act') {
        this.mapAct.on('moveend', this.actMoveendHandler)
      } else if (type === 'fcst') {
        this.mapFcst.on('moveend', this.fcstMoveendHandler)
      }

    },

    onMouseleaveMap(type, event) {
      if (type === 'act') {
        this.mapAct.off('moveend', this.actMoveendHandler)
      } else if (type === 'fcst') {
        this.mapFcst.off('moveend', this.fcstMoveendHandler)
      }
    }