1、安裝maptalks.js

npm install maptalks --save

2、安裝聚合mapkercluster

npm install maptalks.markercluster

3、vue頁面引入

import * as maptalks from 'maptalks'
import {ClusterLayer} from 'maptalks.markercluster'

4、初始化地圖並新增聚合

mounted() {
  let that = this
  //--0--//地圖物件的初始化
  this.map = new maptalks.Map('map', {
    center: [109.1748453547,21.4586700546],
    //中心點標記紅十字，用於開發debug
    centerCross : false,
    zoom: 13,
    minZoom : 10,
    maxZoom : 18,
    //縮放級別控制元件
    zoomControl : false, // add zoom control
    scaleControl : true, // add scale control
    //鷹眼控制元件
    overviewControl : true, // add overview control
    //設定瓦片圖層的空間參考spatialReference預設就是3857，googlemap的解析度
    spatialReference : {
      projection : 'EPSG:3857'
      //與map一樣，支援更詳細的設定resolutions，fullExtent等
    },
    baseLayer: new maptalks.TileLayer('base', {
      //  urlTemplate: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      //renderer : 'canvas', // set TileLayer's renderer to canvas
      //底圖伺服器地址，如下為瓦片地址
      urlTemplate: 'http://xxx.xx.xxx.xxx:xxxx/mapdata/tiles/{z}/{x}/{y}.png',
      //tileSystem 控制瓦片的x,y以及行列，後兩個是origin原點位置（很重要）
      tileSystem : [1, 1, -20037508.3427890,-20037508.3427890], // tile system
      //subdomains: ['a','b','c'],
      minZoom : 10,
      maxZoom : 18
      // css filter 濾鏡配置
      // cssFilter : 'sepia(60%) invert(95%)',
      // attribution: '© <a href="http://maptalks.org/" target="_blank">Maptalk for Amap</a> contributors'
    }),
    layers : [
      new maptalks.VectorLayer('v')
    ],
    attribution: {//左下角info
      content: '©qmap'
    }
  })

  // 拖動範圍限制，黑框控
  let extent = new maptalks.Extent(108.8584570000,20.9790840000,110.0569128018,22.1177123207)
  // var extent = new maptalks.Extent(112.5381688894,26.8876543885,112.5605009244,26.9012691519);
  // set map's max extent to map's extent at zoom 14
  this.map.setMaxExtent(extent)
  this.map.setZoom(this.map.getZoom(), { animation : false })
  this.map.getLayer('v')
    .addGeometry(
      new maptalks.Polygon(extent.toArray(), {
        symbol : { 'polygonOpacity': 0, 'lineWidth': 0 }
      })
    )

// 往地圖上新增點位

this.markInfo()
},

methods: {
  setCenter: function(center) {
    //標註點平移到某個點
    let centerV = maptalks1.CRSTransform.transform(center, 'bd09ll', 'gcj02')
    this.map.animateTo({
      zoom: 17,
      center: centerV
    }, {
      duration: 1000
    })
  },
  // 上圖
  markInfo: function () {
    let that = this
    that.map.removeLayer(that.clusterLayer)
    let markers = []
    //--2--//前端聚合查詢
    // data from realworld.50000.1.js
    //需要引入maptalks.markercluster.js
    //資料格式[lon,lat,name]
    // 如：[[21.8129763667, 109.2714296333, "曉港名城4號樓"],[21.8131727667, 109.2710308833, "曉港名城6號樓"]]
    for (let i = 0; i < that.addressPoints.length; i++) {
      let a = that.addressPoints[i]
      markers.push(new maptalks.Marker(maptalks1.CRSTransform.transform([a.latitude, a.longitude], 'bd09ll', 'gcj02'),
        {
          'properties': {
            'name': a.name,
            'onSale': a.onSale
          },
          symbol : [
            {
              'markerFile'   : a.onSale ? require('../../../static/img/on.png') : require('../../../static/img/off.png'),//標註點圖示
              'markerWidth'  : 30,
              'markerHeight' : 35
            },{
              'textName' : '{name}',
              'textSize' : 12,
              'textDy'   : -50,
              'textHaloRadius' : 5,
              'textHaloFill' : a.onSale ? '#FFB427' : '#B9B9B9',
              'textFill' : '#fff' // color
            }
          ]
        }
      ))//.on('mousedown', onClick))
    }
    let clusterLayer = new ClusterLayer('cluster', markers, {
      'noClusterWithOneMarker' : true,
      'noClusterWithHowMany': 8,//聚合的最小個數
      'maxClusterZoom' : 15,
      //"count" is an internal variable: marker count in the cluster.
      'symbol': {
        'markerType' : 'ellipse',
        'markerFill' : { property:'count', type:'interval', stops: [[0, 'rgb(135, 196, 240)'], [9, '#1bbc9b'],[50, 'rgb(116, 115, 149)'],
            [99, 'rgb(216, 115, 149)']]},
        'markerFillOpacity' : 0.7,
        'markerLineOpacity' : 1,
        'markerLineWidth' : 3,
        'markerLineColor' : '#fff',
        'markerWidth' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [50, 70],[99, 80]] },
        'markerHeight' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [50, 70],[99, 80]] }
      },
      'drawClusterText': true,
      'geometryEvents' : true,
      'single': true
    })
    that.map.addLayer(clusterLayer)
    that.clusterLayer = clusterLayer

    function onClick(e) {
      e.target.setInfoWindow({
        'content': '<div class="content-' + e.target.properties.onSale + '">' + e.target.properties.name + '</div>',
        'width'  : 150,
        'dy' : 5,
        'autoPan': true,
        'custom': false,
        'autoOpenOn' : 'click',  //set to null if not to open when clicking on marker
        'autoCloseOn' : 'click'
      })
    }
  }
}