使用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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。