使用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: '© <a href="http://osm.org" rel="external nofollow" >OpenStreetMap</a> contributors, © <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地图及聚合效果的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。
