首页 / 浏览问题 / WebGIS / 问题详情
mapbox gl 无法加载 wmts-china
8EXP 2022年12月18日
你好, 为什么我用mapboxgl加载iserver发布的 wmts-china服务,无法正常加载?瓦片是错乱的,都是蓝色。而天地图4490瓦片可以正常加载。

map.addSource('wmtschina-source', { 'type': 'raster', 'tiles': [  

'http://127.0.0.1:8090/iserver/services/map-china400/wmts-china/China/default/ChinaPublicServices_China/{z}/{y}/{x}.png' ], 'tileSize': 256 });

map.addLayer({ 'id': 'wmtschina-layer', 'type': 'raster', 'source': 'wmtschina-source', 'paint': {} }

);

1个回答

您好,wmts-china的矩阵集与默认的mapboxgl的层级不对应,推荐使用wmts100接口对接map-china400服务,修改原wmts-china接口方式比较繁琐且需要修改iServer配置文件,不推荐。

以下为通过wmts100接口添加服务至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"></title>
    <script type="text/javascript" src="../js/include-web.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" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": attribution,
                        "type": "raster",
                        "tiles": ['https://iserver.supermap.io/iserver/services/map-china400/wmts100?layer=China_4490&style=default&tilematrixset=Custom_China_4490&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}'],
                        "tileSize": 256
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            center: [0, 0], // starting position
            zoom: 0, // starting zoom
            crs: 'EPSG:4490',
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

    </script>
</body>

</html>

420EXP 2022年12月19日
...