BIGEMPA Js API示例中心
行政下鉆源代碼展示

代碼編輯區運行下載還原
                                    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!--瀏覽器兼容-->
    <meta name="renderer" content="webkit" />
    <!--文檔兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--網頁大小適應-->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
  </head>
  <body>
    <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
    <script src="http://www.xawiki.com/Public/common/js/jquery.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .bigemap-popup-content-wrapper,
      .map-legends,
      .map-tooltip {
        border-radius: 8px;
        box-shadow: 5px 5px 5px rgb(0 0 0);
      }

      #container {
        width: 100%;
        background-color: #f2f2f2;
      }
    </style>
    <div id="container">
      <div id="map"></div>
    </div>
    <script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js"></script>
  </body>
</html>
<script>
  BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
  var map = BM.map("map", 'bigemap.dc-satellite', {
    crs: BM.CRS.EPSG4326,
    center: [30, 104],
    zoom: 7,
    zoomControl: true,
    attributionControl: true,
    doubleClickZoom: false,
    trackResize: true,
  });
  var latlngcon = map.getBounds();
  var latlngs = [
    [
      [latlngcon._northEast.lat, latlngcon._northEast.lng],
      [latlngcon._southWest.lat, latlngcon._southWest.lng],
    ],
  ];
  var cone = {};
  var zoom = 4;
  var time;
  //自動加載方法
  window.onload = function () {
    var code = 510000;
    sessionStorage.clear();
    sessionStorage.setItem("latlngs", JSON.stringify(latlngs));
    chons(code);
  };

  map.on("dblclick", function (e) {
    //在雙擊事件中，先清除前面click事件的時間處理
    clearTimeout(time);
    var diqu = sessionStorage.getItem("diqu");
    var diqup = JSON.parse(diqu);

    var latlng = sessionStorage.getItem("latlngs");
    var latlngp = JSON.parse(latlng);

    if (diqup == null || diqup.length == 0) {
      return false;
    } else {
      var result = diqup.pop();
      sessionStorage.setItem("diqu", JSON.stringify(diqup));
      var resultl = latlngp.pop();
      sessionStorage.setItem("latlngs", JSON.stringify(latlngp));
    }
    cone.remove();
    chons(result);
    console.log(latlngp.slice(-1));
    if (latlngp.slice(-1).length != 0) map.fitBounds(latlngp.slice(-1));
  });
  //加載地圖方法
  function chons(code) {
    $.get(
      "http://www.xawiki.com/Public/offline/chad/" + code + ".geojson",
      function (data) {
        data = JSON.parse(data);
        cone = BM.geoJSON(data, {
          style: function () {
            return {
              color: "white",
              fillColor: "#50e3c2",
              weight: 1,
              fillOpacity: 0.9,
            };
          },
          onEachFeature: function (feature, layer) {
            feature.properties &&
              feature.properties.name &&
              layer.bindTooltip(feature.properties.name, {
                direction: "bottom",
                className: "my_tooltip",
                permanent: true,
              });
          },
        })
          .on("mouseover", function (e) {
            e.layer.setStyle({
              color: "50e3c2",
              fillColor: "white",
              weight: 1,
              fillOpacity: 0.9,
            });

            //顯示彈窗信息坐標
            var x = rel.center["1"];
            var y = rel.center["0"];
            var coordinate = [[x, y]];

            //組裝參數
            var adcode = rel.adcode;
            var name = rel.name;
            var level = rel.level;
            var cont =
              "<div>acode ：" +
              adcode +
              "</div>" +
              "<div>name <span style='margin-left: 2px'>：</span>" +
              name +
              "</div>" +
              "<div>level <span style='margin-left: 7px'>：</span>" +
              level +
              "</div>";
            //顯示彈窗
            if (!e.layer.getPopup()) {
              e.layer.bindPopup(cont);
            }
            e.layer.openPopup();
          })
          .on("mouseout", function (e) {
            e.layer.setStyle({
              color: "white",
              fillColor: "#50e3c2",
              weight: 1,
              fillOpacity: 0.9,
            });
          })
          .on("click", function (e) {
            console.log(e);
            var rel = e.layer.feature.properties;
            var zb = e.layer._bounds;
            if (code == rel.adcode) {
              return false;
            } else {
              //定時器
              clearTimeout(time);
              time = setTimeout(function () {
                //重新加載
                chons(rel.adcode);
                cone.remove();
                //臨時緩存
                sessionStorage.setItem("diqu", JSON.stringify(rel.acroutes));
                var latadd = sessionStorage.getItem("latlngs");
                var lataddp = JSON.parse(latadd);
                lataddp.push([
                  [zb._northEast.lat, zb._northEast.lng],
                  [zb._southWest.lat, zb._southWest.lng],
                ]);
                sessionStorage.setItem("latlngs", JSON.stringify(lataddp));
                if (lataddp.slice(-1).length != 0)
                  map.fitBounds(lataddp.slice(-1));
              }, 300);
            }
          })
          .addTo(map);
      }
    );
  }
</script>