canvas-study
/
amap-china.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <style type="text/css">
      html,
      body,
      .map {
        width: 100%;
        background: white !important;
        height: 100%;
        margin: 0px;
      }
    </style>
    <title>简易行政区地图标注</title>
  </head>
  <body>
    <div id="container" class="map" tabindex="0"></div>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=3ed4a354220348fab099bf080f351503&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"
    ></script>
    <script
      type="text/javascript"
      src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"
    ></script>
    <script type="text/javascript">
      var SOC = "CHN";
      var colors = {};
      var GDPSpeed = {
        520000: 10, //贵州
        540000: 10, //西藏
        530000: 8.5, //云南
        500000: 8.5, //重庆
        360000: 8.5, //江西
        340000: 8.0, //安徽
        510000: 7.5, //四川
        350000: 8.5, //福建
        430000: 8.0, //湖南
        420000: 7.5, //湖北
        410000: 7.5, //河南
        330000: 7.0, //浙江
        640000: 7.5, //宁夏
        650000: 7.0, //新疆
        440000: 7.0, //广东
        370000: 7.0, //山东
        450000: 7.3, //广西
        630000: 7.0, //青海
        320000: 7.0, //江苏
        140000: 6.5, //山西
        460000: 7, // 海南
        310000: 6.5, //上海
        110000: 6.5, // 北京
        130000: 6.5, // 河北
        230000: 6, // 黑龙江
        220000: 6, // 吉林
        210000: 6.5, //辽宁
        150000: 6.5, //内蒙古
        120000: 5, // 天津
        620000: 6, // 甘肃
        610000: 8.5, // 甘肃
        710000: 2.64, //台湾
        810000: 3.0, //香港
        820000: 4.7, //澳门
      };
      var getColorByDGP = function (adcode) {
        if (!colors[adcode]) {
          var gdp = GDPSpeed[adcode];
          if (!gdp) {
            colors[adcode] = "rgb(227,227,227)";
          } else {
            var r = 3;
            var g = 140;
            var b = 230;
            var a = gdp / 10;
            colors[adcode] = "rgba(" + r + "," + g + "," + b + "," + a + ")";
          }
        }
        return colors[adcode];
      };
      var disCountry = new AMap.DistrictLayer.Country({
        zIndex: 10,
        SOC: "CHN",
        depth: 1,
        styles: {
          "nation-stroke": "#ff0000",
          "coastline-stroke": "#0088ff",
          "province-stroke": "#888888",
          fill: function (props) {
            return getColorByDGP(props.adcode_pro);
          },
        },
      });

      var map = new AMap.Map("container", {
        zooms: [4, 20],
        expandZoomRange: true,
        center: [106.122082, 33.719192],
        zoom: 4,
        isHotspot: false,
        defaultCursor: "pointer",
        layers: [disCountry],
        viewMode: "2D",
        resizeEnable: true,
      });
      map.addControl(new AMap.Scale());
      map.addControl(new AMap.ToolBar({ liteStyle: true }));
      map.on("complete", function () {
        var layer = new AMap.LabelsLayer({
          // 开启标注避让，默认为开启，v1.4.15 新增属性
          collision: false,
          // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
          animation: true,
        });
        for (var i = 0; i < LabelsData.length; i++) {
          var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
          layer.add(labelsMarker);
        }
        map.add(layer);
        document.getElementsByClassName("amap-mcode")[0].innerHTML =
          "-GS(2019)756号";
      });
    </script>
  </body>
</html>