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 "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地图及聚合效果的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“使用vue引入maptalks地图及聚合效果的实现”评论...
更新动态
2024年11月01日
2024年11月01日
- 外媒:《死亡岛2》或是今年PS+2档最受欢迎游戏
- 群星.1997-世纪之歌第二辑6CD【宝丽金】【WAV+CUE】
- 邵萱.1997-是是非非【捷登】【WAV+CUE】
- 巫启贤.1998-我是你的【风格】【WAV+CUE】
- 【原神手游】「月草的赐慧」祈愿
- 【原神手游】「赤团开时」祈愿
- 【原神手游】「法器·千夜浮梦」介绍
- 陈立农《青春为名 上部曲 - 恋》[FLAC/分轨][290.58MB]
- 张乔西《明星》[320K/MP3][55.23MB]
- 张乔西《明星》[FLAC/分轨][143.08MB]
- 《P3R:Episode Aegis》:重复爬塔的悲伤
- 《公会传说:遗落的世界》EA版评测:怀旧感CRPG还在追我
- 诛仙老玩家会喜欢《诛仙世界》吗?
- ABC唱片-《母帶直刻神奇黑胶CD》[FLAC+CUE]
- 柏菲·李一凤《真爱过关》限量开盘母带ORMCD[低速原抓WAV+CUE]