个人中心
gpt4 book ai didi

使用vue引入maptalks地图及聚合效果的实现

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章使用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、初始化地图并添加聚合 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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渲染 。

我就废话不多说了，大家还是直接看代码吧~ 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
   //实例化地图对象
   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 href="http://osm.org" rel="external nofollow" >OpenStreetMap</a> contributors, &copy; <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地图及聚合效果的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/liona_koukou/article/details/84316065 。

最后此篇关于使用vue引入maptalks地图及聚合效果的实现的文章就讲到这里了,如果你想了解更多关于使用vue引入maptalks地图及聚合效果的实现的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： javascript实现依次输入input自动定焦
文章推荐： 如何设计一个安全的API接口详解
文章推荐： 使用原生JS实现弹出层特效
文章推荐： jQuery基础知识小结
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com