vue 引入json地图_使用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%)',

// attr