leaflet 领图一个本地的类似百度地图工具-不连外网

标签：function map layer console latlng 领图 leaflet var 不连外

官网：https://leafletjs.com/ 二次开发手册-中文：http://112.91.146.167:9090/api/

领图（一款给力的开源离线地图解决方案）

Leaflet 官方教程 Zoom levels 缩放级别

二次开发别人写的一个包demo
https://github.com/Vhhhhh/leadermap-leaflethttps://gitee.com/xiaoZ1712/leadermap-leaflet

如何将图片切割成瓦片图？

node实现图片分割

地图选择器（这个很重要！！）

http://datav.aliyun.com/tools/atlas/index.html

这个帮主文档也很重要
https://leafletjs.com/reference-1.7.1.html#path-option

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Leaflet Map</title>
    <link rel="stylesheet" type="text/css" href="leafletJs/leaflet.css" />
    <script type="text/javascript" src="leafletJs/leaflet-src.js"></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #mapId {
        /* height: 100%; */
        height: 600px;
        width: 800px;
      }
    </style>
  </head>
  <body>
    <div id="mapId"></div>
  </body>
  <script type="text/javascript">
    (function (L, undefined) {
      var map;
      var markerId;
      var iconPrefix = "./leafletJs/assets/imageIcons/";
      var polygonToolId;
      var polygonToolArr = [];

      function main() {
        createMap(); // 创建地图
        createTileLayer(); // 创建瓦片
        createClickHandle(); // 绑定点击事件
        // polygonPosition1Init();
      }
      main();

      function createMap() {
        map = L.map("mapId", {
          maxBounds: [
            // 限制显示区域
            [39.3242059256878, 116.77505493164064],
            [38.949263400347746, 117.64984130859376],
          ],
        }).setView([39.136950954477115, 117.17706441879274], 8); // 初始化中心点，初始化level
      }

      function createTileLayer() {
        var url = "http://192.168.76.66:9099/img/{z}/{x}/{y}.png";
        L.tileLayer(url, {
          maxZoom: 15,
          minZoom: 3,
          attribution: "天房科技",
        }).addTo(map);
      }

      function createClickHandle() {
        map.on("click", function (e) {
          var latlng = e.latlng;
          console.info(`[${latlng.lat},${latlng.lng}]`);
          // eachLayerConsole();
          // imageMarkerHandle(e);

          // polygonTool(e); // 画多边形工具
          // markerHandle(e);
          // showTip(e, "kkk");
        });
      }

      function imageMarkerHandle(e) {
        var imageIcon = L.icon({
          iconUrl: iconPrefix + "leaf-green.png",
          shadowUrl: iconPrefix + "leaf-shadow.png",

          iconSize: [38, 95], // size of the icon
          shadowSize: [50, 64], // size of the shadow
          iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
          shadowAnchor: [4, 62], // the same for the shadow
          popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor
        });
        markerBaseHandle(function () {
          markerId = L.marker(e.latlng, { icon: imageIcon }).bindPopup(
            "This is Littleton, CO."
          );
        });
      }

      function markerHandle(e) {
        markerBaseHandle(function () {
          markerId = L.marker(e.latlng).bindPopup("This is Littleton, CO.");
          markerId.on("click", function (e) {
            // alert("I am marker!");
            console.info("I am marker!");
          });
        });
      }

      function markerBaseHandle(callback) {
        map.hasLayer(markerId) && map.removeLayer(markerId);
        callback();
        map.addLayer(markerId);
      }

      function showTip(e, txt) {
        L.popup().setLatLng(e.latlng).setContent(txt).openOn(map);
      }

      function eachLayerConsole() {
        map.eachLayer(function (layer) {
          console.info("eachLayer =>", layer);
        });
      }

      function polygonTool(e) {
        map.hasLayer(polygonToolId) && map.removeLayer(polygonToolId);
        polygonToolArr[polygonToolArr.length] = [e.latlng.lat, e.latlng.lng];
        polygonToolId = L.polygon(polygonToolArr);
        map.addLayer(polygonToolId);
        console.info(
          `var polygon = L.polygon(
            ${JSON.stringify(polygonToolArr)}
            ).bindPopup("提示信息").addTo(map);`
        );
      }

      // 开启 polygonTool 函数后 获得此坐标点
      function polygonPosition1Init() {
        var polygon = L.polygon([
// 坐标点已删除
        ])
          .bindPopup(
            "<div style='width:250px;'><img src='https://www.baidu.com/img/flexible/logo/pc/result.png' />111</div>"
          ) // 弹框可加图片文字
          .addTo(map);
      }
    })(L);
  </script>
</html>

下面自定义的地图比较难

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Leaflet Map</title>
    <link rel="stylesheet" type="text/css" href="leafletJs/leaflet.css" />
    <script type="text/javascript" src="leafletJs/leaflet-src.js"></script>
    <script
      type="text/javascript"
      src="leafletJs/assets/geoJson/jquery-1.12.4.js"
    ></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #mapId {
        height: 100%;
        background-color: #f2f7f7;
        /* height: 600px;
        width: 800px; */
      }
    </style>
  </head>
  <body>
    <div id="mapId"></div>
  </body>
  <script type="text/javascript">
    (function (L, undefined) {
      var map;
      var markerId;
      var iconPrefix = "./leafletJs/assets/imageIcons/";
      var polygonToolId;
      var polygonToolArr = [];

      function main() {
        createMap(); // 创建地图
        // createTileLayer(); // 创建瓦片
        createClickHandle(); // 绑定点击事件
        // polygonPosition1Init();
        getWaikuang();
        getJson(createGeoJson);
      }
      main();

      function getWaikuang() {
        $.getJSON(
          "leafletJs/assets/geoJson/100000.json",
          function (data, status) {
            var myStyle = {
              color: "#666",
              fillColor: "#fff",
              weight: 1.5,
            };
            L.geoJSON(data, {
              style: myStyle,
            }).addTo(map);
          }
        );
      }

      function getJson(callback) {
        var addr1 =
          "https://geo.datav.aliyun.com/areas_v3/bound/100000_boundary.json";
        var addr2 = "leafletJs/assets/geoJson/100000_full.json";
        $.getJSON(addr2, function (data, status) {
          console.info("data", data);
          console.info("数据: " + data + "\n状态: " + status);
          callback(data);
        });
      }

      function createGeoJson(geoJson1) {
        var myStyle = {
          // className: "dashLines",
          dashArray: "1,6",
          fillColor: "#fff",
          color: "#333",
          weight: 0.5,
          fillOpacity: 0.2,
        };

        var geo1 = L.geoJSON(geoJson1, {
          style: myStyle,
        })
          // .bindPopup(function (layer) {
          //   // console.info("layer", layer);
          //   return layer.feature.properties.name;
          // })
          .addTo(map);
        geo1.on("mouseover", function (e) {
          console.info("mouseover e", e);
          var currAdCode = e.layer.feature.properties.adcode;
          map.eachLayer(function (layer) {
            // console.info("eachLayer =>", layer.feature);
            if (
              layer &&
              layer.feature &&
              layer.feature.properties &&
              layer.feature.properties.adcode === currAdCode
            ) {
              console.info("layer111", layer);
              layer.setStyle({ fillColor: "blue" });
              // L.popup()
              //   .setLatLng(e.latlng)
              //   .setContent(layer.feature.properties.name)
              //   .openOn(map);
            }
          });
        });
        geo1.on("mouseout", function (e) {
          console.info("mouseout e", e);
          var currAdCode = e.layer.feature.properties.adcode;
          map.eachLayer(function (layer) {
            if (
              layer &&
              layer.feature &&
              layer.feature.properties &&
              layer.feature.properties.adcode === currAdCode
            ) {
              console.info("222");
              layer.setStyle({ fillColor: "white" });
            }
          });
        });
        geo1.on("click", function (e) {
          // console.info("click e", e);
        });
      }

      function createMap() {
        map = L.map("mapId", {
          maxBounds: [
            // 限制显示区域
            // [39.3242059256878, 116.77505493164064],
            // [38.949263400347746, 117.64984130859376],
          ],
        }).setView([39.136950954477115, 117.17706441879274], 8); // 初始化中心点，初始化level
      }

      function createTileLayer() {
        var url = "http://192.168.76.66:9099/img/{z}/{x}/{y}.png";
        L.tileLayer(url, {
          maxZoom: 15,
          minZoom: 3,
          attribution: "天房科技",
        }).addTo(map);
      }

      function createClickHandle() {
        map.on("click", function (e) {
          var latlng = e.latlng;
          console.info(`[${latlng.lat},${latlng.lng}]`);
          eachLayerConsole();
          // imageMarkerHandle(e);

          // polygonTool(e); // 画多边形工具
          markerHandle(e);
          // showTip(e, "kkk");
        });
      }

      function imageMarkerHandle(e) {
        var imageIcon = L.icon({
          iconUrl: iconPrefix + "leaf-green.png",
          shadowUrl: iconPrefix + "leaf-shadow.png",

          iconSize: [38, 95], // size of the icon
          shadowSize: [50, 64], // size of the shadow
          iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
          shadowAnchor: [4, 62], // the same for the shadow
          popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor
        });
        markerBaseHandle(function () {
          markerId = L.marker(e.latlng, { icon: imageIcon }).bindPopup(
            "This is Littleton, CO."
          );
        });
      }

      function markerHandle(e) {
        markerBaseHandle(function () {
          markerId = L.marker(e.latlng).bindPopup("This is Littleton, CO.");
          markerId.on("click", function (e) {
            // alert("I am marker!");
            console.info("I am marker!");
          });
        });
      }

      function markerBaseHandle(callback) {
        map.hasLayer(markerId) && map.removeLayer(markerId);
        callback();
        map.addLayer(markerId);
      }

      function showTip(e, txt) {
        L.popup().setLatLng(e.latlng).setContent(txt).openOn(map);
      }

      function eachLayerConsole() {
        map.eachLayer(function (layer) {
          console.info("eachLayer =>", layer);
        });
      }

      function polygonTool(e) {
        map.hasLayer(polygonToolId) && map.removeLayer(polygonToolId);
        polygonToolArr[polygonToolArr.length] = [e.latlng.lat, e.latlng.lng];
        polygonToolId = L.polygon(polygonToolArr);
        map.addLayer(polygonToolId);
        console.info(
          `var polygon = L.polygon(
              ${JSON.stringify(polygonToolArr)}
              ).bindPopup("提示信息").addTo(map);`
        );
      }

      // 开启 polygonTool 函数后 获得此坐标点
      function polygonPosition1Init() {
        var polygon = L.polygon([
// 坐标点已删除
        ])
          .bindPopup(
            "<div style='width:250px;'><img src='https://www.baidu.com/img/flexible/logo/pc/result.png' />111</div>"
          ) // 弹框可加图片文字
          .addTo(map);
      }
    })(L);
  </script>
</html>

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 https://www.VuejsDev.com 用于梳理知识点

标签：function,map,layer,console,latlng,领图,leaflet,var,不连外
From： https://blog.51cto.com/u_15770151/5940199

leaflet 领图一个本地的类似百度地图工具-不连外网

地图选择器（这个很重要！！）

相关文章

赞助商

阅读排行

leaflet 领图 一个本地的类似百度地图工具-不连外网

地图选择器 （这个很重要！！）

相关文章

赞助商

阅读排行

leaflet 领图一个本地的类似百度地图工具-不连外网

地图选择器（这个很重要！！）