@vuemap/district-cluster v0.0.11

@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初始化参数，参数内容如下：

RenderOptions参数说明

FeatureStyle参数说明

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
  }
}

成员函数

事件列表