我是靠谱客的博主 甜蜜龙猫,这篇文章主要介绍天地图项目2——绘制矩形覆盖物,现在分享给大家,希望可以做个参考。

一、地图添加矩形覆盖物

  1. map.js文件中,调用天地图官方文档中的方法,绘制矩形覆盖物到地图上:
复制代码
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
// map.js // XROUND与YROUND分别为长度和宽度偏移量 async function getMineAreas(map) { try { const res = await ... // 异步获取后端传过来的坐标信息 const points = [] var tabList = [] var polygon = [] for (var i = 0, len = res.length; i < len; i++) { point.push(new window.T.LngLat(res[i].longitude, res[i].latitude)) point.push(new window.T.LngLat(res.[i].longitude + res[i].width * XROUND, res[i].latitude)) point.push(new window.T.LngLat(res[i].longitude + res[i].width * XROUND, res[i].latitude - res[i].height * YROUND)) point.push(new window.T.LngLat(res[i].longitude, res[i].latitude - res[i].height * YROUND)) points.push(point) tabList.push({ id: res[i].id, name: res[i].name, bound: point, pol: polygon[i] }) // 返回相关矩形覆盖物信息 return tabList } } catch (error) { error }
  1. 在地图页面上调用js文件,绘制矩形覆盖物到地图页面上:
复制代码
1
2
3
4
5
6
7
8
9
import mapAPI from '@/utils/map' async mounted() { // 初始化天地图 this.map = await mapAPI.initMap('mapDiv') // 天地图添加矩形覆盖物 this.tabList = await mapAPI.getMineAreas(this.map) }

二、矩形覆盖物添加监听事件

目前项目需求上,需要在添加的矩形覆盖物上添加相关鼠标移入、移出和点击等相关鼠标监听事件。这个在天地图的官方文档中有,可以拿过来使用:

复制代码
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
// map.js // 为每个矩形覆盖物动态添加事件监听函数 polygon.forEach(function(pol){ pol.addEventListener('mouseover', () => { // 设置矩形边缘线 pol.setLineStyle('solid') // 设置矩形透明度 pol.setFillOpacity(0.7) // 矩形文本标注内容 var text = `<div style='font-size:bold;'> 编码:${pol.id}<br>名称:${pol.name}</div>` // 矩形覆盖物文本标注坐标 var position = new window.T.LngLat(pol.getLngLats()[0][1].lng, pol.getLngLats()[0][1].lat) // 文本标注 label = new window.T.Label({ text: text, position: position }) // 设置文本标注边框线宽度 label.setBorderLine(2) // 设置文本大小 label.setFontSize(map.getZoom() - 1) // 添加到地图 map.addOverLay(label) }) pol.addEventListener('mouseout', () => { pol.setLineStyle('dashed') pol.setFillOpacity(0.5) // 鼠标移出矩形覆盖物时关闭文本窗口 map.removeOverLay(label) }) pol.addEventListener('click', ()=> { // 点击事件 ... }) })

三、封装

将上述的代码封装到一起如下:

复制代码
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
// map.js // XROUND与YROUND分别为长度和宽度偏移量 async function getMineAreas(map) { try { const res = await ... // 异步获取后端传过来的坐标信息 const points = [] var tabList = [] var polygon = [] for (var i = 0, len = res.length; i < len; i++) { point.push(new window.T.LngLat(res[i].longitude, res[i].latitude)) point.push(new window.T.LngLat(res.[i].longitude + res[i].width * XROUND, res[i].latitude)) point.push(new window.T.LngLat(res[i].longitude + res[i].width * XROUND, res[i].latitude - res[i].height * YROUND)) point.push(new window.T.LngLat(res[i].longitude, res[i].latitude - res[i].height * YROUND)) points.push(point) tabList.push({ id: res[i].id, name: res[i].name, bound: point, pol: polygon[i] }) // 返回相关矩形覆盖物信息 return tabList } // 为每个矩形覆盖物动态添加事件监听函数 polygon.forEach(function(pol){ pol.addEventListener('mouseover', () => { // 设置矩形边缘线 pol.setLineStyle('solid') // 设置矩形透明度 pol.setFillOpacity(0.7) // 矩形文本标注内容 var text = `<div style='font-size:bold;'> 编码:${pol.id}<br>名称:${pol.name}</div>` // 矩形覆盖物文本标注坐标 var position = new window.T.LngLat(pol.getLngLats()[0][1].lng, pol.getLngLats()[0][1].lat) // 文本标注 label = new window.T.Label({ text: text, position: position }) // 设置文本标注边框线宽度 label.setBorderLine(2) // 设置文本大小 label.setFontSize(map.getZoom() - 1) // 添加到地图 map.addOverLay(label) }) pol.addEventListener('mouseout', () => { pol.setLineStyle('dashed') pol.setFillOpacity(0.5) // 鼠标移出矩形覆盖物时关闭文本窗口 map.removeOverLay(label) }) pol.addEventListener('click', ()=> { // 点击事件 ... }) }) } catch (error) { error } } // vue页面 <template> <div id="mapDiv" /> </template> <srcipt> import mapAPI from '@/utils/map' export default { data() { return { ... } }, async mounted() { // 初始化天地图 this.map = await mapAPI.initMap('mapDiv') // 天地图添加矩形覆盖物 this.tabList = await mapAPI.getMineAreas(this.map) } } </srcipt>

最后

以上就是甜蜜龙猫最近收集整理的关于天地图项目2——绘制矩形覆盖物的全部内容,更多相关天地图项目2——绘制矩形覆盖物内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(103)

评论列表共有 0 条评论

立即
投稿
返回
顶部