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://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;
    }
  </style>
  <div id="container">
    <div id='map'></div>
  </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: [30, 104],
    zoom: 7,
    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) {
    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) {
          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())
      })
    })

  }
</script>