Skip to content

Commit 8635b9e

Browse files
libmwlibmw
committed
feat: uniform layer actions
1 parent 100e420 commit 8635b9e

File tree

2 files changed

+45
-63
lines changed

2 files changed

+45
-63
lines changed

‎_posts/2021-11-17-picture-gps.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
}
5151

5252
.buttons{
53-
padding: 10px;
53+
padding: 0 10px;
5454
}
5555
.buttons button{
5656
display: block;
@@ -103,18 +103,17 @@
103103
<div class="map-ctn" id="mapCtn">
104104
<div class="tools">
105105
<div class="fullscreen-btn">全屏</div>
106-
<label for="roadBtn">路网</label>
107-
<input type="checkbox" id="roadBtn" />
108-
<label for="googlePioBtn">谷歌标注</label>
109-
<input type="checkbox" checked id="googlePioBtn" />
110106
</div>
111107
</div>
112108
</div>
113109
<div id="makeAndModel" style="height: 30px; "></div>
114110
<footer>
115111
<div class="buttons">
116-
<button id="btnAmapTile">高德瓦片</button>
117-
<button id="btnGoogleTile">谷歌瓦片</button>
112+
<h5>图层：</h5>
113+
<p><input type="checkbox" id="btnAmapRoad" /><label for="btnAmapRoad">高德路网</label></p>
114+
<p><input type="checkbox" id="btnAmapSatellite" /><label for="btnAmapSatellite">高德卫星</label></p>
115+
<p><input type="checkbox" id="btnGoogleSatellite" /><label for="btnGoogleSatellite">谷歌带标注</label></p>
116+
<p><input type="checkbox" id="btnGoogleSatellitePure" /><label for="btnGoogleSatellitePure">谷歌无标注</label></p>
118117
</div>
119118
<div class="detail" id="picDetail"></div>
120119
<div class="otherMsg"></div>

‎resource/2021/1117_gps.js

Lines changed: 39 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,42 @@ var pageControl = {
1616
init: function () {
1717
const mapContainer = $("#mapCtn");
1818
const fullBtn = $(".fullscreen-btn");
19-
const btnAmapTile = $("#btnAmapTile");
20-
const btnGoogleTile = $("#btnGoogleTile");
21-
const roadBtn = $("#roadBtn");
22-
const googlePioBtn = $("#googlePioBtn");
23-
var roadNetLayer = new AMap.TileLayer.RoadNet();
19+
20+
const layerControls = [
21+
{
22+
buttonId: "btnAmapRoad",
23+
layer: new AMap.TileLayer.RoadNet(),
24+
},
25+
{
26+
buttonId: "btnAmapSatellite",
27+
layer: new AMap.TileLayer.Satellite(),
28+
},
29+
{
30+
buttonId: "btnGoogleSatellite",
31+
layer: new AMap.TileLayer({
32+
tileUrl:
33+
"http://mt2.google.com/vt/lyrs=y&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil",
34+
}),
35+
},
36+
{
37+
buttonId: "btnGoogleSatellitePure",
38+
layer: new AMap.TileLayer({
39+
tileUrl:
40+
"http://mt2.google.com/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil",
41+
}),
42+
},
43+
];
44+
45+
layerControls.forEach((item) => {
46+
const btn = $("#" + item.buttonId);
47+
btn.addEventListener("click", (e) => {
48+
if (btn.checked) {
49+
map.add(item.layer);
50+
} else {
51+
map.remove(item.layer);
52+
}
53+
});
54+
});
2455

2556
fullBtn.addEventListener("click", () => {
2657
$(".container").classList.toggle("fullscreen");
@@ -36,61 +67,19 @@ var pageControl = {
3667
});
3768
});
3869

39-
roadBtn.addEventListener("click", (e) => {
40-
if (roadBtn.checked) {
41-
map.add(roadNetLayer);
42-
} else {
43-
map.remove(roadNetLayer);
44-
}
45-
});
46-
47-
googlePioBtn.addEventListener("click", (e) => {
48-
if (googlePioBtn.checked) {
49-
map.add(googleLayerWithPio);
50-
map.remove(googleLayerPure);
51-
} else {
52-
map.remove(googleLayerWithPio);
53-
map.add(googleLayerPure);
54-
}
55-
});
56-
57-
const googleLayerPure = new AMap.TileLayer({
58-
tileUrl:
59-
"http://mt2.google.com/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil",
60-
zIndex: 3,
61-
});
62-
const googleLayerWithPio = new AMap.TileLayer({
63-
tileUrl:
64-
"http://mt2.google.com/vt/lyrs=y&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil",
65-
zIndex: 3,
66-
});
67-
this.googleLayerPure = googleLayerPure;
68-
this.googleLayerWithPio = googleLayerWithPio;
69-
70-
const amapSatelliteLayer = new AMap.TileLayer.Satellite();
71-
const amapRoadNetLayer = new AMap.TileLayer.RoadNet();
72-
7370
const map = new AMap.Map(mapContainer, {
7471
resizeEnable: true,
7572
zoom: 15,
7673
zooms: [2, 30],
7774
center: [116.397428, 39.90923],
78-
layers: [new AMap.TileLayer.Satellite()]
75+
layers: [],
7976
});
8077

81-
const testGoogleImage = new Image();
78+
/* const testGoogleImage = new Image();
8279
testGoogleImage.src = `//mt2.google.com/vt/lyrs=s&hl=zh-CN&gl=cn&x=17294&y=15469&z=15&s=Galil?t=${+Math.random()}`;
8380
testGoogleImage.onload = () => {
8481
map.add([googleLayerWithPio]);
85-
};
86-
//map.add(roadNetLayer);
87-
/* var marker = new AMap.Marker({
88-
position: new AMap.LngLat(116.397428, 39.90923), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
89-
title: "北京",
90-
}); */
91-
92-
// 将创建的点标记添加到已有的地图实例：
93-
// map.add(marker);
82+
}; */
9483

9584
this.map = map;
9685
const _this = this;
@@ -118,12 +107,6 @@ var pageControl = {
118107
//点击地图显示坐标
119108
map.on("click", this.onMapClick);
120109

121-
btnAmapTile.addEventListener("click", () => {
122-
this.setAMapTile();
123-
});
124-
btnGoogleTile.addEventListener("click", () => {
125-
this.setGoogleTile();
126-
});
127110
},
128111
generateMarker: function (pictureDetail, imgSrc) {
129112
const { lon, lat } = this.getPointByPictureDetail(pictureDetail);

0 commit comments

Comments
 (0)