Skip to content

Commit 936f68b

Browse files
tangqinGisertangqinGiser
committed
新增 mapboxgl 控件相关示例。 review by caoxinke.
1 parent 742a016 commit 936f68b

16 files changed

+466
-23
lines changed

‎dist/include-mapboxgl.js‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,73 @@
1-
(function() {
1+
(function () {
22
var r = new RegExp("(^|(.*?\\/))(include-mapboxgl\.js)(\\?|$)"),
3-
s = document.getElementsByTagName('script'), targetScript;
4-
for(var i=0;i<s.length; i++) {
3+
s = document.getElementsByTagName('script'), targetScript;
4+
for (var i = 0; i < s.length; i++) {
55
var src = s[i].getAttribute('src');
6-
if(src) {
6+
if (src) {
77
var m = src.match(r);
8-
if(m) {
9-
targetScript =s[i];
8+
if (m) {
9+
targetScript = s[i];
1010
break;
1111
}
1212
}
1313
}
14-
function inputScript(url){
14+
15+
function inputScript(url) {
1516
var script = '<script type="text/javascript" src="' + url + '"><' + '/script>';
1617
document.writeln(script);
1718
}
18-
function inputCSS(url){
19+
20+
function inputCSS(url) {
1921
var css = '<link rel="stylesheet" href="' + url + '">';
2022
document.writeln(css);
2123
}
22-
function inArray(arr,item){
24+
25+
function inArray(arr, item) {
2326
for (i in arr) {
24-
if (arr[i] == item){
27+
if (arr[i] == item) {
2528
return true;
2629
}
2730
}
2831
return false;
2932
}
33+
3034
//加载类库资源文件
3135
function load() {
32-
var includes=(targetScript.getAttribute('include')||"").split(",");
33-
var excludes=(targetScript.getAttribute('exclude')||"").split(",");
34-
if(!inArray(excludes,'mapbox-gl')) {
36+
var includes = (targetScript.getAttribute('include') || "").split(",");
37+
var excludes = (targetScript.getAttribute('exclude') || "").split(",");
38+
if (!inArray(excludes, 'mapbox-gl')) {
3539
inputCSS("https://cdn.bootcss.com/mapbox-gl/0.39.1/mapbox-gl.css");
3640
inputScript("https://cdn.bootcss.com/mapbox-gl/0.39.1/mapbox-gl.js");
3741
}
38-
if(inArray(includes,'draw')){
39-
inputCSS("http://iclient.supermap.io/libs/mapbox-gl-js/plugins/mapbox-gl-draw.css");
40-
inputScript("http://iclient.supermap.io/libs/mapbox-gl-js/plugins/mapbox-gl-draw.js");
42+
if (inArray(includes, 'draw')) {
43+
inputCSS("http://iclient.supermap.io/libs/mapbox-gl-js/plugins/mapbox-gl-draw/mapbox-gl-draw.css");
44+
inputScript("http://iclient.supermap.io/libs/mapbox-gl-js/plugins/mapbox-gl-draw/mapbox-gl-draw.js");
4145
}
42-
43-
if(inArray(includes,'mapv')){
46+
if (inArray(includes, 'compare')) {
47+
inputCSS("http://iclient.supermap.io/libs/mapbox-gl-js/plugins/mapbox-gl-compare/mapbox-gl-compare.css");
48+
inputScript("http://iclient.supermap.io/libs/mapbox-gl-js/plugins/mapbox-gl-compare/mapbox-gl-compare.js");
49+
}
50+
if (inArray(includes, 'mapv')) {
4451
inputScript("http://mapv.baidu.com/build/mapv.min.js");
4552
}
46-
if(inArray(includes,'echarts')){
53+
if (inArray(includes, 'echarts')) {
4754
inputScript("https://cdn.bootcss.com/echarts/3.8.0/echarts.min.js");
4855
inputScript("http://iclient.supermap.io/libs/echartsLayer/EchartsLayer.js");
4956
}
5057
if (!inArray(excludes, 'iclient9-mapboxgl')) {
5158
inputScript("../../dist/iclient9-mapboxgl.min.js");
5259
}
53-
if(inArray(includes,'proj4')){
60+
if (inArray(includes, 'proj4')) {
5461
inputScript("https://cdn.bootcss.com/proj4js/2.4.3/proj4.js");
5562
}
56-
if(inArray(includes,'echarts-gl')){
63+
if (inArray(includes, 'echarts-gl')) {
5764
inputScript("http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.js");
5865
}
59-
if(inArray(includes,'shapefile')){
66+
if (inArray(includes, 'shapefile')) {
6067
inputScript("https://unpkg.com/shapefile@0.6.6/dist/shapefile.js");
6168
}
6269
}
70+
6371
load();
6472
window.isLocal = false;
6573
window.server = "http://localhost:8090";

‎examples/mapboxgl/config.js‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -565,7 +565,52 @@ var exampleConfig = {
565565
}
566566
}
567567
},
568-
568+
"control": {
569+
name: "控件",
570+
name_en: "control",
571+
content: {
572+
"BasicControl": {
573+
name: "MapboxGL 基本控件",
574+
name_en: "Basic Control",
575+
content: [{
576+
name: "导航控件",
577+
name_en: "Navigation Control",
578+
thumbnail: "control_navigationControl.png",
579+
fileName: "control_navigationControl"
580+
}, {
581+
name: "比例尺控件",
582+
name_en: "Scale Control",
583+
thumbnail: "control_scaleControl.png",
584+
fileName: "control_scaleControl"
585+
}, {
586+
name: "全屏控件",
587+
name_en: "Fullscreen Control",
588+
thumbnail: "control_fullscreenControl.png",
589+
fileName: "control_fullscreenControl"
590+
}, {
591+
name: "定位控件",
592+
name_en: "Geolocate Control",
593+
thumbnail: "control_geolocateControl.png",
594+
fileName: "control_geolocateControl"
595+
}, {
596+
name: "版权控件",
597+
name_en: "Attribution Control",
598+
thumbnail: "control_attributionControl.png",
599+
fileName: "control_attributionControl"
600+
}, {
601+
name: "绘图控件",
602+
name_en: "Draw Control",
603+
thumbnail: "control_drawControl.png",
604+
fileName: "control_drawControl"
605+
}, {
606+
name: "卷帘控件",
607+
name_en: "Swipe between maps",
608+
thumbnail: "control_swipeBetweenMaps.png",
609+
fileName: "control_swipeBetweenMaps"
610+
}]
611+
}
612+
}
613+
},
569614
"GTC": {
570615
name: "GTC",
571616
name_en: "GTC",
@@ -594,6 +639,7 @@ var exampleConfig = {
594639
var sideBarIconConfig = {
595640
"iServer": "fa-server",
596641
"viz": "fa-map",
642+
"control": "fa-sliders",
597643
"GTC": "fa-globe",
598644
};
599645

‎examples/mapboxgl/control_attributionControl.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>版权控件</title>
6+
</head>
7+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
8+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
9+
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
10+
<script type="text/javascript">
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys={\"epsgCode\":3857}&z={z}&x={x}&y={y}";
13+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
14+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
15+
var map = new mapboxgl.Map({
16+
container: 'map',
17+
attributionControl: false,
18+
style: {
19+
"version": 8,
20+
"sources": {
21+
"raster-tiles": {
22+
"attribution": attribution,
23+
"type": "raster",
24+
"tiles": [url],
25+
"tileSize": 256,
26+
},
27+
},
28+
"layers": [{
29+
"id": "simple-tiles",
30+
"type": "raster",
31+
"source": "raster-tiles",
32+
"minzoom": 0,
33+
"maxzoom": 22
34+
}]
35+
},
36+
center: [-74.50, 40],
37+
maxZoom: 18,
38+
zoom: 2,
39+
});
40+
41+
//mapboxgl默认 Attribution控件
42+
map.addControl(new mapboxgl.AttributionControl({compact: true}));
43+
44+
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
45+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
46+
</script>
47+
48+
</body>
49+
</html>

‎examples/mapboxgl/control_drawControl.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>绘制控件</title>
6+
<script type="text/javascript" include="draw" src="../../dist/include-mapboxgl.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10+
<script>
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys={\"epsgCode\":3857}&z={z}&x={x}&y={y}";
13+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
14+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
15+
var map = new mapboxgl.Map({
16+
container: 'map',
17+
style: {
18+
"version": 8,
19+
"sources": {
20+
"raster-tiles": {
21+
"attribution": attribution,
22+
"type": "raster",
23+
"tiles": [url],
24+
"tileSize": 256,
25+
},
26+
},
27+
"layers": [{
28+
"id": "simple-tiles",
29+
"type": "raster",
30+
"source": "raster-tiles",
31+
"minzoom": 0,
32+
"maxzoom": 22
33+
}]
34+
},
35+
center: [-74.50, 40],
36+
maxZoom: 18,
37+
zoom: 2,
38+
});
39+
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
40+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
41+
42+
//mapbox 绘制要素图形控件
43+
var Draw = new MapboxDraw();
44+
map.addControl(Draw,'top-left')
45+
46+
</script>
47+
</body>
48+
</html>

‎examples/mapboxgl/control_fullscreenControl.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>全屏控件</title>
6+
</head>
7+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
8+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
9+
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
10+
<script type="text/javascript">
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys={\"epsgCode\":3857}&z={z}&x={x}&y={y}";
13+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
14+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
15+
var map = new mapboxgl.Map({
16+
container: 'map',
17+
style: {
18+
"version": 8,
19+
"sources": {
20+
"raster-tiles": {
21+
"attribution": attribution,
22+
"type": "raster",
23+
"tiles": [url],
24+
"tileSize": 256,
25+
},
26+
},
27+
"layers": [{
28+
"id": "simple-tiles",
29+
"type": "raster",
30+
"source": "raster-tiles",
31+
"minzoom": 0,
32+
"maxzoom": 22
33+
}]
34+
},
35+
center: [-74.50, 40],
36+
maxZoom: 18,
37+
zoom: 2,
38+
});
39+
40+
//mapboxgl 全屏控件
41+
map.addControl(new mapboxgl.FullscreenControl(),'top-left');
42+
43+
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
44+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
45+
</script>
46+
47+
</body>
48+
</html>

‎examples/mapboxgl/control_geolocateControl.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>定位控件</title>
6+
</head>
7+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
8+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
9+
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
10+
<script type="text/javascript">
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys={\"epsgCode\":3857}&z={z}&x={x}&y={y}";
13+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
14+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
15+
var map = new mapboxgl.Map({
16+
container: 'map',
17+
style: {
18+
"version": 8,
19+
"sources": {
20+
"raster-tiles": {
21+
"attribution": attribution,
22+
"type": "raster",
23+
"tiles": [url],
24+
"tileSize": 256,
25+
},
26+
},
27+
"layers": [{
28+
"id": "simple-tiles",
29+
"type": "raster",
30+
"source": "raster-tiles",
31+
"minzoom": 0,
32+
"maxzoom": 22
33+
}]
34+
},
35+
center: [-74.50, 40],
36+
maxZoom: 18,
37+
zoom: 2,
38+
});
39+
40+
//mapboxgl 定位控件，当浏览器禁用定位后，该控件不再显示
41+
map.addControl(new mapboxgl.GeolocateControl({
42+
positionOptions: {
43+
enableHighAccuracy: true
44+
},
45+
trackUserLocation: true
46+
}),'top-left');
47+
48+
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
49+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
50+
</script>
51+
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)