地图数据可视化-简易行政区图

简介

作为一个比较典型的需求场景 经过调研发现目前大多数实现方法都是使用百度地图+echarts来进行实现

由于笔者所在项目的原因只能使用高德地图且echarts对高德地图的支持度并不友好

故经过一番摸索折腾 在不使用echarts的情况下实现了简易行政区的绘制

由于直接在地图上进行绘制 所以可以更加方便得调用高德api和获取地理位置数据

效果预览

城市绘制（杭州市）

准备工作

本例主要使用React+React-Amap(基于React封装的高德地图组件)来实现,react-amap帮我们封装好了一些marker和覆盖物组件,使用起来相当方便,当然你也可以阅读学习后根据你当前的技术栈来进行改造

首先安装react-amap

yarn add react-amap

//or

npm install react-amap

1.自定义地图

首先到高德开发者平台自定义地图

将地图上所有元素 覆盖物 曲线等全部设置为不显示

并且将地图背景色设置为透明

然后生成模板的key引入地图组件中

 <Map
    ...
    mapStyle="amap://styles/你的地图模板key"
    >
</Map>

这一步是为了既不使用地图原生样式又可以获取诸多地图属性和数据

2.引入图层插件

export const amapkey ='你的高德地图密钥&plugin=AMap.DistrictLayer,AMap.ImageLayer'

3.绘制地图图层

const [layer,setLayer] = useState()//图层数据

const [rangeType,setRangeType] = useState()//行政区层级类型

const mapRender = useCallback(async () => {
      if (layer) {
        mapInst.current.remove(layer);
      }
      let layerRender = '';
      if (rangeType == 'COUNTRY') {
        const cityName = projectDetail?.location?.city + '市';
        layerRender = new window.AMap.DistrictLayer.Country({
          zIndex: 10,
          SOC: 'CHN',
          depth: 1,
          styles: {
            'stroke-width': 5,
            'nation-stroke': 'rgba(82, 128, 255, 1)',
            'coastline-stroke': 'rgba(82, 128, 255, 1)',
            'country-stroke': 'rgba(82, 128, 255, 1)',
            'province-stroke': 'rgba(82, 128, 255, 1)',
            'city-stroke': 'rgba(82, 128, 255, 1))',
            fill: function(props) {
              return cityName == props?.NAME_CHN
                ? '#4ca5e5'
                : 'rgba(12, 12, 62,0.7)';
            },
          },
        });
      }
      if (rangeType == 'CITY') {
        ...
        layerRender = new window.AMap.DistrictLayer.Province({...,depth:2})
      }
      setLayer(layerRender);
      layerRender && mapInst.current.setLayers([layerRender]);
    
  }, [ rangeType, layer]);

如果绘制全国地图 则只需调用DistrictLayer的Country对象来绘制SOC属性为CHN的图层即可

如果绘制省市区等行政区 则需调用DistrictLayer的Province对象

还需要传入对应的adcode 并且设置对应的depth [参考]

4.省市区高亮设置

DistrictLayer对象部分属性支持以动态回调函数的形式传入 props值为当前行政区信息

可以根据props判断来实现省市区高亮

new window.AMap.DistrictLayer.Country({
          SOC: 'CHN',
          depth: 1,
          styles: {
            ...
            fill: function(props) {
              return cityName == props?.NAME_CHN
                ? '#4ca5e5'
                : 'rgba(12, 12, 62,0.7)';
            },
          },
        });