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)