@vuemap/district-cluster

示例

codepen示例

简介

本项目为高德地图的区划聚合图层，图层基于AMapUI的区划插件实现，原插件地址

加载方式

当前项目支持CDN加载和npm加载两种方式。

CDN加载

CDN加载需要先加载高德地图JS，代码如下

<!--加载高德地图JS 2.0 -->
<script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
<!--加载district-cluster插件 -->
<script src="https://cdn.jsdelivr.net/npm/@vuemap/district-cluster/dist/index.js"></script>

npm加载

npm加载可以直接使用安装库

npm install '@vuemap/district-cluster'

使用示例

CDN方式

<script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
<script src="https://cdn.jsdelivr.net/npm/@vuemap/district-cluster/dist/index.js"></script>
<script type="text/javascript">
    const map = new AMap.Map('app', {
      center: [120,31],
      zoom: 14,
      viewMode: '3D',
      pitch: 35
    })
    const layer = new AMap.DistrictCluster({
      map,
      // topAdcodes: [130000, 110000],
      getPosition: function(item) {
        if (!item) {
          return null;
        }
        const parts = item.split(',');
        //返回经纬度
        return [parseFloat(parts[0]), parseFloat(parts[1])];
      },
      renderOptions: {
        zooms: [2,16],
        renderClusterMarker(feature, dataItems){
          return new AMap.Marker({
            position: feature.properties.center,
            anchor: 'center',
            content: `<div style="word-break: keep-all;color: #fff;">${feature.properties.name} - ${dataItems.length}</div>`
          })
        },
        renderPolygon(feature, dataItems){
          return new AMap.Polygon({
            path: feature.geometry.coordinates,
            strokeColor: 'red',
          })
        }
      }
    })
    layer.on('featureClick', (e, feature) => {
      console.log('featureClick: ', e, feature)
    })
    layer.on('featureMouseover', (e, feature) => {
      console.log('featureMouseover: ', e, feature)
    })
    layer.on('featureMouseout', (e, feature) => {
      console.log('featureMouseout: ', e, feature)
    })
    layer.on('clusterMarkerClick', (e, feature) => {
      console.log('clusterMarkerClick: ', e, feature)
    })
    fetch('https://a.amap.com/amap-ui/static/data/10w.txt').then(res => {
      return res.text()
    }).then(csv => {
      const data = csv.split('\n');
      layer.setData(data);
    })
  
</script>

npm方式

const map = new AMap.Map('app', {
  center: [120,31],
  zoom: 14,
  viewMode: '3D',
  pitch: 35
})
const layer = new AMap.DistrictCluster({
  map,
  // topAdcodes: [130000, 110000],
  getPosition: function(item) {
    if (!item) {
      return null;
    }
    const parts = item.split(',');
    //返回经纬度
    return [parseFloat(parts[0]), parseFloat(parts[1])];
  },
  renderOptions: {
    zooms: [2,16],
    renderClusterMarker(feature, dataItems){
      return new AMap.Marker({
        position: feature.properties.center,
        anchor: 'center',
        content: `<div style="word-break: keep-all;color: #fff;">${feature.properties.name} - ${dataItems.length}</div>`
      })
    },
    renderPolygon(feature, dataItems){
      return new AMap.Polygon({
        path: feature.geometry.coordinates,
        strokeColor: 'red',
      })
    }
  }
})
layer.on('featureClick', (e, feature) => {
  console.log('featureClick: ', e, feature)
})
layer.on('featureMouseover', (e, feature) => {
  console.log('featureMouseover: ', e, feature)
})
layer.on('featureMouseout', (e, feature) => {
  console.log('featureMouseout: ', e, feature)
})
layer.on('clusterMarkerClick', (e, feature) => {
  console.log('clusterMarkerClick: ', e, feature)
})
fetch('https://a.amap.com/amap-ui/static/data/10w.txt').then(res => {
  return res.text()
}).then(csv => {
  const data = csv.split('\n');
  layer.setData(data);
})

API文档说明

DistrictCluster图层说明

基于AMapUI的DistrictCluster进行改造适配JS2.0的区划聚合插件，支持2D 3D展示，区划面与聚合点支持自定义 new AMap.DistrictCluster(options: DistrictClusterOptions)

参数说明

options: DistrictCluster初始化参数，参数内容如下：

| 属性名 | 属性类型 | 属性描述 | |-----------------|-------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | map | AMap.Map | 地图实例 | | zIndex | Number | 图层的层级，默认为 10 | | visible | Boolean | 图层是否可见，默认为 true | | data | any[] | 数据源数组，每个元素即为点相关的信息 | | getPosition | (dataItem: any, dataIndex: number) => AMap.LngLatLike | 返回数据项中的经纬度信息 | | autoSetFitView | Boolean | 是否在绘制后自动调整地图视野以适合全部点，默认true | | topAdcodes | number[] | 顶层区划的adcode列表。（TXT，JSON）默认为[100000]，即全国范围.假如仅需要展示河北和北京，可以设置为[130000, 110000], | | excludedAdcodes | number[] | 需要排除的区划的adcode列表 | | renderOptions | RenderOptions | 绘制的引擎的参数，参数列表见下面 |

RenderOptions参数说明

| 属性名 | 属性类型 | 属性描述 | |--------------------------------------|--------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| | minHeightToShowSubFeatures | Number | 父级区划的最小显示高度，默认630 | | minSiblingAvgHeightToShowSubFeatures | Number | 父级区划的同级兄弟区划的最小平均显示高度，默认600 | | minSubAvgHeightToShowSubFeatures | Number | 子级区划的最小平均显示高度，默认300, 当上面3个条件同时满足时，切换到子级显示 | | featureStyleByLevel | FeatureStyleByLevelOption | 按区划级别（如下4类）定义的区划面样式 {country: FeatureStyle, province: FeatureStyle, city: FeatureStyle, district: FeatureStyle} , 默认值 | | minHeightToShowSubFeatures | Number | 父级区划的最小显示高度，默认630 | | areaNodeCacheLimit | Number | AreaNode缓存的数量，默认-1，即不限制 | | getFeatureStyle | (feature: any, dataItems: any[]) => StyleOption | 直接指定某个区划的样式，优先级最高 | | zooms | [Number, Number] | 绘制的层级范围，默认 [2, 30] | | renderPolygon | (feature: any, dataItems: any[]) => AMap.Polygon | 自定义绘制多边形 | | renderClusterMarker | (feature: any, dataItems: any[]) => AMap.Marker | 自定义绘制聚合标号 | | clusterMarkerEventSupport | Boolean | 聚合标注是否开启事件支持，默认true。 | | clusterMarkerClickToShowSub | Boolean | 点击聚合标注是否触发展示子级区划（即调用 zoomToShowSubFeatures 方法），默认true | | featureEventSupport | Boolean | 区划面是否开启事件支持，默认true | | featureClickToShowSub | Boolean | 点击区划面是否触发进入子级区划，默认false |

FeatureStyle参数说明

| 属性名 | 属性类型 | 属性描述 | | ---- |--------|-----------------------------------| | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。 | | strokeOpacity | Number | 轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明 | | strokeWeight | Number | 轮廓线宽度 | | fillColor | String | 多边形填充颜色，使用16进制颜色代码赋值 | | fillOpacity | Number | 多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明 |

featureStyleByLevel默认值

{
  country: {
    strokeColor: 'rgb(31, 119, 180)',
    strokeOpacity: 0.9,
    strokeWeight: 2,
    fillColor: 'rgb(49, 163, 84)',
    fillOpacity: 0.8
  },
  province: {
    strokeColor: 'rgb(31, 119, 180)',
    strokeOpacity: 0.9,
    strokeWeight: 2,
    fillColor: 'rgb(116, 196, 118)',
    fillOpacity: 0.7
  },
  city: {
    strokeColor: 'rgb(31, 119, 180)',
    strokeOpacity: 0.9,
    strokeWeight: 2,
    fillColor: 'rgb(161, 217, 155)',
    fillOpacity: 0.6
  },
  district: {
    strokeColor: 'rgb(31, 119, 180)',
    strokeOpacity: 0.9,
    strokeWeight: 2,
    fillColor: 'rgb(199, 233, 192)',
    fillOpacity: 0.5
  }
}

成员函数

| 函数名 | 入参 | 返回值 | 描述 | |-----------------------|------------------------------------|---------|--------------------------------------------------------------------| | setData | Array | 无 | 设定数据源数组，并触发重新绘制 | | renderLater | number | 无 | 延时设定的毫秒（默认100）后绘制；该时间段内重复调用只会触发一次。该函数适合短时间内多次触发绘制的场景 | | render | 无 | 无 | 立即重新绘制。因绘制操作较”重“，推荐优先考虑 renderLater 方法。 | | on | eventName:String, handler:Function | 无 | 监听 eventName 事件 | | off | eventName:String, handler:Function | 无 | 注销 eventName 事件 | | show | 无 | 无 | 显示图层 | | hide | 无 | 无 | 隐藏图层 | | isHidden | 无 | Boolean | 返回是否处于隐藏状态 | | zoomToShowSubFeatures | adcode:number,[ center.LngLat ] | 无 | 缩放地图至某一级别，此时adcode对应的区划刚好展开显示自身的子级；同时移动地图中心到center（默认为区划行政中心）所指位置。 |、 | destroy | 无 | 无 | 销毁图层 | | forceRender | 无 | 无 | 强制刷新图层，非特殊情况请勿使用 |

事件列表

| 事件名 | 参数 | 描述 | |--------------------|-----------------------------------------------------------------|---------------------| | featureClick | event, feature | 鼠标点击feature对应的区域时触发 | | featureMouseover | event, feature | 鼠标移入feature对应的区域时触发 | | featureMouseout | event, feature | 鼠标移出feature对应的区域时触发 | | clusterMarkerClick | event, record: { adcode:number,feature:Feature,dataItems:Array} | 鼠标点击聚合标注时触发 |