Skip to content

Commit 75085da

Browse files
ParnDeedlitsParnDeedlits
committed
新增自定义标注边框的功能
1 parent f820cd9 commit 75085da

4 files changed

Lines changed: 199 additions & 8 deletions

File tree

‎config/config-mapboxgl.js‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ var MAPBOXGL_CONFIG = config = {
3131
detail: "2000坐标系-栅格地形",
3232
icon: "4326_raster_ter.png",
3333
update: "最后更新时间：2019-01-16"
34-
},{
34+
}, {
3535
name: "2000坐标系-矢量瓦片",
3636
file: "4326_vector",
3737
diffcult: "1",
@@ -266,53 +266,68 @@ var MAPBOXGL_CONFIG = config = {
266266
folder: "mapmarker",
267267
leaffolder: true,
268268
childs: [
269+
{
270+
name: "边界标注",
271+
file: "addBox",
272+
diffcult: "1",
273+
detail: "测试基本的边界标注",
274+
icon: "addBox.png",
275+
update: "最后更新时间：2019-07-23",
276+
person: "基础平台-创新中心-潘卓然"
277+
},
269278
{
270279
name: "图片标注",
271280
file: "addpicture",
272281
diffcult: "1",
273282
detail: "测试基本的图片标注",
274283
icon: "addpicture.png",
275-
update: "最后更新时间：2018-06-06"
284+
update: "最后更新时间：2018-06-06",
285+
person: "基础平台-创新中心-潘卓然"
276286
},
277287
{
278288
name: "文字标注",
279289
file: "addtext",
280290
diffcult: "1",
281291
detail: "测试基本的文字标注",
282292
icon: "addtext.png",
283-
update: "最后更新时间：2018-06-06"
293+
update: "最后更新时间：2018-06-06",
294+
person: "基础平台-创新中心-潘卓然"
284295
},
285296
{
286297
name: "图文标注",
287298
file: "addtextandpic",
288299
diffcult: "1",
289300
detail: "测试基本的图文标注",
290301
icon: "addtextandpic.png",
291-
update: "最后更新时间：2018-06-06"
302+
update: "最后更新时间：2018-06-06",
303+
person: "基础平台-创新中心-潘卓然"
292304
},
293305
{
294306
name: "图片标注-样式实现",
295307
file: "addpicturesymbol",
296308
diffcult: "2",
297309
detail: "测试基本的图片标注",
298310
icon: "addpicturesymbol.png",
299-
update: "最后更新时间：2018-06-06"
311+
update: "最后更新时间：2018-06-06",
312+
person: "基础平台-创新中心-潘卓然"
300313
},
301314
{
302315
name: "文字标注-样式实现",
303316
file: "addtextsymbol",
304317
diffcult: "2",
305318
detail: "测试基本的文字标注",
306319
icon: "addtextsymbol.png",
307-
update: "最后更新时间：2018-06-06"
320+
update: "最后更新时间：2018-06-06",
321+
person: "基础平台-创新中心-潘卓然"
308322
},
309323
{
310324
name: "图文标注-样式实现",
311325
file: "addtextandpicsymbol",
312326
diffcult: "2",
313327
detail: "测试基本的图文标注",
314328
icon: "addtextandpicsymbol.png",
315-
update: "最后更新时间：2018-06-06"
329+
update: "最后更新时间：2018-06-06",
330+
person: "基础平台-创新中心-潘卓然"
316331
}
317332
]
318333
},
@@ -2073,6 +2088,14 @@ var MAPBOXGL_CONFIG = config = {
20732088
detail: "通过实时插值的方式实现计算速度，轨迹",
20742089
icon: "speed.png",
20752090
update: "最后更新时间：2018-01-15"
2091+
},
2092+
{
2093+
name: "在线地图输出",
2094+
file: "print",
2095+
diffcult: "1",
2096+
detail: "地图整饰打印输出",
2097+
icon: "print.png",
2098+
update: "最后更新时间：2019-02-15"
20762099
}
20772100
]
20782101
}

‎demo/mapbox/example/map/mapmarker/addBox.htm‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>GeoPoint</title>
7+
<script src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
8+
<style>
9+
#map {
10+
width: 100%;
11+
height: 700px;
12+
}
13+
14+
.checkbox {
15+
margin: 5px 15px;
16+
}
17+
18+
#marker {
19+
background-image: url('../../img/mapboxgl/icon/mapbox-icon.png');
20+
background-size: cover;
21+
width: 20px;
22+
height: 20px;
23+
border-radius: 50%;
24+
cursor: pointer;
25+
}
26+
27+
.box {
28+
width: 200px;
29+
height: 100px;
30+
background: #fff;
31+
position: absolute;
32+
}
33+
34+
.frame:after,
35+
.frame:before {
36+
border: solid transparent;
37+
content: ' ';
38+
height: 0;
39+
left: 100%;
40+
position: absolute;
41+
width: 0;
42+
}
43+
44+
.frame:after {
45+
border-width: 9px;
46+
border-left-color: #ccc;
47+
top: 15px;
48+
}
49+
50+
.frame:before {
51+
border-width: 14px;
52+
border-left-color: #333;
53+
top: 10px;
54+
}
55+
56+
.frame {
57+
background: #fff;
58+
border: 2px dashed #000;
59+
width: 100%;
60+
height: 100%;
61+
border-radius: 5%;
62+
}
63+
</style>
64+
</head>
65+
66+
<body>
67+
<div class="ToolLib">
68+
<input type="button" class="ButtonLib" id="type" value="添加图片标注" onclick="Addmarker()" />&nbsp;&nbsp;
69+
<label style="font-weight: bold;">点击按钮，之后在图上点击添加图片标注。</label>
70+
</div>
71+
<div id="map"></div>
72+
<div id="box">
73+
<div id="arrar"></div>
74+
<div id="bold"></div>
75+
</div>
76+
<script>
77+
//一定要去mapbox注册一个key,这个key会失效的
78+
mapboxgl.accessToken =
79+
'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
80+
var map = new mapboxgl.Map({
81+
container: 'map',
82+
style: {
83+
"version": 8,
84+
"sources": {
85+
"mapbox-tiles": {
86+
"type": "raster",
87+
'tiles': [
88+
"https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw"
89+
],
90+
'tileSize': 256
91+
}
92+
},
93+
"layers": [{
94+
"id": "streets-tiles",
95+
"type": "raster",
96+
"source": "mapbox-tiles",
97+
"minzoom": 0,
98+
"maxzoom": 22
99+
}]
100+
},
101+
zoom: 2,
102+
pitch: 45,
103+
center: [114.39958333969115, 30.467706575758285]
104+
});
105+
106+
map.on('load', function () {
107+
108+
});
109+
110+
//为地图容器添加单击事件监听
111+
function Addmarker() {
112+
map.on('click', function (mapMouseEvent) {
113+
//鼠标单击点坐标
114+
var latlon = mapMouseEvent.lngLat;
115+
//添加一个新的标注（矢量要素）
116+
addVectorLabel(latlon);
117+
});
118+
}
119+
120+
function calcBox(el, lonlat, option) {
121+
let origin = this.map.project(lonlat);
122+
//let origin = this.map.project(new mapboxgl.LngLat(lon, lat));
123+
console.log("origin", origin, el);
124+
el.width = el.style.width = option.width;
125+
el.height = el.style.height = option.height;
126+
el.style.left = option.left;
127+
el.style.top = option.top;
128+
return el;
129+
}
130+
131+
/**
132+
* 添加一个新的标注（矢量要素）
133+
* @param {mapbox.mapMouseEvent.latlon} 经纬度坐标点
134+
*/
135+
function addVectorLabel(latlon) {
136+
// create the popup
137+
var popup = new mapboxgl.Popup()
138+
.setText('设置点击事件的文本信息');
139+
140+
// 创建一个DOM element
141+
var el = document.createElement('div');
142+
var arrar = document.createElement('div');
143+
var frame = document.createElement('div');
144+
145+
arrar.className = "arrar";
146+
frame.className = "frame";
147+
148+
el.appendChild(arrar);
149+
el.appendChild(frame);
150+
151+
el.className = 'box'; //将该div与marker的样式绑定
152+
el = calcBox(el, latlon, {
153+
left: "-100px",
154+
top: "-100px",
155+
right: 0,
156+
bottom: 0,
157+
height: "100px",
158+
width: "300px"
159+
});
160+
161+
new mapboxgl.Marker(el)
162+
.setLngLat(latlon)
163+
.setPopup(popup)
164+
.addTo(map);
165+
}
166+
</script>
167+
</body>
168+
169+
</html>

‎demo/mapbox/gallery/map/mapmarker/addbox.png‎

572 KB
Loading

‎js/charts.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ function initCube(config, divid, name) {
106106
].join("");
107107
}
108108
},
109-
110109
series: [
111110
{
112111
name: name,

0 commit comments

Comments
 (0)