Leaflet

  1. 地图遮罩反选
    参考: https://blog.csdn.net/u012420268/article/details/87188011
    补充:里面需要用到一个区域的经纬度,可以上阿里地图工具(本人没试过)

  1. 地图设置最大和最小缩放范围
var map = L.map('map', {
        minZoom: 0,
        maxZoom: 0
    });

参考:CSDN


  1. 地图上写字
    方法:L.divIcon()
  2. 地图上画折线(不规则的线条)
    方法:L.polyline()
    例子:
const polyline = [];
res.features.forEach((item) => {
			// 调转经纬度
            let arr = item.geometry.paths.map((item) => {
              return item.map((v) => [v[1], v[0]]);
            });
			// 折线
            let paths = L.polyline(arr, {
              color: "#62c6fe",
              weight: 2,
            });
            polyline.push(paths);
			// 文字
            var myIcon = L.divIcon({
              html: item.attributes.NAME,
              className: "my-div-icon",
              iconSize: 12,
            });
            let marker = L.marker([item.attributes.Y, item.attributes.X], {
              icon: myIcon,
            });
            polyline.push(marker);
          });
			// 放到同一个图层中
          this.baseLayer[data.key] = L.layerGroup(polyline);
          this.$refs.map.addLayer(this.baseLayer[data.key], 8888);

  1. 地图可视范围内四个顶点的经纬度
    效果图:image
  2. 在地图上绘制:leaflet-draw
    参考:博客园
posted @ 2022-10-19 16:13  拉布拉多~  阅读(333)  评论(0编辑  收藏  举报