Skip to content

Commit c92c304

Browse files
luoxiao-supermapluoxiao-supermap
committed
【update】弹窗和点选范例增加提示 review by songym
1 parent 8b0f119 commit c92c304

File tree

5 files changed

+117
-98
lines changed

5 files changed

+117
-98
lines changed

‎examples/component/components_identify_vue.html

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,38 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8" />
8-
<title data-i18n="resources.title_componentsIdentify_Vue"></title>
9-
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10-
<script
11-
include="ant-design-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
12-
src="../../dist/mapboxgl/include-mapboxgl.js"
13-
></script>
14-
<style>
15-
#main {
16-
margin: 0 auto;
17-
width: 100%;
18-
height: 100%;
19-
}
20-
</style>
21-
</head>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsIdentify_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script
11+
include="ant-design-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
12+
src="../../dist/mapboxgl/include-mapboxgl.js"
13+
></script>
14+
<style>
15+
#main {
16+
margin: 0 auto;
17+
width: 100%;
18+
height: 100%;
19+
}
20+
</style>
21+
</head>
2222

23-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
24-
<div id="main">
25-
<sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284">
26-
<!-- 点选查询组件： sm-identify -->
27-
<sm-identify :layers="['民航数据']"></sm-identify>
28-
</sm-web-map>
29-
</div>
23+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
24+
<div id="main">
25+
<sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284">
26+
<!-- 点选查询组件： sm-identify -->
27+
<sm-identify :layers="['民航数据']"></sm-identify>
28+
</sm-web-map>
29+
</div>
3030

31-
<script>
32-
new Vue({
33-
el: '#main'
34-
});
35-
</script>
36-
</body>
31+
<script>
32+
new Vue({
33+
el: '#main',
34+
mounted() {
35+
this.$message.info(resources.msg_clickLayerToPopup);
36+
}
37+
});
38+
</script>
39+
</body>
3740
</html>

‎examples/component/l_identify_vue.html

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,34 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8" />
8-
<title data-i18n="resources.title_componentsIdentify_Vue"></title>
9-
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10-
<script include="ant-design-vue,iclient-leaflet-vue" src="../../dist/leaflet/include-leaflet.js"></script>
11-
<style>
12-
#main {
13-
margin: 0 auto;
14-
width: 100%;
15-
height: 100%;
16-
}
17-
</style>
18-
</head>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsIdentify_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script include="ant-design-vue,iclient-leaflet-vue" src="../../dist/leaflet/include-leaflet.js"></script>
11+
<style>
12+
#main {
13+
margin: 0 auto;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
</style>
18+
</head>
1919

20-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21-
<div id="main">
22-
<sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
23-
<sm-identify :layer-names="['民航数据']"></sm-identify>
24-
</sm-web-map>
25-
</div>
20+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21+
<div id="main">
22+
<sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284">
23+
<sm-identify :layer-names="['民航数据']"></sm-identify>
24+
</sm-web-map>
25+
</div>
2626

27-
<script>
28-
new Vue({
29-
el: '#main'
30-
});
31-
</script>
32-
</body>
27+
<script>
28+
new Vue({
29+
el: '#main',
30+
mounted() {
31+
this.$message.info(resources.msg_clickLayerToPopup);
32+
}
33+
});
34+
</script>
35+
</body>
3336
</html>

‎examples/component/l_popup_vue.html

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,59 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8" />
8-
<title data-i18n="resources.title_componentsPopup_Vue"></title>
9-
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10-
<script include="ant-design-vue,iclient-leaflet-vue" src="../../dist/leaflet/include-leaflet.js"></script>
11-
<style>
12-
#main {
13-
margin: 0 auto;
14-
width: 100%;
15-
height: 100%;
16-
}
17-
</style>
18-
</head>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsPopup_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script include="ant-design-vue,iclient-leaflet-vue" src="../../dist/leaflet/include-leaflet.js"></script>
11+
<style>
12+
#main {
13+
position: relative;
14+
margin: 0 auto;
15+
width: 100%;
16+
height: 100%;
17+
}
18+
.message {
19+
position: absolute;
20+
left: 10px;
21+
top: 10px;
22+
}
23+
</style>
24+
</head>
1925

20-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21-
<div id="main">
22-
<sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="1329428269" @click="mapClick">
23-
<!-- 弹窗组件 -->
24-
<sm-popup>
25-
<a-table :columns="columns" :data-source="data" :pagination="false" />
26-
</sm-popup>
27-
</sm-web-map>
28-
</div>
26+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
27+
<div id="main">
28+
<sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="1329428269" @click="mapClick">
29+
<!-- 弹窗组件 -->
30+
<sm-popup>
31+
<a-table :columns="columns" :data-source="data" :pagination="false" />
32+
</sm-popup>
33+
</sm-web-map>
34+
</div>
2935

30-
<script>
31-
new Vue({
32-
el: '#main',
33-
data() {
34-
return {
35-
// table的props
36-
columns: [
37-
{ key: 1, title: '经度', dataIndex: 'lng' },
38-
{ key: 2, title: '纬度', dataIndex: 'lat' }
39-
],
40-
data: []
41-
};
42-
},
43-
methods: {
44-
mapClick(e) {
45-
let latLng = e.map.layerPointToLatLng(e.mapboxEvent.layerPoint);
46-
this.data = [{ key: 1, lng: latLng.lng.toFixed(2), lat: latLng.lat.toFixed(2) }];
47-
}
48-
}
49-
});
50-
</script>
51-
</body>
36+
<script>
37+
new Vue({
38+
el: '#main',
39+
data() {
40+
return {
41+
// table的props
42+
columns: [
43+
{ key: 1, title: '经度', dataIndex: 'lng' },
44+
{ key: 2, title: '纬度', dataIndex: 'lat' }
45+
],
46+
data: []
47+
};
48+
},
49+
mounted(){
50+
this.$message.info(resources.msg_clickToPopup);
51+
},
52+
methods: {
53+
mapClick(e) {
54+
let latLng = e.map.layerPointToLatLng(e.mapboxEvent.layerPoint);
55+
this.data = [{ key: 1, lng: latLng.lng.toFixed(2), lat: latLng.lat.toFixed(2) }];
56+
}
57+
}
58+
});
59+
</script>
60+
</body>
5261
</html>

‎examples/locales/en-US/resources.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1610,6 +1610,8 @@ window.examplesResources = {
16101610
"msg_externalTangentSquare": "Draw the rectangle with the left drawing control and click the right button to calculate the minimum tangent square",
16111611
"msg_drawLayer": "Please draw layer",
16121612
"msg_vectorClip": "Vector clipping analysis only supports single side clipping!",
1613+
"msg_clickToPopup": 'Please click the map to open popup',
1614+
"msg_clickLayerToPopup": 'Please click the layer\'s feature to check properties',
16131615

16141616
"set_style": "",
16151617
"style_width420px": 'width: 500px',

‎examples/locales/zh-CN/resources.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1558,6 +1558,8 @@ window.examplesResources = {
15581558
"msg_externalTangentSquare": "使用左侧绘制控件绘制矩形，点击右侧按钮计算最小外切正方形",
15591559
"msg_drawLayer": "请画出图层",
15601560
"msg_vectorClip": "矢量裁剪分析仅支持单面裁剪!",
1561+
"msg_clickToPopup": '点击地图，弹出弹窗',
1562+
"msg_clickLayerToPopup": '点击图层上的要素，查看属性',
15611563

15621564
"set_style": "top: -23px;left: 86px;",
15631565
"style_width420px": 'width: 420px',

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy