使用vue引入maptalks地图及聚合效果的实现
1、安装maptalks.js
npminstallmaptalks--save
2、安装聚合mapkercluster
npminstallmaptalks.markercluster
3、vue页面引入
import*asmaptalksfrom'maptalks'
import{ClusterLayer}from'maptalks.markercluster'
4、初始化地图并添加聚合
mounted(){
letthat=this
//--0--//地图对象的初始化
this.map=newmaptalks.Map('map',{
center:[109.1748453547,21.4586700546],
//中心点标记红十字，用于开发debug
centerCross:false,
zoom:13,
minZoom:10,
maxZoom:18,
//缩放级别控件
zoomControl:false,//addzoomcontrol
scaleControl:true,//addscalecontrol
//鹰眼控件
overviewControl:true,//addoverviewcontrol
//设置瓦片图层的空间参考spatialReference默认就是3857，googlemap的分辨率
spatialReference:{
projection:'EPSG:3857'
//与map一样，支持更详细的设置resolutions，fullExtent等
},
baseLayer:newmaptalks.TileLayer('base',{
//urlTemplate:'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
//renderer:'canvas',//setTileLayer'srenderertocanvas
//底图服务器地址，如下为瓦片地址
urlTemplate:'http://xxx.xx.xxx.xxx:xxxx/mapdata/tiles/{z}/{x}/{y}.png',
//tileSystem控制瓦片的x,y以及行列，后两个是origin原点位置（很重要）
tileSystem:[1,1,-20037508.3427890,-20037508.3427890],//tilesystem
//subdomains:['a','b','c'],
minZoom:10,
maxZoom:18
//cssfilter滤镜配置
//cssFilter:'sepia(60%)invert(95%)',
//attribution:'©MaptalkforAmapcontributors'
}),
layers:[
newmaptalks.VectorLayer('v')
],
attribution:{//左下角info
content:'©qmap'
}
})
//拖动范围限制，黑框控
letextent=newmaptalks.Extent(108.8584570000,20.9790840000,110.0569128018,22.1177123207)
//varextent=newmaptalks.Extent(112.5381688894,26.8876543885,112.5605009244,26.9012691519);
//setmap'smaxextenttomap'sextentatzoom14
this.map.setMaxExtent(extent)
this.map.setZoom(this.map.getZoom(),{animation:false})
this.map.getLayer('v')
.addGeometry(
newmaptalks.Polygon(extent.toArray(),{
symbol:{'polygonOpacity':0,'lineWidth':0}
})
)
//往地图上添加点位
this.markInfo()
},
methods:{
setCenter:function(center){
//标注点平移到某个点
letcenterV=maptalks1.CRSTransform.transform(center,'bd09ll','gcj02')
this.map.animateTo({
zoom:17,
center:centerV
},{
duration:1000
})
},
//上图
markInfo:function(){
letthat=this
that.map.removeLayer(that.clusterLayer)
letmarkers=[]
//--2--//前端聚合查询
//datafromrealworld.50000.1.js
//需要引入maptalks.markercluster.js
//数据格式[lon,lat,name]
//如：[[21.8129763667,109.2714296333,"晓港名城4号楼"],[21.8131727667,109.2710308833,"晓港名城6号楼"]]
for(leti=0;i'+e.target.properties.name+' 补充知识：vue集成maptalk实现geojson3D渲染
我就废话不多说了，大家还是直接看代码吧~
//实例化地图对象
letmap=newmaptalks.Map("map",{
center:[13.416935229170008,52.529564137540376],
zoom:20,
dragPitch:true,
//allowmaptodragrotating,truebydefault
dragRotate:true,
//enablemaptodragpitchingandrotatingatthesametime,falsebydefault
dragRotatePitch:true,
baseLayer:newmaptalks.TileLayer('base',{
urlTemplate:'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains:['a','b','c','d'],
attribution:'©OpenStreetMapcontributors,©CARTO'
})
});
//featurestodraw
//将Buildings中的数据，添加到features中
letfeatures=[];
buildings.forEach(function(b){
console.log(b.features);
features=features.concat(b.features);
});
//theThreeLayertodrawbuildings
letthreeLayer=newThreeLayer('t',{
forceRenderOnMoving:true,
forceRenderOnRotating:true
});
threeLayer.prepareToDraw=function(gl,scene,camera){
letme=this;
letlight=newTHREE.DirectionalLight(0xffffff);
light.position.set(0,-10,10).normalize();
scene.add(light);
features.forEach(function(g){
letheightPerLevel=5;
letlevels=g.properties.levels||1;
letcolor=0x2685a7
letm=newTHREE.MeshPhongMaterial({color:color,opacity:0.7});
//changetobacksidewithTHREE<=v0.94
//m.side=THREE.BackSide;
letmesh=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地图及聚合效果的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。