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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
							<!--********************************************************************
* 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_lineStyle"></title>
    <script type="text/javascript" include='ol-mapbox-style' src="../../dist/ol/include-ol.js"></script>
    <style>
        ol {
            list-style: none;
            margin-left: -30px;
        }

        .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;
            color: white;
            font-size: 15px;
            font-weight: bold;
        }

        #tipsPopup {
            background-color: rgba(0, 60, 136, 0.7);
            color: red;
            display: none;
            padding: 15px;
            color: white;
            font-size: 15px;
            font-weight: bold;
            border-radius: 5px;
            box-shadow: 0px -1px 46px 0px rgba(0, 0, 0, 0.75);
        }

        .editContainer {
            position: absolute;
            right: 15px;
            top: 50px;
            display: block;
            transition: opacity 100ms ease-in;
            border-radius: 5px;
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            box-shadow: 0px 0px 13px 0px rgba(25, 34, 41, 1);
            background: white;
            width: 300px;
        }

        .editContainer>.mainPanelHeader {
            width: 100%;
            padding: 8px 15px;
            background: rgb(0, 131, 203);
            font-size: 17px;
            font-weight: bold;
            color: white;

        }

        .editContainer>.mainPanelHeader>.closeButton {
            float: right;
            padding-left: 80px;
            font-size: 20px;
            cursor: pointer;
        }

        .editContainer>.editPanel {
            width: 100%;
            border: 1px solid grey;
            background: white;
            color: grey;

        }
        .layerType{
           margin-top: 20px;
           font-size: 16px;
           font-weight: bold;
        }
        .borderPanel,
        .fillPanel {
            background: white;
            margin: 10px;
            padding: 8px 12px 3px;
            box-shadow: inset 0px 0px 7px 0px rgba(43, 40, 43, 1);
        }

        .fillPanel {
            padding-right: 20px;
        }

        .borderPanelHeader,
        .fillPanelHeader {
            padding: 8px 0 8px;
            font-size: 15px;
        }

        .irs {
            height: 40px !important;
        }

        .irs-line,
        .irs-line-left,
        .irs-line-mid,
        .irs-line,
        .irs-bar,
        .irs-bar-edge {
            height: 5px !important;
        }

        .irs-min,
        .irs-max,
        .irs-from,
        .irs-to,
        .irs-single {
            font-size: 10px !important;
        }

        .irs-slider {
            top: 27px !important;
            width: 15px !important;
            height: 15px !important;
        }

        .alertContainer {
            width: 100%;
            text-align: center;
            position: absolute;
            top:10px;
        }
        .alertContainer > .alert{
            margin: auto;
            width: 300px;
        }
    </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>
    <div id="tipsPopup">
        <span data-i18n="resources.text_tipsPopup_subtext"></span>
    </div>
    <div class="alertContainer">
        <div class="alert alert-info alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <strong data-i18n="resources.text_alert_subtext"></strong>
        </div>
</div>
    <div class="editContainer" id="editorContainer">
        <div class="mainPanelHeader">
            <span data-i18n="resources.text_LineStyleEditor"></span>
            <span id="layer_name"></span>
            <span class="closeButton" id="closeButton">×</span>

        </div>
        <div class="editPanel">
            <div class="borderPanel">
                <div class="borderPanelHeader">
                    <span data-i18n="resources.text_lineBorderLayer" class="layerType"></span>
                    <span id="border_layers_id" style="display:none"></span>
                </div>
                <ol class="borderPanelList">
                    <li>
                        <label for="border_input_lineColor" data-i18n="resources.text_lineColor_1"></label>
                        <input type="text" id="border_input_lineColor" value="" style="width:158px;" />
                        <span>
                            <img src='../img/colorpicker.png' id="border_input_lineColor_pic" style="cursor:pointer" />
                        </span>
                    </li>
                    <li class="slider">
                        <label for="border_input_lineOpacity" data-i18n="resources.text_lineOpacity"></label>
                        <input type="text" id="border_input_lineOpacity" name="border_input_lineOpacity">
                    </li>
                    <li class="slider">
                        <label for="border_input_lineWidth" data-i18n="resources.text_lineWidth_1"></label>
                        <input type="text" id="border_input_lineWidth" name="border_input_lineWidth">
                    </li>
                </ol>
            </div>
            <div class="fillPanel">
                <div class="fillPanelHeader">
                    <span data-i18n="resources.text_lineFillLayer" class="layerType"></span>
                    <span id="fill_layers_id" style = "display:none"></span>
                </div>
                <ol class="fillPanelList">
                    <li>
                        <label for="fill_input_lineColor" data-i18n="resources.text_lineColor_1"></label>
                        <input type="text" id="fill_input_lineColor" value="" style="width:158px;" />
                        <span>
                            <img src='../img/colorpicker.png' id="fill_input_lineColor_pic" style="cursor:pointer" />
                        </span>
                    </li>
                    <li class="slider">
                        <label for="fill_input_lineOpacity" name="fill_input_lineOpacity" data-i18n="resources.text_lineOpacity"></label>
                        <input type="text" id="fill_input_lineOpacity">
                    </li>
                    <li class="slider">
                        <label for="fill_input_lineWidth" data-i18n="resources.text_lineWidth_1"></label>
                        <input type="text" id="fill_input_lineWidth" name="fill_input_lineWidth">
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <script type="text/javascript" include="bootstrap,jquery,colorpicker,ionRangeSlider" src="../js/include-web.js"></script>

    <script type="text/javascript">

        var url = (window.isLocal ? window.server : "https://iserver.supermap.io") +
            "/iserver/services/map-mvt-California/rest/maps/California";
        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;
            var meterPerMapUnitValue = Math.PI * 2 * 6378137 / 360;
            return 1 / (scale * 96 * inchPerMeter * meterPerMapUnitValue);
        };
        var vectorLayer;
        var resolutions = getResolutions(10, 0.00000346145499464224, 0, 16);
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [-122.228687503369, 38.1364932162598],
                zoom: 13,
                minZoom: 13,
                maxZoom: 13,
                projection: 'EPSG:4326',
                resolutions: resolutions
            })
        });
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var editorContainer = document.getElementById('editorContainer');
        var tipsPopupContainer = document.getElementById('tipsPopup');
        info = new ol.control.Control({
            element: container
        });
        var editorContainerInfo = new ol.control.Control({
            element: editorContainer
        });
        info.setMap(map);
        editorContainerInfo.setMap(map);
        map.addControl(info);
        map.addControl(editorContainerInfo);
        var tipsPopup = new ol.Overlay({
            element: tipsPopupContainer,
            offset: [15, -50]
        });

        map.addOverlay(tipsPopup);
        var format = new ol.format.MVT({
            featureClass: ol.Feature
        });
        var style = new ol.supermap.MapboxStyles({
            url: url,
            map: map,
            resolutions: resolutions
        })
        var source = new ol.source.VectorTileSuperMapRest({
            url: url,
            projection: 'EPSG:4326',
            tileGrid: new ol.tilegrid.TileGrid({
                resolutions: resolutions,
                origin: [-180, 90],
                tileSize: 512
            }),
            tileType: 'ScaleXY',
            format: format
        })
        style.on('styleloaded', function () {
            vectorLayer = new ol.layer.VectorTile({
                //设置避让参数
                declutter: true,
                source: source,
                style: style.getStyleFunction()
            });
            map.addLayer(vectorLayer);
            setDefaultEditor("Motorway_L@California");
        })

        map.on('pointermove', function (e) {
            var features = map.getFeaturesAtPixel(e.pixel);
            if (!features || features.length === 0) {
                content.innerHTML = '';
                container.style.opacity = 0;
                tipsPopupContainer.style.display = "none";
                return;
            }
            content.innerHTML = "Layer: " + features[0].get('layer') + "<br />" + (features[0].get('NAME') ?
                "Name:  " + features[0].get('NAME') : "");
            container.style.opacity = 1;

            var layerName = features[0].get('layer');
            var layerStyleArr = style.getStylesBySourceLayer(layerName);
            if (layerStyleArr[0].type !== 'line') {
                tipsPopupContainer.style.display = "none";
                return;
            }

            tipsPopupContainer.style.display = "block";
            tipsPopup.setPosition(e.coordinate);
        });


        // 获取线边框jq对象
        var borderJqObject = [];
        borderJqObject['id'] = $("#border_layers_id");
        borderJqObject['lineColor'] = $("#border_input_lineColor");
        borderJqObject['lineOpacity'] = $("#border_input_lineOpacity");
        borderJqObject['lineWidth'] = $("#border_input_lineWidth");
        borderJqObject['pic'] = $("#border_input_lineColor_pic");
        // 获取线填充jq对象
        var fillJqObject = [];
        fillJqObject['id'] = $("#fill_layers_id")
        fillJqObject['lineColor'] = $("#fill_input_lineColor");
        fillJqObject['lineOpacity'] = $("#fill_input_lineOpacity");
        fillJqObject['lineWidth'] = $("#fill_input_lineWidth");
        fillJqObject['pic'] = $("#fill_input_lineColor_pic");

        // 点击弹出编辑框
        map.on('click', function (e) {
            var features = map.getFeaturesAtPixel(e.pixel);
            if (!features || features.length === 0) {
                resetStyle(borderJqObject);
                resetStyle(fillJqObject);
                return;
            }
            var layerName = features[0].get('layer');
            setDefaultEditor(layerName);
        });

        // 展示图层信息
        function showLayerInfo(layerInfo, jqObject) {
            var layerStyle = layerInfo.style;
            $('#layer_name').html(layerInfo.layerName);
            jqObject['id'].html(layerInfo.id);
            jqObject['lineColor'].val(layerStyle.lineColor);
            jqObject['lineOpacity'].val(layerStyle.lineOpacity);
            jqObject['lineWidth'].val(layerStyle.lineWidth);
            // 取色器
            colorPicker(jqObject);
            var lineOpacityOption = { min: "0", max: "1", step: "0.1", from: layerStyle.lineOpacity, opacitySlider: "true" };
            var lineWidthOption = { min: "0", max: "50", step: "0.5", from: layerStyle.lineWidth, opacitySlider: "false" }
            // 透明度滑块
            slider(jqObject['lineOpacity'], jqObject, lineOpacityOption);
            // 宽度滑块
            slider(jqObject['lineWidth'], jqObject, lineWidthOption);
        }

        // 设置取色器模块
        function colorPicker(jqObject) {
            jqObject['pic'].colorpicker({
                ishex: false,
                fillcolor: true,
                event: 'mouseover',
                target: jqObject['lineColor'],
                success: function () {
                    var lineColor = jqObject['lineColor'].val().toString().match(/\d+/g);
                    var opacity = jqObject['lineOpacity'].val();
                    lineColor.push(opacity);
                    lineColor = "rgba(" + lineColor.join(",") + ")"
                    var styleOption = getEditOption(jqObject);
                    styleOption.style.lineColor = lineColor;
                    changeStyle(styleOption);
                }
            });
        }

        // 设置滑动模块
        function slider(target, jqObject, option) {
            target.ionRangeSlider({
                type: "single",
                min: option.min,
                max: option.max,
                step: option.step,
                from: option.from,
                onChange: function (data) {
                    var data = data.from;
                    var styleOption = getEditOption(jqObject);
                    if (option.opacitySlider === "true") {
                        styleOption.style.lineOpacity = data;
                    } else {
                        styleOption.style.lineWidth = data;
                    }
                    changeStyle(styleOption);
                }
            });
            var sliderElement = target.data("ionRangeSlider");
            sliderElement.update({
                from: option.from
            });
        }


        // 改变样式
        function changeStyle(styleOption) {
            style.updateStyles([{
                "id": styleOption.id,
                "layout":{
                    "line-cap":'round'
                },
                "paint": {
                    "line-width": styleOption.style.lineWidth,
                    "line-color": styleOption.style.lineColor
                }
            }]);
            source.changed();
        }

        // 获得编辑信息
        function getEditOption(jqObject) {
            var layerId = jqObject['id'].html();
            var lineColor = jqObject['lineColor'].val();
            var lineOpacity = jqObject['lineOpacity'].val();
            var lineWidth = jqObject['lineWidth'].val();

            lineColor = lineColor.toString().match(/\d+/g);
            lineColor.push(lineOpacity);
            lineColor = "rgba(" + lineColor.join(",") + ")";

            return {
                id: layerId,
                style: {
                    lineColor: lineColor,
                    lineWidth: lineWidth
                }
            }
        }

        // 获取图层信息
        function getLayerInfo(layerName, layerStyle, layerType) {
            if (layerType !== "line") {
                resetStyle(borderJqObject);
                resetStyle(fillJqObject);
                return;
            }
            var styleObj = getStyleObject(layerStyle);
            return {
                layerName: layerName,
                id: layerStyle.id,
                style: styleObj
            }
        }

        // 获取图层样式
        function getStyleObject(layerStyle) {
            var type = layerStyle.type;
            var paint = layerStyle.paint;
            var lineColor = paint["line-color"].toString().match(/\d+/g);
            if (lineColor[4]) {
                var opacity = lineColor[3].toString() + "." + lineColor[4].toString();
            }
            var opacity = lineColor[3].toString();
            lineColor = lineColor.slice(0, 3);
            lineColor = "rgb(" + lineColor.join(",") + ")";
            return {
                "lineColor": lineColor,
                "lineOpacity": opacity,
                "lineWidth": paint["line-width"]
            }
        }

        function resetStyle(jqObject) {
            jqObject['id'].html("");
            jqObject['lineColor'].val("");
            jqObject['lineOpacity'].val("");
            jqObject['lineWidth'].val("")

            editorContainer.style.display = "none";
        }

        // 设置默认编辑器
        function setDefaultEditor(layerName) {
            var layerStyleArr = style.getStylesBySourceLayer(layerName);
            if (layerStyleArr[0].type !== 'line') {
                resetStyle(borderJqObject);
                resetStyle(fillJqObject);
                return;
            }
            var layerStyle = [];
            for (var i = 0; i < layerStyleArr.length; i++) {
                if (layerStyleArr[i].maxzoom === 14) {
                    layerStyle.push(layerStyleArr[i]);
                }
            }
            var layerType = layerStyle[0].type;

            // 线边框图层样式
            var lineBorderStyle = layerStyle[0];
            // 线填充图层样式
            var lineFillStyle = layerStyle[1];
            var lineBorderInfo = getLayerInfo(layerName, lineBorderStyle, layerType);
            var lineFillInfo = getLayerInfo(layerName, lineFillStyle, layerType);

            showLayerInfo(lineBorderInfo, borderJqObject, "boder");
            showLayerInfo(lineFillInfo, fillJqObject, "fill");
            editorContainer.style.display = "block";
        }

        // 点击关闭编辑器
        $('#closeButton').click(function () {
            editorContainer.style.display = "none";
        });

    </script>
</body>

</html>