Skip to content

Commit c5796e3

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

3 files changed

Lines changed: 169 additions & 1 deletion

File tree

‎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)