leaflet基础知识

下载

leafletjs官网

底图

openwhatevermap
高德谷歌腾讯天地图地图瓦片url

Geojson数据获取

shp数据转换
边界生成器

代码

加载图层

import L from "leaflet";
var layer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");

创建地图

// div id:  map-container
	var map = L.map('map-container', {
				center: [37.42, 107.40],//中心坐标
				zoom: 4.9,//缩放级别
				minZoom: 3,
				maxZoom: 14,
				zoomControl: true, //缩放组件
				attributionControl: false, //去掉右下角logol
				layers: [layer],//图层
	});

加载中国GeoJSON

	var style = {
          "color": "#fff", //边框颜色
          "weight": 3, //边框粗细
          "opacity": 0.4, //透明度
          "fillColor": '#f3b3ae', //区域填充颜色
          "fillOpacity": 0.5, //区域填充颜色的透明
      };
      var s = L.geoJSON(CHINA,{style:style}).addTo(map); 

自定义tooltip

 s.bindTooltip((Area)=>{
        let p =  document.createElement('p');
        p.append(Area.feature.properties.name)
        
        return p;
      })

自定义弹窗

 	var popup = L.popup({
        maxWidth: 300,
        minWidth: 50,
        maxHeight: 100,
        closeButton: false,
        className: 'lln-test'
      }).setContent((Area)=> {
        let p =  document.createElement('p');
        p.append('当前位于' + Area.feature.properties.name);
        p.style.color = 'blue';
        
        return p;
      })
      s.bindPopup(popup)

添加Icon

	  var myIcon = L.icon({
        iconUrl: XingPng,
        iconSize: [10, 10],
      });
      var marker = L.marker([39.89854, 116.3347], {
        icon: myIcon
      }).addTo(map)

网格

let colors = [ 
    '#0e1f1d',
    '#75d575', 
    "#C2F9FF",
    "#99E1F0",
    "#66D3E8",
    "#33C4E1",
    "#0088A3",
    '#ff1744',
    '#f50057',
    '#d500f9',
    '#ff9100',
    '#ffc400',
    '#00e676'];

function addGrid({latitudeStart, latitudeEnd, latitudeStep, longitudeStart, longitudeEnd}, colorIndex = 0) {
  
  let color = colors[colorIndex] || colors[0];
  //判断需要绘制的经纬度的大小
  let leftTopPoint = map.project(L.latLng(latitudeEnd, longitudeStart));
  let rightBottomPoint = map.project(L.latLng(latitudeStart, longitudeEnd));
  var canvasLayer = L.GridLayer.extend({
      createTile: function(coords){
        var size = this.getTileSize()

        var tile = L.DomUtil.create('canvas', 'leaflet-tile');
        var ctx = tile.getContext('2d');
        tile.width = size.x;
        tile.height = size.y;
        
        var nwPoint = coords.scaleBy(size);// 当前网格左上角
        //获取当前网格的右下角
        let nwBottomPoint = {
          x: nwPoint.x + size.x,
          y: nwPoint.y + size.y
        }

        function draw() {
          ctx.strokeStyle = color;
          ctx.strokeWidth = '0.2px';
          //判断当前网格是否在所需绘制的网格范围内
          if (nwBottomPoint.x < leftTopPoint.x || nwPoint.x > rightBottomPoint.x || nwPoint.y > rightBottomPoint.y || nwBottomPoint.y < leftTopPoint.y) {
            //不包含
          }else {
            //包含
            let orig = map.project(L.latLng(0, 0));
            let minSize = map.project(L.latLng(latitudeStep, latitudeStep));
            //计算一经纬度的尺寸大小
            minSize = {
              x: minSize.x - orig.x,
              y: minSize.y - orig.y
            }

            console.log('rate:',size.x/minSize.x)
            if (size.x/minSize.x > 30) {
              return false;
            }

            // console.log('minSize', minSize)
            // 设置边界
            let startX = leftTopPoint.x;
            while (startX < nwPoint.x) {
              startX += minSize.x;
            }
            let endX = rightBottomPoint.x;
            if(endX > nwBottomPoint.x) {
              endX = nwBottomPoint.x;
            }

            let startY = leftTopPoint.y;
            let endY = rightBottomPoint.y;
            let minSizeY = Math.abs(minSize.y)
            while (startY < nwPoint.y) {
              startY += minSizeY;
            }

            if(endY > nwBottomPoint.y) {
              endY = nwBottomPoint.y;
            }

            //canvas绘图坐标系是从0开始，需要把初始值重置
            startX -= nwPoint.x;
            startY -= nwPoint.y;
            endX -= nwPoint.x;
            endY -= nwPoint.y;
            
            for(let i = startX; i <= endX; i += minSize.x) {
              ctx.moveTo(i,  leftTopPoint.y < nwPoint.y ? 0 : startY);
              ctx.lineTo(i, endY);
              for(let j = startY; j <= endY; j += minSizeY) {
                ctx.moveTo(leftTopPoint.x < nwPoint.x ? 0 : startX, j);
                ctx.lineTo(endX, j);
              }
            }
          }

        }
        //绘制
        ctx.beginPath();
        draw();
        ctx.closePath();
        ctx.stroke();
        
        return tile;
      }
    });
    let tiles = new canvasLayer()
    tiles.addTo(map)

    return tiles;
}

参考

leaflet专栏
leaflet地图总结
threeJs 地图基础