fuyuhang
/
Project_yhfu
镜像自地址 http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_defaultStyle"></title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary"
     style="position: absolute;top: 10px;right: 10px;text-align: center;z-index: 800;border-radius: 4px;">
    <div class='panel-heading' id="panelheading">
        <h5 class='panel-title text-center' data-i18n="resources.title_defaultStyle"></h5></div>
    <div class='panel-body content' id="panelbodycontent">
        <div class='panel'>
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.text_lineWidth"></span>
                <input type='text' class='form-control' id='lineWidth' value='2' onchange="lineWidthChanges()"/>
            </div>
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.text_lineType"></span>
                <select class='form-control' id="lineStyle" onchange="lineStyleChanges()"></select>
            </div>
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.text_lineColor"></span>
                <input type="text" id="lineColor" value="" class='form-control'/>
                <span class='input-group-addon'><img src='../img/colorpicker.png' id="cp1"
                                                     style="cursor:pointer; z-index: 9999;"/></span>
            </div>

            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.text_markerWidth"></span>
                <input type='text' class='form-control' id='symbolWidth' value='40' onchange="symbolWidthChanges()"/>
            </div>
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.text_markerHeight"></span>
                <input type='text' class='form-control' id='symbolHeight' value='40' onchange="symbolHeightChanges()"/>
            </div>
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.text_defaultStyle"></span>
                <select class='form-control' id='defaultStyleFlag' onchange="defaultStyleFlagChanges()">
                    <option value='0'>false</option>
                    <option value='1'>true</option>
                </select>
            </div>
        </div>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_drawMarker" onclick="plotSymbol()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_cancelMarker" onclick="PlottingDrawCancel()"/>
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap-css,responsive,colorpicker" src="../js/include-web.js"></script>
<script type="text/javascript" include="iclient-leaflet-css,iclient-plot-leaflet"
        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";
    var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
    var map, symbolLibManager, plotting;
    var item = ["实线","长虚线","由点构成的直线","由线划线段组成的直线","由重复的线划点图案构成的直线"],
            select, lineStyle;
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: [35,104],
        maxZoom: 18,
        zoom: 3
    });
    L.supermap.tiledMapLayer(url).addTo(map);
    var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
    plottingLayer.addTo(map);
    var drawControl = L.supermap.plotting.drawControl(plottingLayer);
    drawControl.addTo(map);
    var editControl = L.supermap.plotting.editControl();
    editControl.addTo(map);
    plotting = L.supermap.plotting.getControl(map, serverUrl);
    function loadSymbolLib() {
        symbolLibManager = plotting.getSymbolLibManager();
        symbolLibManager.on(SuperMap.Plot.Event.initializecompleted, initializeCompleted);
        symbolLibManager.initializeAsync();
    }
    function initializeCompleted() {
        initHtml();
    }
    function initHtml() {
        document.getElementById("lineWidth").value = plotting.getDefaultStyle().lineWidth;
        document.getElementById("lineStyle").value = item[0];
        //document.getElementById("lineStyle").value = item[plotting.getDefaultStyle().lineType];
        document.getElementById("lineColor").value = plotting.getDefaultStyle().lineColor;
        document.getElementById("symbolWidth").value = plotting.getDefaultStyle().dotSymbolSize;
        document.getElementById("symbolHeight").value = plotting.getDefaultStyle().dotSymbolSize;
        if (plotting.getDefaultStyle().defaultFlag)
            document.getElementById("defaultStyleFlag").value = 1;
        else
            document.getElementById("defaultStyleFlag").value = 0;
    }


    function selectLineType() {

        var select = document.getElementById("lineStyle");
        var type;
        for (var i = 0; i < select.children.length; i++) {
            if (select.children[i].selected) {
                type = select.children[i].value;

            }
        }
        if (type === item[0]) {
            lineStyle = 0;
        }
        else if (type === item[1]) {
            lineStyle = 1;
        }
        else if (type === item[2]) {
            lineStyle = 2;
        }
        else if (type === item[3]) {
            lineStyle = 3;
        }
        else if (type === item[4]) {
            lineStyle = 4;
        }
        var obj = new Object();
        obj.selectValue = type;
        obj.lineStyle = lineStyle;
        return obj;
    }

    function lineWidthChanges() {
        PlottingDrawCancel();
        plotting.getDefaultStyle().lineWidth = document.getElementById("lineWidth").value;
    }

    function lineStyleChanges() {
        PlottingDrawCancel();
        var obj=selectLineType();
        plotting.getDefaultStyle().lineType = obj.lineStyle;

    }

    function symbolWidthChanges() {
        PlottingDrawCancel();
        plotting.getDefaultStyle().dotSymbolSize = document.getElementById("symbolWidth").value;
        document.getElementById("symbolHeight").value = plotting.getDefaultStyle().dotSymbolSize;
    }

    function symbolHeightChanges() {
        PlottingDrawCancel();
        plotting.getDefaultStyle().dotSymbolSize = document.getElementById("symbolHeight").value;
        document.getElementById("symbolWidth").value = plotting.getDefaultStyle().dotSymbolSize;
    }

    function defaultStyleFlagChanges() {
        PlottingDrawCancel();
        if (document.getElementById("defaultStyleFlag").selectedIndex === 0) {
            plotting.getDefaultStyle().defaultFlag = false;
        } else {
            plotting.getDefaultStyle().defaultFlag = true;
        }
    }

    function plotSymbol() {
        drawControl.handler.serverUrl = serverUrl;
        drawControl.handler.libID = 421;
        drawControl.handler.code = 20100;
        drawControl.handler.enable();
    }
    function PlottingDrawCancel() {
        drawControl.handler.disable();
    }
    function PlottingClear() {
        plottingLayer.removeAllFeatures();
    }

    $(document).ready(function () {
        $("#cp1").colorpicker({
            ishex: true,
            fillcolor: true,
            event: 'mouseover',
            target: $("#lineColor"),
            success: lineColorChanges

        });
        $("#_creset").css("font-size", "12px");
        $("#_creset").css("padding-right", "20px");
        $("#colorpanel").css({"z-index": "9999"});
    });
    function lineColorChanges() {
        PlottingDrawCancel();
        plotting.getDefaultStyle().lineColor = document.getElementById("lineColor").value;
    }

    window.onload = function () {
        select = document.getElementById("lineStyle");
        for (var i = 0, len = item.length; i < len; i++) {
            var options = document.createElement("option");
            options.setAttribute("value", item[i]);
            options.innerHTML = item[i];
            select.appendChild(options);

        }
        loadSymbolLib();

    };
    $(document).ready(function(){
        $('#panelheading').click(function(){
            $('#panelbodycontent').toggle();
        });
    });
</script>
</body>
</html>