fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!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="../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>
        <!-- 叠加非3857的地图，请使用mapbox-gl-enhance -->
        <script
            type="text/javascript"
            include="mapbox-gl-enhance"
            src="../../dist/mapboxgl/include-mapboxgl.js"
        ></script>
        <!-- 需引入三方插件 mapbox-gl-leaflet https://github.com/mapbox/mapbox-gl-leaflet -->
        <script type="text/javascript" include="leaflet-mapbox-gl" src="../../dist/leaflet/include-leaflet.js"></script>

        <script type="text/javascript">
            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
            var url = host + '/iserver/services/map-china400/rest/maps/China_4326';
            
            // 为与mapboxgl的级别相匹配，leaflet的分辨率应设置为第0级为全球范围宽度除以瓦片宽度256.
            // 常见坐标系第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
            var topResolution = 360.0 / 256;
            var resolutions = [];
            for (var zoom = 0; zoom < 22; zoom++) {
                resolutions.push(topResolution / Math.pow(2, zoom));
            }
            var crs = L.Proj.CRS('EPSG:4326', {
                origin: [-180, 90],
                resolutions: resolutions
            });
            var map = L.map('map', {
                center: [37.71194458007813, -122.24143981933594],
                zoom: 11,
                crs: crs,
                minZoom: 11,
                maxZoom: 14
            });
            L.supermap.tiledMapLayer(url).addTo(map);
            $.get(
                host +
                    '/iserver/services/map-mvt-California/rest/maps/California/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY',
                function (style) {
                    style.layers[0].paint['background-color'] = 'rgba(168,209,221,0)';
                    var gl = L.mapboxGL({
                        renderWorldCopies: false,
                        style: style,
                        crs: 'EPSG:4326',
                        // mapboxgl zoom 和leaflet zoom 差一级
                        minZoom:10,
                        maxZoom: 13
                    }).addTo(map);
                    // 获取 mapboxgl 地图
                    // var mapboxglMap = gl.getMapboxMap();
                }
            );
        </script>
    </body>
</html>