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://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
  <script src="http://www.bigemap.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://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
</body>

</html>
<script>
  BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
  var map = BM.map('map', 'bigemap.zhongkexingtu', {
    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.bigemap.com/public/offline/district/偏移广东.geojson', function (data) {
  

    //样式文档 可以参考 http://www.bigemap.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.bigemap.com/public/offline/district/普通广东.geojson', function (data) {
    

    //样式文档 可以参考 http://www.bigemap.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>