使用vue引入maptalks地图及聚合效果的实现

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/" rel="external nofollow" 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'
   })
  }
 }
}
 
 
 

补充知识：vue集成maptalk实现geojson3d渲染

我就废话不多说了，大家还是直接看代码吧~

  //实例化地图对象
  let map = new maptalks.map("map",{
   center: [13.416935229170008, 52.529564137540376],
   zoom: 20,
   dragpitch : true,
   //allow map to drag rotating, true by default
   dragrotate : true,
   //enable map to drag pitching and rotating at the same time, false by default
   dragrotatepitch : true,
   baselayer: new maptalks.tilelayer('base', {
    urltemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    subdomains: ['a','b','c','d'],
    attribution: '&copy; <a href="http://osm.org" rel="external nofollow" >openstreetmap</a> contributors, &copy; <a href="https://carto.com/" rel="external nofollow" >carto</a>'
   })
  });

// features to draw
//将buildings中的数据，添加到features中
  let features = [];

  buildings.foreach(function (b) {
   console.log(b.features);
   features = features.concat(b.features);
  });

// the threelayer to draw buildings
  let threelayer = new threelayer('t', {
   forcerenderonmoving : true,
   forcerenderonrotating : true
  });


  threelayer.preparetodraw = function (gl, scene, camera) {

   let me = this;
   let light = new three.directionallight(0xffffff);
   light.position.set(0, -10, 10).normalize();
   scene.add(light);

   features.foreach(function (g) {
    let heightperlevel = 5;
    let levels = g.properties.levels || 1;
    let color = 0x2685a7

    let m = new three.meshphongmaterial({color: color, opacity : 0.7});
    //change to back side with three <= v0.94
    // m.side = three.backside;

    let mesh = me.toextrudemesh(maptalks.geojson.togeometry(g), heightperlevel, m, heightperlevel);
    if (array.isarray(mesh)) {
     scene.add.apply(scene, mesh);
    } else {
     scene.add(mesh);
    }
   });
  };

  threelayer.addto(map);

以上这篇使用vue引入maptalks地图及聚合效果的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。