实现vue引入maptalks地图及聚合效果的方法-创新互联

这篇文章给大家分享的是有关实现vue引入maptalks地图及聚合效果的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联建站长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为尤溪企业提供专业的成都做网站、成都网站建设，尤溪网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

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: '© Maptalk for Amap 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': '
' + e.target.properties.name + '
',
    'width' : 150,
    'dy' : 5,
    'autoPan': true,
    'custom': false,
    'autoOpenOn' : 'click', //set to null if not to open when clicking on marker
    'autoCloseOn' : 'click'
   })
  }
 }
} 
 
 

当前标题：实现vue引入maptalks地图及聚合效果的方法-创新互联
URL标题：http://jkwzsj.com/article/cedsod.html