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

时间：2022-03-09 15:12:52

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

标签：

相关文章