中国地图-省市下钻

地图

中国地图-省市下钻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>中国地图-省市下钻</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.1&key=0d78256ea89beeb8c25d1cd047549d1f"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script>
  $('#mountNode').html('<div style="position: relative;">' + '<div id="china" style="width: 50%;height:400px;position: absolute;left: 0;top: 0;"></div>' + '<div id="province" style="width: 50%;height:400px;position: absolute;right: 0;top: 0;"></div>' + '</div>');

// 调用高德 api 绘制底图以及获取 geo 数据
  var map = new AMap.Map('china', {
    zoom: 4
  });
  var colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"];
  // 当前聚焦的区域
  var currentAreaNode = void 0;

AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer) {
    // 创建一个实例
    var districtExplorer = window.districtExplorer = new DistrictExplorer({
      eventSupport: true, //打开事件支持
      map: map
    });

// feature被点击
    districtExplorer.on('featureClick', function(e, feature) {
      var props = feature.properties;
      //如果存在子节点
      if (props.childrenNum > 0) {
        //切换聚焦区域
        switch2AreaNode(props.adcode);
      }
    });

//外部区域被点击
    districtExplorer.on('outsideClick', function(e) {
      districtExplorer.locatePosition(e.originalEvent.lnglat, function(error, routeFeatures) {
        if (routeFeatures && routeFeatures.length > 1) {
          //切换到省级区域
          switch2AreaNode(routeFeatures[1].properties.adcode);
        } else {
          //切换到全国
          switch2AreaNode(100000);
        }
      }, {
        evelLimit: 2
      });
    });
    //绘制某个区域的边界
    function renderAreaPolygons(areaNode) {
      var node = _.cloneDeep(areaNode);
      districtExplorer.clearFeaturePolygons();
      districtExplorer.renderSubFeatures(node, function(feature, i) {
        var fillColor = colors[i % colors.length];
        var strokeColor = colors[colors.length - 1 - i % colors.length];

return {
          cursor: 'default',
          bubble: true,
          strokeColor: strokeColor, //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线宽
          fillColor: fillColor, //填充色
          fillOpacity: 0.35 //填充透明度
        };
      });

//绘制父区域
      districtExplorer.renderParentFeature(node, {
        cursor: 'default',
        bubble: true,
        strokeColor: 'black', //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线宽
        fillColor: null, //填充色
        fillOpacity: 0.35 //填充透明度
      });
    }

//切换区域后刷新显示内容
    function refreshAreaNode(areaNode) {
      districtExplorer.setHoverFeature(null);
      renderAreaPolygons(areaNode);
    }

//切换区域
    function switch2AreaNode(adcode, callback) {
      if (currentAreaNode && '' + currentAreaNode.getAdcode() === '' + adcode) {
        return;
      }

loadAreaNode(adcode, function(error, areaNode) {
        if (error) {
          if (callback) {
            callback(error);
          }
          return;
        }
        currentAreaNode = window.currentAreaNode = areaNode;
        refreshAreaNode(areaNode);
        if (callback) {
          callback(null, areaNode);
        }
      });
    }

//加载区域
    function loadAreaNode(adcode, callback) {
      districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
        if (error) {
          if (callback) {
            callback(error);
          }
          return;
        }
        renderG2Map(areaNode); // 使用 G2 绘制地图

if (callback) {
          callback(null, areaNode);
        }
      });
    }

// 浙江
    switch2AreaNode(330000);
  });

// 开始使用 G2 绘制地图
  var provinceChart = void 0;

function renderG2Map(areaNode) {
    var adcode = areaNode.getAdcode();
    var geoJSON = areaNode.getSubFeatures(); // 获取 geoJSON 数据
    var name = areaNode.getName();

provinceChart && provinceChart.destroy();
    provinceChart = null;
    if (!geoJSON || currentAreaNode && '' + currentAreaNode.getAdcode() === '' + adcode) {
      return;
    }
    var dv = processData(geoJSON);
    // start: 计算地图的最佳宽高
    var longitudeRange = dv.range('longitude');
    var lantitudeRange = dv.range('latitude');
    var ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);
    var width = void 0;
    var height = void 0;
    if (ratio > 1) {
      width = $('#province').width();
      height = width / ratio;
    } else {
      width = 300 * ratio;
      height = $('#province').height();
    }
    // end: 计算地图的最佳宽高
    provinceChart = new G2.Chart({
      container: 'province',
      width: width,
      height: height,
      padding: 0
    });
    provinceChart.source(dv);
    provinceChart.axis(false);
    provinceChart.tooltip({
      showTitle: false
    });
    provinceChart.polygon().position('longitude*latitude').label('name', {
      textStyle: {
        fill: '#fff',
        fontSize: 10,
        shadowBlur: 2,
        shadowColor: 'rgba(0, 0, 0, .45)'
      }
    }).style({
      stroke: '#fff',
      lineWidth: 1
    }).color('value', '#BAE7FF-#1890FF-#0050B3');
    provinceChart.guide().text({
      position: ['min', 'max'],
      offsetY: 20,
      content: name,
      style: {
        fontSize: 14,
        fontWeight: 'bold'
      }
    });
    provinceChart.render();
  }

// 用户数据
    var dvData = ds.createView().source(userData);
    dvData.transform({
      type: 'geo.region',
      field: 'name',
      geoDataView: geoDataView,
      as: ['longitude', 'latitude']
    });

return dvData;
  }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>中国地图-省市下钻</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.1&key=0d78256ea89beeb8c25d1cd047549d1f"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  $('#mountNode').html('<div style="position: relative;">' + '<div id="china" style="width: 50%;height:400px;position: absolute;left: 0;top: 0;"></div>' + '<div id="province" style="width: 50%;height:400px;position: absolute;right: 0;top: 0;"></div>' + '</div>');

//切换区域后刷新显示内容
    function refreshAreaNode(areaNode) {
      districtExplorer.setHoverFeature(null);
      renderAreaPolygons(areaNode);
    }

//切换区域
    function switch2AreaNode(adcode, callback) {
      if (currentAreaNode && '' + currentAreaNode.getAdcode() === '' + adcode) {
        return;
      }

if (callback) {
          callback(null, areaNode);
        }
      });
    }

// 浙江
    switch2AreaNode(330000);
  });

// 开始使用 G2 绘制地图
  var provinceChart = void 0;

function renderG2Map(areaNode) {
    var adcode = areaNode.getAdcode();
    var geoJSON = areaNode.getSubFeatures(); // 获取 geoJSON 数据
    var name = areaNode.getName();

return dvData;
  }
</script>
</body>
</html>

图表简介

中国地图-省市下钻

了解更多

图表用法

可视化的方法显示地理区域上的数据。使用地图作为背景，通过图形的位置来表现数据的地理位置，通常来展示数据在不同地理区域上的分布情况。

关联图表

地图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接