Skip to content

Commit d5aa5ee

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【feature】新增地图卷帘组件范例; 新增随机点mapboxgl范例; review by songym
1 parent cffa573 commit d5aa5ee

File tree

11 files changed

+74492
-67193
lines changed

11 files changed

+74492
-67193
lines changed

‎dist/mapboxgl/iclient-mapboxgl-vue.css

Lines changed: 3028 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mapboxgl/iclient-mapboxgl-vue.js

Lines changed: 71172 additions & 67149 deletions
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient-mapboxgl-vue.min.css

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mapboxgl/iclient-mapboxgl-vue.min.js

Lines changed: 21 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/component/components_compare_vue.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
7+
<head>
8+
<meta charset="UTF-8">
9+
<title data-i18n='resources.title_componentsCompare_Vue'></title>
10+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
11+
<script include="ant-design-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
12+
src="../../dist/mapboxgl/include-mapboxgl.js"></script>
13+
<style>
14+
#main {
15+
margin: 0 auto;
16+
width: 100%;
17+
height: 100%;
18+
}
19+
</style>
20+
</head>
21+
22+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
23+
<div id="main">
24+
<sm-compare :before-map-options="beforeMapOptions" :after-map-options="afterMapOptions"></sm-compare>
25+
<!-- <sm-compare>
26+
<sm-web-map slot="beforeMap" target="beforeMap" server-url="https://iportal.supermap.io/iportal"
27+
:map-id="801571284">
28+
</sm-web-map>
29+
<sm-web-map slot="afterMap" target="afterMap" server-url="https://iportal.supermap.io/iportal"
30+
:map-id="491609698">
31+
</sm-web-map>
32+
</sm-compare> -->
33+
</div>
34+
35+
<script>
36+
new Vue({
37+
el: '#main',
38+
data() {
39+
return {
40+
beforeMapOptions: {
41+
target: 'beforeMap',
42+
serverUrl: 'https://iportal.supermap.io/iportal',
43+
mapId: 801571284
44+
},
45+
afterMapOptions: {
46+
target: 'afterMap',
47+
serverUrl: 'https://iportal.supermap.io/iportal',
48+
mapId: 491609698
49+
}
50+
};
51+
}
52+
})
53+
54+
</script>
55+
</body>
56+
57+
</html>

‎examples/component/config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,14 @@ var exampleConfig = {
6969
thumbnail: 'components_ncp_world.png',
7070
fileName: 'components_ncp_world',
7171
localIgnore: true
72+
},
73+
{
74+
name: '地图卷帘',
75+
name_en: 'Map Compare',
76+
version: '10.1.0',
77+
thumbnail: 'components_compare_vue.png',
78+
fileName: 'components_compare_vue',
79+
localIgnore: true
7280
}
7381
]
7482
},

‎examples/component/img/components_compare_vue.png

16.2 KB
Loading

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

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -599,23 +599,24 @@ window.examplesResources = {
599599
"title_ChinaEarthquakeHeat": 'China Earthquake',
600600
"title_ChinaEarthquakeHeatWGS84": 'China Earthquake WGS84',
601601
"title_ChinaEarthquakeHeatClient": 'China Earthquake(Classic) WGS84',
602-
"title_componentsChart_Vue": 'Chart component(Vue）',
603-
"title_componentsChart_Vue(pie)":'Pie Chart component(Vue）',
604-
"title_componentsChart_Vue(radar)":'Radar Chart component(Vue）',
605-
"title_componentsChart_Vue(gauge)":'Gauge Chart component(Vue）',
602+
"title_componentsChart_Vue": 'Chart component(Vue)',
603+
"title_componentsChart_Vue(pie)":'Pie Chart component(Vue)',
604+
"title_componentsChart_Vue(radar)":'Radar Chart component(Vue)',
605+
"title_componentsChart_Vue(gauge)":'Gauge Chart component(Vue)',
606606
"title_componentsLayerList_Vue": 'LayerList component(Vue)',
607607
"title_componentsOpenFile_Vue":'OpenFile component(Vue)',
608-
"title_componentsMap_Vue": 'iServer Map component(Vue）',
609-
"title_componentsMiniMap_Vue": 'MiniMap component(Vue）',
610-
"title_componentsPan_Vue": 'Pan component(Vue）',
611-
"title_componentsScale_Vue": 'Scale component(Vue）',
612-
"title_componentsWebmap_Vue": 'iPortal Map component(Vue）',
613-
"title_componentsZoom_Vue": 'Zoom component(Vue）',
614-
"title_componentsLegend_Vue": 'Legend component(Vue）',
615-
"title_componentsBasic_Vue": 'Basic component(Vue）',
616-
"title_componentsMeasure_Vue": 'Measure component(Vue）',
617-
"title_componentsQuery_Vue": 'Query component(Vue）',
618-
"title_componentsSearch_Vue": 'Search component(Vue）',
608+
"title_componentsMap_Vue": 'iServer Map component(Vue)',
609+
"title_componentsMiniMap_Vue": 'MiniMap component(Vue)',
610+
"title_componentsPan_Vue": 'Pan component(Vue)',
611+
"title_componentsScale_Vue": 'Scale component(Vue)',
612+
"title_componentsWebmap_Vue": 'iPortal Map component(Vue)',
613+
"title_componentsCompare_Vue": 'Map Compare(Vue)',
614+
"title_componentsZoom_Vue": 'Zoom component(Vue)',
615+
"title_componentsLegend_Vue": 'Legend component(Vue)',
616+
"title_componentsBasic_Vue": 'Basic component(Vue)',
617+
"title_componentsMeasure_Vue": 'Measure component(Vue)',
618+
"title_componentsQuery_Vue": 'Query component(Vue)',
619+
"title_componentsSearch_Vue": 'Search component(Vue)',
619620
"title_componentsTheme_Vue": 'Theme component',
620621
"title_componentsDemo_Vue": 'Landuse demo',
621622
"title_componentsEstateMonitoringPlatform_Vue": 'Estate project visual monitoring platform demo',
@@ -1081,6 +1082,7 @@ window.examplesResources = {
10811082
"text_cartoCSSStyleChart": "Style Chart of CartoCSS: ",
10821083
"text_heatMapLayer": "Heat Map Layer",
10831084
"text_fastHeatMapLayer": "Fast Heat Map Layer",
1085+
"text_fastHeatMapLayer_mgl": "Heat Map Layer",
10841086
"text_degree": "degree",
10851087
"text_heatMapColorSection": "Heat Map Color Section",
10861088
"text_colorSection": "Color Section",
@@ -1362,7 +1364,7 @@ window.examplesResources = {
13621364
'text_user_download': "Everyone can download",
13631365
'text_user_view': "Everyone can view",
13641366
'text_user_editor': "Login users can edit",
1365-
'text_nickname': "Nickname（Username）",
1367+
'text_nickname': "Nickname(Username)",
13661368
'text_department': "Department Name",
13671369
'text_group': "Group Name",
13681370
'text_is_search': "Search",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -556,6 +556,7 @@ window.examplesResources = {
556556
"title_componentsPan_Vue": '平移组件',
557557
"title_componentsScale_Vue": '比例尺组件',
558558
"title_componentsWebmap_Vue": 'iPortal地图',
559+
"title_componentsCompare_Vue": '地图卷帘',
559560
"title_componentsZoom_Vue": '缩放组件',
560561
"title_componentsLegend_Vue": '图例组件',
561562
"title_componentsBasic_Vue": '基础组件',
@@ -1032,6 +1033,7 @@ window.examplesResources = {
10321033
"text_cartoCSSStyleChart": "CartoCSS样式表：",
10331034
"text_heatMapLayer": "热点图",
10341035
"text_fastHeatMapLayer": "新版热点图",
1036+
"text_fastHeatMapLayer_mgl": "热点图",
10351037
"text_degree": "地理单位",
10361038
"text_heatMapColorSection": "热点图颜色分段配置",
10371039
"text_colorSection": "颜色分段配置",

‎examples/mapboxgl/config.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ var exampleConfig = {
2020
name_en: "3857 coordinate system",
2121
thumbnail: "mb_TileLayer.png",
2222
fileName: "01_tiledMapLayer"
23-
},
23+
},
2424
{
2525
name: "地图-栅格分析",
2626
name_en: "map rasterFunction",
2727
version: "10.0.0",
2828
thumbnail: "tiledMapLayerRasterfunction.png",
2929
fileName: "01_tiledMapLayer_rasterfunction"
30-
},
30+
},
3131
{
3232
name: "地图信息",
3333
name_en: "map query service",
@@ -408,6 +408,13 @@ var exampleConfig = {
408408
name_en: "Heat map",
409409
version: "9.1.0",
410410
content: [
411+
{
412+
name: "随机点",
413+
name_en: "random points",
414+
version: "10.1.0",
415+
thumbnail: "mb_heatMapLayer.png",
416+
fileName: "heatmaplayer_mbgl"
417+
},
411418
{
412419
name: "随机点 (Classic)",
413420
name_en: "random points (Classic)",

‎examples/mapboxgl/heatmaplayer_mbgl.html

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title data-i18n="resources.title_heatMapLayer"></title>
7+
<style type="text/css">
8+
body {
9+
margin: 0;
10+
overflow: hidden;
11+
background: #fff;
12+
width: 100%;
13+
height: 100%;
14+
}
15+
16+
#map {
17+
position: absolute;
18+
width: 100%;
19+
height: 100%;
20+
}
21+
22+
#toolbar {
23+
position: absolute;
24+
top: 50px;
25+
right: 10px;
26+
width: 300px;
27+
text-align: center;
28+
z-index: 100;
29+
border-radius: 4px;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id="toolbar" class="panel panel-primary">
36+
<div class="panel-heading">
37+
<h5 class="panel-title text-center" data-i18n="resources.text_fastHeatMapLayer_mgl"></h5>
38+
</div>
39+
<div class="panel-body content">
40+
<div class="panel">
41+
<div class="input-group">
42+
<span class="input-group-addon" data-i18n="resources.text_countsDraw"></span>
43+
<input type="text" class="form-control" id="heatNums" value="200" />
44+
</div>
45+
</div>
46+
<div class="panel">
47+
<div class="input-group">
48+
<span class="input-group-addon" data-i18n="resources.text_radius"></span>
49+
<input class="form-control" style="width: 50px;" value="50" id="heatradius" />
50+
<select class="form-control" style="width: auto;" id="radiusUnit">
51+
<option value="px">px</option>
52+
<option data-i18n="[value]resources.text_degree;resources.text_degree"></option>
53+
</select>
54+
</div>
55+
</div>
56+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_startDraw"
57+
onclick="createHeatPoints()" />&nbsp; &nbsp;
58+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear"
59+
onclick="clearHeatPoints()" />
60+
</div>
61+
</div>
62+
<div id="map"></div>
63+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
64+
<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
65+
<script type="text/javascript">
66+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
67+
var url = host + "/iserver/services/map-world/rest/maps/World";
68+
var attribution =
69+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
70+
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
71+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
72+
73+
var map = new mapboxgl.Map({
74+
container: "map",
75+
renderWorldCopies: false,
76+
style: {
77+
version: 8,
78+
sources: {
79+
"raster-tiles": {
80+
attribution: attribution,
81+
type: "raster",
82+
tiles: [url + "/zxyTileImage.png?z={z}&x={x}&y={y}"],
83+
tileSize: 256,
84+
},
85+
},
86+
layers: [
87+
{
88+
id: "simple-tiles",
89+
type: "raster",
90+
source: "raster-tiles",
91+
minzoom: 0,
92+
maxzoom: 9,
93+
},
94+
],
95+
},
96+
center: [0, 0],
97+
zoom: 1,
98+
});
99+
map.addControl(new mapboxgl.NavigationControl(), "top-left");
100+
map.addControl(new mapboxgl.supermap.LogoControl(), "bottom-right");
101+
102+
103+
function createHeatPoints() {
104+
clearHeatPoints();
105+
var heatPoints = [];
106+
var num = parseInt(document.getElementById("heatNums").value);
107+
var radius = parseInt(document.getElementById("heatradius").value);
108+
var unit = document.getElementById("radiusUnit").value;
109+
110+
var features = [];
111+
for (var i = 0; i < num; i++) {
112+
features[i] = {
113+
type: "feature",
114+
geometry: {
115+
type: "Point",
116+
coordinates: [
117+
Math.random() * 360 - 180,
118+
Math.random() * 160 - 80,
119+
],
120+
},
121+
properties: {
122+
value: Math.random() * 9,
123+
},
124+
};
125+
}
126+
127+
var heatPoints = {
128+
type: "FeatureCollection",
129+
features: features,
130+
};
131+
132+
map.addSource("heatmap", {
133+
type: "geojson",
134+
data: heatPoints,
135+
});
136+
137+
map.addLayer({
138+
id: "heatmap",
139+
type: "heatmap",
140+
source: "heatmap",
141+
paint: {
142+
"heatmap-weight": 1,
143+
"heatmap-intensity": 2,
144+
"heatmap-color": [
145+
"interpolate",
146+
["linear"],
147+
["heatmap-density"],
148+
0,
149+
"rgba(33,102,172,0)",
150+
0.2,
151+
"rgb(103,169,207)",
152+
0.4,
153+
"rgb(209,229,240)",
154+
0.6,
155+
"rgb(253,219,199)",
156+
0.8,
157+
"rgb(239,138,98)",
158+
1,
159+
"rgb(178,24,43)",
160+
],
161+
"heatmap-radius": radius,
162+
},
163+
});
164+
}
165+
166+
function clearHeatPoints() {
167+
if (map.getLayer("heatmap")) {
168+
map.removeLayer("heatmap");
169+
map.removeSource("heatmap");
170+
}
171+
}
172+
</script>
173+
</body>
174+
175+
</html>

0 commit comments

Comments
 (0)