fuyuhang
/
Project_yhfu
зеркало из http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!--********************************************************************
* 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"></title>
    <style>
        #menu {
            position: absolute;
            z-index: 2;
            padding: 6px 0 6px 10px;
            margin-right: 20px;
            left: 60px;
            top: 10px;
            float: left;
            border-radius: 4px;
            -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: #fff;

        }

        label {
            margin: 0;
            margin-right: 10px;
        }

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 280px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
        }
    </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">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
    <div id='menu' class="mapboxgl-ctrl">
        <input id='basic' type='radio' name='rtoggle' value='basic' checked='checked'>
        <label for='basic' data-i18n="resources.text_vectorDefaultStyle"></label>
        <input id='dark' type='radio' name='rtoggle' value='dark'>
        <label for='dark' data-i18n="resources.text_darkBlueStyle"></label>
        <input id='fiordcolor' type='radio' name='rtoggle' value='fiordcolor'>
        <label for='fiordcolor' data-i18n="resources.text_fiordStyle"></label>
        <input id='klokantech' type='radio' name='rtoggle' value='klokantech'>
        <label for='klokantech' data-i18n="resources.text_klokantechStyle"></label>
        <input id='osm' type='radio' name='rtoggle' value='OSM'>
        <label for='osm' data-i18n="resources.text_osmStyle"></label>
        <input id='positron' type='radio' name='rtoggle' value='positron'>
        <label for='positron' data-i18n="resources.text_positronStyle"></label>
    </div>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/i18next/10.0.7/i18next.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-i18next/1.2.1/jquery-i18next.min.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src=".././locales/zh-CN/resources.js"></script>
    <script type="text/javascript" src="../js/localization.js"></script>
    <script>
        Localization.initializeI18N('../', function () {
            Localization.localize();
            Localization.initGlobal();
        });
    </script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" include='ol-mapbox-style' src="../../dist/ol/include-ol.js"></script>
    <script type="text/javascript">
        var url = (window.isLocal ? window.server : "https://iserver.supermap.io") +
            "/iserver/services/map-beijing/rest/maps/beijingMap";
        /**
         * Elements that make up the popup.
        */
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var closer = document.getElementById('popup-closer');
        /**
         * Create an overlay to anchor the popup to the map.
         */
        var overlay = new ol.Overlay({
            element: container,
            autoPan: true,
            autoPanAnimation: {
                duration: 250
            }
        });


        /**
         * Add a click handler to hide the popup.
         * @return {boolean} Don't follow the href.
         */
        closer.onclick = function () {
            overlay.setPosition(undefined);
            closer.blur();
            return false;
        };

        var stylesJson = {
            'basic': "beijing.json",
            'dark': "beijingDark.json",
            'fiordcolor': "beijingFiord.json",
            'klokantech': "beijingKlokantech.json",
            'osm': "beijingOSM.json",
            'positron': "beijingPositron.json"
        }
        var vectorLayer, currentStyleID, styles = {};
        var selectID = 'basic';
        var map = new ol.Map({
            target: 'map',
            overlays: [overlay],
            controls: ol.control.defaults({
                    attributionOptions: {
                        collapsed: false
                    }
                })
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                maxResolution: 40075016.68557849 / 512,
                center: ol.proj.fromLonLat([116.4, 39.9]),
                zoom: 11
            })
        });
        var targetStyle;
        switchStyle(null, 'basic');
        map.on('click', function (e) {
            var features = map.getFeaturesAtPixel(e.pixel);
            if (features && features.length > 0) {
                var coordinate = e.coordinate;
                content.innerHTML = "Layer: " + features[0].get('layer') + "<br />" +
                    (features[0].get('NAME') ? "Name:  " + features[0].get('NAME') + "<br />" : "") +
                    (features[0].get('道路名称') ? "道路名称:  " + features[0].get('道路名称') + "<br />" : "");
                overlay.setPosition(coordinate);
                targetStyle.setSelectedId(features[0].getId(), features[0].get('layer'));
                vectorLayer.changed();
            }

        });
        var layerList = document.getElementById('menu');
        var inputs = layerList.getElementsByTagName('input');

        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = switchStyle;
        }

        function switchStyle(e, targetStyleID) {
            selectID = targetStyleID || e.target.id;
            if (selectID === currentStyleID) {
                return;
            }
            overlay.setPosition(undefined);
            closer.blur();
            if (styles[selectID]) {
                targetStyle.setStyle(styles[selectID]);
            } else {
                $.get('../data/styles/' + stylesJson[selectID], function (json) {
                    styles[selectID] = json;
                    if (targetStyle) {
                        targetStyle.setStyle(json);
                    } else {
                        targetStyle = new ol.supermap.MapboxStyles({
                            source: 'vector-tiles',
                            map: map,
                            style: json
                        });
                        targetStyle.on('styleloaded', function () {
                            styleLoaded(selectID);
                        });
                    }

                })
            }
        }

        function styleLoaded(styleID) {
            currentStyleID = styleID;
            if (!vectorLayer) {
                var vectorTileOptions = {
                    url: url,
                    format: new ol.format.MVT({
                        featureClass: ol.Feature
                    }),
                    tileType: 'ViewBounds'
                };
                vectorLayer = new ol.layer.VectorTile({
                    //设置避让参数
                    declutter: true,
                    style: targetStyle.getStyleFunction(),
                    source: new ol.source.VectorTileSuperMapRest(vectorTileOptions),
                });
                map.addLayer(vectorLayer);
            } else {
                vectorLayer.changed();
            }

        }
    </script>
</body>

</html>