fuyuhang
/
Project_yhfu
zrcadlo http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_mvtVectorLayer_mapboxStyle_landuse"></title>
    <script type="text/javascript" include='ol-mapbox-style,proj4' src="../../dist/ol/include-ol.js"></script>
    <style>
        .ol-popup {
            position: absolute;
            background-color: rgba(0, 60, 136, 0.7);
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #cccccc;
            bottom: 20px;
            left: 10px;
            opacity: 0;
            transition: opacity 100ms ease-in;
        }
    </style>
</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>
    <div id="popup" class="ol-popup">
        <div id="popup-content"></div>
    </div>
    <script type="text/javascript">
        var url = (window.isLocal ? window.server : "https://iserver.supermap.io") +
            "/iserver/services/map-mvt-landuse/rest/maps/landuse";
        proj4.defs("EPSG:2362",
            "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs "
        );
        ol.proj.proj4 && ol.proj.proj4.register(proj4);
        getResolutions = function (zoom, scale, targetMinZoom, targetMaxZoom) {
            var res = scaleToResolution(scale);
            var minRes = res * Math.pow(2, zoom - targetMinZoom);
            var resolutions = [];
            for (var index = 0; index < targetMaxZoom - targetMinZoom + 1; index++) {
                resolutions.push(minRes / Math.pow(2, index));
            }
            return resolutions;

        }
        scaleToResolution = function (scale) {
            var inchPerMeter = 1 / 0.0254;
            return 1 / (scale * 96 * inchPerMeter);
        };
        var vectorLayer;
        //通过缓存sci文件已知第9级的比例尺是0.00000346726346971252，计算0到16级的分辨率
        var resolutions = getResolutions(9, 0.00000346726346971252, 0, 16);
        var projection = ol.proj.get('EPSG:2362');
        projection.setExtent([32876993.777095847, -10001970.421227315, 52880934.619550481, 10001970.421227315])
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [37981118.1854434, 2645345.86991791],
                zoom: 13,
                minZoom: 11,
                maxZoom: 15,
                projection: projection,
                resolutions: resolutions
            })
        });
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        info = new ol.control.Control({
            element: container
        });
        info.setMap(map);
        map.addControl(info);
        var style = new ol.supermap.MapboxStyles({
            map: map,
            url: url,
            // source: 'landuse',
            resolutions: resolutions
        })
        style.on('styleloaded', function () {
            vectorLayer = new ol.layer.VectorTile({
                //设置避让参数
                declutter: true,
                source: new ol.source.VectorTileSuperMapRest({
                    url: url,
                    projection: projection,
                    tileGrid: new ol.tilegrid.TileGrid({
                        resolutions: resolutions,
                        origin: [32876993.777095847, 10001970.421227315],
                        tileSize: 512
                    }),
                    tileType: 'ScaleXY',
                    format:  new ol.format.MVT()
                }),
                style: style.getStyleFunction()
            });
            map.addLayer(vectorLayer);
        })
    </script>
</body>

</html>