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集成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地圖及聚合效果的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持萬仟網。

如您對本文有疑問或者有任何想說的，請點擊進行留言回復，萬千網友為您解惑！

總結

以上是生活随笔為你收集整理的vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。