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="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
  <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;
    }
    .tool{
            position: absolute;
            z-index: 10;
            right: 10px;
            top:40px;
        }
  </style>
  <div id="container">
    <div id='map'></div>
    <p class="tool">
        <button id="satellite" onclick="showF()" class="button button-tiny button-rounded button-primary" href="javascript:void (0);">邊界顯示</button>
        <button id="street" onclick="hideF()" class="button button-tiny button-rounded button-primary" href="javascript:void (0);">邊界隱藏</button>
    </p>
  </div>
  <svg>
    <defs>
      <filter id="f1" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
        <feColorMatrix result="matrixOut" in="offOut" type="matrix"
          values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
        <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
  </svg>
  <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: [ 22.309190530853357,113.63727145828308],
    zoom: 10,
    zoomControl: true,
    attributionControl: true,
    doubleClickZoom: false,
    trackResize: true,
  });
  var cone;
  var offset;
  //自動加載方法
  window.onload = function () {
    chons();
  }
  //加載地圖方法
  function chons() {
    //加載偏移邊界（需要主動處理文件數據 向右下角偏移） 先添加在底層
  $.get('http://www.xawiki.com/public/offline/district/偏移廣東.geojson', function (data) {
  

    //樣式文檔 可以參考 http://www.xawiki.com/offlinemaps/api/#path

   data=JSON.parse(data)
      offset = BM.geoJSON(data, {
        style: function () {
          return {
            color: 'white',  //邊框顏色
            fillColor: 'black',  //填充色
            weight: 1, //邊框寬度
            // fillOpacity: 0,//填充透明度
          };
        },
      }).addTo(map)

    //加載正常經緯度邊界 后添加在高層
      
      $.get('http://www.xawiki.com/public/offline/district/普通廣東.geojson', function (data) {
    

    //樣式文檔 可以參考 http://www.xawiki.com/offlinemaps/api/#path

       data=JSON.parse(data)
        cone = BM.geoJSON(data, {
          style: function () {
            return {
              color: 'white',//邊框顏色
              fillColor: '#50e3c2',//填充色
              weight: 1,//邊框寬度
              fillOpacity: 0.9, //填充透明度
            };
          },
        }).on('mouseover', function (e) {
          var rel;
          try {
            rel = e.layer.feature.properties;
          } catch (error) {
            rel = Object.values(e.layer._eventParents)[0].feature.properties;
          }
          e.layer.setStyle({
            color: '50e3c2',
            fillColor: 'white',
            weight: 1,
            fillOpacity: 0.9,
            className: 'find'
          });
          //組裝參數
          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
          });
          // e.layer.closePopup()
        }).on('click', function (e) {
          console.log(e, '點擊');
        }).addTo(map)
        //讓地圖自適應邊界
        // map.fitBounds(cone.getBounds())
      })
    })
  }

  function showF() {
    //先疊加陰影圖層 后疊加正常圖層
    offset.addTo(map)
    cone.addTo(map)
   
  }

  function hideF() {
    cone.remove()
    offset.remove()
  }
</script>