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': '

',

'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: '© openstreetmap contributors, © carto'

})

});

// 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地图及聚合效果的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！