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 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 rel='external nofollow' >OpenStreetMap</a> contributors, &copy; <a 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地圖及聚合效果的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。