antv l7地域钻取地图封装

钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）

地图内置了省、市、区县数据，我们关注点在ProvinceData、CityData、CountyData的数据，这些数据为后端返回数据可以使用joinField将其关联起来。

设置 fill 颜色填充就可以完成 地域钻取填充图。

当然还有需求要自定义点击事件，但是文档上并没有提供。

首先开启自定义

customTrigger: true

然后直接拿 fillLayer

mapRef.current?.provinceLayer.getLayer('fill')

类型是 PolygonLayer 然后就可以添加点击事件、设置状态等

初始化

const sceneRef = useRef<any>() // 地图容器ref
const mapRef = useRef<any>()   // 地图ref

useEffect(() => {
  sceneRef.current = new Scene({
    id: 'map',
    logoVisible:false,
    map: new Mapbox({
      center: [0, 0],
      pitch: 0,
      style: 'blank',
      minZoom: 2,
      maxZoom: 10
    })
  })

  sceneRef.current.on('loaded', () => {
    mapRef.current = new DrillDownLayer(sceneRef.current, {
      customTrigger:customTrigger,
      ProvinceData:provinceData,
      CityData:cityData,
      CountyData:[],
      joinBy: ['NAME_CHN', joinField],
      viewStart: viewStart,
      viewEnd: viewEnd,
      fill: {
        color: {
          field: fillField,
          values: colors
        }
      },
      popup: {
        enable: true,
        Html: generatePopup
      }
    })
  })

  return () => {
    mapRef.current?.destroy()
    sceneRef.current?.destroy()
  }
}, [])

更新数据

useEffect(() => {
  if(mapRef.current && mapRef.current.updateData){
    // updateData 方法 是根据传入type (Province | Country | City) 获取每一层 layer 更新的
    // 但是每一层对应的 layer 渲染可能存在延迟 故加上setTimeout
    setTimeout(() => {
      // 重置地图层级
      if(mapRef.current.drillState !== 'Country'){
        mapRef.current.drillUp('Country')
      }
      if(cityData && cityData.length > 0){
        mapRef.current.updateData('Province',cityData)
      }
      if(provinceData && provinceData.length > 0){
        mapRef.current.updateData('Country',provinceData)
      }
    }, 100)
  }
},[mapRef,provinceData,cityData])

地图添加点击事件

useEffect(() => {
  let fillLayer:any = null
  if(onProvinceClick){
    setTimeout(() => {
      fillLayer = mapRef.current?.provinceLayer.getLayer('fill')
      fillLayer && fillLayer.on('click', (v:any) => {
          // 地图位置调整
          sceneRef.current.setZoomAndCenter(4,v.lngLat)
          // 设置选择颜色
          fillLayer.select({color:'red'})
          // 设置为选中
          fillLayer.setActive(v.featureId)
          // 获取选中的数据
          let find = provinceData.find((v1:any,i:number) => {
            v1.index = i
            return v1.name == v.feature.properties.NAME_CHN
          })
          onProvinceClick(find)
      })
    }, 1000);
  }
  return () => {
    fillLayer && fillLayer.removeAllListeners('click')
  }
}, [mapRef,sceneRef,provinceData])