Skip to content

Commit 84f5243

Browse files
songyumengsongyumeng
committed
【example】新增leaflet叠加mapboxgl实现加载mvt矢量瓦片的例子 review by xiongjj
1 parent 3b60c3d commit 84f5243

File tree

6 files changed

+77
-0
lines changed

6 files changed

+77
-0
lines changed

‎dist/leaflet/include-leaflet.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,10 @@
161161
inputCSS('../../dist/leaflet/iclient-leaflet-vue.css');
162162
inputScript('../../dist/leaflet/iclient-leaflet-vue.min.js');
163163
}
164+
if (inArray(includes, 'leaflet-mapbox-gl')) {
165+
inputScript('https://cdn.jsdelivr.net/npm/mapbox-gl-leaflet@0.0.14/leaflet-mapbox-gl.js');
166+
}
167+
164168
}
165169

166170
load();

‎examples/leaflet/config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -942,6 +942,12 @@ var exampleConfig = {
942942
name_en: "natural style",
943943
thumbnail: "l_tileVectorLayer_natural.png",
944944
fileName: "vectorTileLayerNatural"
945+
}, {
946+
name: "MVT (叠加 MapboxGL)",
947+
name_en: "MVT (via MapboxGL)",
948+
version: '10.1.1',
949+
thumbnail: "l_mvt_mapboxgl.png",
950+
fileName: "mvt_mapboxgl"
945951
}
946952
// , {
947953
// name: "默认风格(MVT)",

‎examples/leaflet/img/l_mvt_mapboxgl.png‎

27.7 KB
Loading

‎examples/leaflet/mvt_mapboxgl.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_mvt_mapboxgl"></title>
9+
<style>
10+
.leaflet-gl-layer.mapboxgl-map {
11+
z-index: 1;
12+
}
13+
</style>
14+
<script type="text/javascript" src="../js/include-web.js"></script>
15+
</head>
16+
17+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
18+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
19+
<!-- 叠加非3857的地图，请使用mapbox-gl-enhance -->
20+
<script
21+
type="text/javascript"
22+
include="mapbox-gl-enhance"
23+
src="../../dist/mapboxgl/include-mapboxgl.js"
24+
></script>
25+
<!-- 需引入三方插件 mapbox-gl-leaflet https://github.com/mapbox/mapbox-gl-leaflet -->
26+
<script type="text/javascript" include="leaflet-mapbox-gl" src="../../dist/leaflet/include-leaflet.js"></script>
27+
28+
<script type="text/javascript">
29+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
30+
var url = host + '/iserver/services/map-china400/rest/maps/China_4326';
31+
32+
// 为与mapboxgl的级别相匹配，leaflet的分辨率应设置为第0级为全球范围宽度除以瓦片宽度256.
33+
// 常见坐标系第0级分辨率 WebMercator(3857):2*6378137*Math.PI/256 WGS84(4326):360.0/256 China2000(4490):360.0/256 Beijing54(4214):360.0/256 Xian80(4610):360.0/256
34+
var topResolution = 360.0 / 256;
35+
var resolutions = [];
36+
for (var zoom = 0; zoom < 22; zoom++) {
37+
resolutions.push(topResolution / Math.pow(2, zoom));
38+
}
39+
var crs = L.Proj.CRS('EPSG:4326', {
40+
origin: [-180, 90],
41+
resolutions: resolutions
42+
});
43+
var map = L.map('map', {
44+
center: [37.71194458007813, -122.24143981933594],
45+
zoom: 11,
46+
crs: crs
47+
});
48+
L.supermap.tiledMapLayer(url).addTo(map);
49+
$.get(
50+
host +
51+
'/iserver/services/map-mvt-California/rest/maps/California/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY',
52+
function (style) {
53+
style.layers[0].paint['background-color'] = 'rgba(168,209,221,0)';
54+
var gl = L.mapboxGL({
55+
renderWorldCopies: false,
56+
style: style,
57+
crs: 'EPSG:4326'
58+
}).addTo(map);
59+
// 获取 mapboxgl 地图
60+
// var mapboxglMap = gl.getMapboxMap();
61+
}
62+
);
63+
</script>
64+
</body>
65+
</html>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -669,6 +669,7 @@ window.examplesResources = {
669669
"title_mask":'Layer Mask',
670670
"title_objectdetection":"Machinelearning Result Overlay(Objectdetection)",
671671
"title_binaryclassification":"Machinelearning Result Overlay(Binaryclassification)",
672+
"title_mvt_mapboxgl":"MVT (via MapboxGL)",
672673

673674
"text_service_name":"Name",
674675
"text_service_type":"Type",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -620,6 +620,7 @@ window.examplesResources = {
620620
"title_mask":'图层掩膜',
621621
"title_objectdetection":"机器学习结果叠加（目标检测）",
622622
"title_binaryclassification":"机器学习结果叠加（二元分类）",
623+
"title_mvt_mapboxgl":"MVT (叠加 MapboxGL)",
623624

624625
"text_service_name":"名称",
625626
"text_service_type":"类型",

0 commit comments

Comments
 (0)