作者：yx
前言
最近有些小伙伴在iportal中通过地图工作室保存地图后，想要在iclient中对接展示出来，接下来就介绍一下在leaflet和mapboxgl中如何对接
一、leaflet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title data-i18n="resources.title_mvt_mapboxgl"></title>
<style>
.leaflet-gl-layer.mapboxgl-map {
z-index: 1;
}
</style>
<script type="text/javascript" src="../day01/js/include-web.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
<script type="text/javascript" include="leaflet-mapbox-gl,mapbox-gl-enhance" src="../day01/dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map', {
center: [0,0],
zoom: 2,
// minZoom: 0,
// maxZoom: 5
});
$.get('http://localhost:8190/iportal/web/maps/159907140/map.json',
function (data) {
data.version=8
var gl = L.mapboxGL({
renderWorldCopies: false,
style: data,
// minZoom: 0,
// maxZoom: 5
}).addTo(map);
}
);
</script>
</body>
</html>
二、mapboxgl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" include="mapbox-gl-enhance" src="../dist/mapboxgl/include-mapboxgl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
$.get("http://localhost:8190/iportal/web/maps/159907140/map.json",function(data){
data.version=8
var map = new mapboxgl.Map({
container: 'map', // container id
style:data,
crs: 'EPSG:3857', // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
center: [0, 0],
zoom: 2
});
map.on('load', function() {
//从 iServer 查询
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
});
})
</script>
</body>
</html>
总结
地图工作室是mapboxgl写的，推荐用mapboxgl对接，leaflet对接的话采用L.mapboxGL接口实现