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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_dynamicPlot"></title>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

        #map {
            position: absolute;
            left: 250px;
            right: 0px;
            height: 100%;
        }

        #plottingMenu {
            position: absolute;
            top: 20%;
            z-index: 888;
            border-radius: 4px;
            padding-top: 2px;
            left: 265px;
            color: #000000;
            background-color: #fff;
        }

        #plottingPanel {
            float: left;
            background: #ffffff;
            width: 250px;
            height: 100%;
            border: 1px solid #3473b7;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="plottingPanel">
    <div class="easyui-panel" style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;padding:5px; width: 100%;">
        <div class="easyui-tabs" style="width: 100%;height: 100%">
            <div id="plotPanel" data-i18n="[title]resources.text_drawPanel" style="overflow: hidden"></div>
            <div id="stylePanel" data-i18n="[title]resources.text_attributePanel"></div>
        </div>
    </div>
</div>
<div id="plottingMenu" class="sticklr">
    <li>
        <a class="glyphicon plotting-glyphicon-draw-deactivate notArrow"
           data-i18n="[title]resources.text_cancelDraw"
           onclick="cancelDraw()"></a>
    </li>
    <li>
        <a class="glyphicon plotting-glyphicon-draw-removeAll notArrow"
           data-i18n="[title]resources.text_input_value_clear"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_deleteMarker" onclick="deleteSymbol()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_clearLayers" onclick="clearLayer()"
                       style="width: 70px;height: 25px ;margin:0 auto;"/></li>
        </ul>
    </li>
    <li>
        <a class="glyphicon glyphicon-pencil notArrow" data-i18n="[title]resources.text_editor"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_copy" onclick="copySymbol()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_cut" onclick="cutSymbol()"
                       style="width: 70px;height: 25px ;margin:0 auto;"/></li>
            <li><input type="button" data-i18n="[value]resources.btn_paste" onclick="pasteSymbol()"
                       style="width: 70px;height: 25px ;margin:0 auto;"/></li>
        </ul>
    </li>
    <li>
        <a class="glyphicon glyphicon-plus notArrow" data-i18n="[title]resources.text_addLayer" onclick="addPlottingLayer()"></a>
    </li>
    <li>
        <a class="glyphicon plotting-lyphicon-save-simulationMap" data-i18n="[title]resources.text_situationMapOperation"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_saveSimulationMap" onclick="saveSimulationMap()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_loadSimulationMap" onclick="loadSimulationMap()"
                       style="width: 70px;height: 25px ;margin:0 auto;"/></li>
        </ul>
    </li>
    <li>
        <a class="glyphicon glyphicon-edit notArrow" data-i18n="[title]resources.text_editMarker"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_editRectangle" onclick="editCircusRetangle()"
                       style="width:85px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_editNode" onclick="editContorPoints()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_addNode" onclick="addControlPoints()"
                       style="width: 70px;height: 25px ;margin:0 auto;"/></li>
            <li><input type="button" data-i18n="[value]resources.btn_deleteNode" onclick="removeControlPoints()"
                       style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
        </ul>
    </li>
    <li>
        <a class="glyphicon glyphicon-lock notArrow" data-i18n="[title]resources.text_aboutMode"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_lockSwitch" onclick="setPlottingLayerIsLocked()"
                       style="width:85px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_editSwitch" onclick="setPlottingLayerIsEdit()"
                       style="width:85px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_selectSwitch" onclick="setPlottingLayerIsSelected()"
                       style="width:85px;height: 25px ;margin:0 auto;"/> </li>
        </ul>
    </li>
    <li>
        <a class="glyphicon glyphicon-check notArrow"   data-i18n="[title]resources.text_multiselect" onclick="multiSelectModel()"></a>

    </li>
    <li>
        <a class="glyphicon glyphicon-align-justify notArrow" data-i18n="[title]resources.text_multiselectAlign"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_leftAlignment" onclick="setSymbolAlighLeft()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_rightAlignment" onclick="setSymbolAlighRight()"
                       style="width: 70px;height: 25px ;margin:0 auto;"/></li>

            <li><input type="button" data-i18n="[value]resources.btn_topAlignment" onclick="setSymbolAlighUp()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>

            <li><input type="button" data-i18n="[value]resources.btn_bottomAlignment" onclick="setSymbolAlighDown()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_verticalCenter" onclick="setSymbolAlighVerticalcenter()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_horizontalCenter" onclick="setSymbolAlighHorizontalcenter()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
        </ul>
    </li>

    <li>
        <a class="glyphicon glyphicon-adjust notArrow" data-i18n="[title]resources.text_avoid"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_avoidEdit" onclick="drawAvoidRegion()"
                       style="width:80px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_cancelAvoidEdit" onclick="doneAvoidEdit()"
                       style="width:80px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_deleteAvoid" onclick="deleteAvoidEdit()"
                       style="width:80px;height: 25px ;margin:0 auto;"/> </li>
        </ul>
    </li>
    <li>
        <a class="glyphicon glyphicon-gift notArrow" data-i18n="[title]resources.text_createGroup"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_group" onclick="createGroupObjects()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_flags" onclick="createDrawFlags()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_unbundling" onclick="unGroupObject()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
        </ul>
    </li>
    <li>
        <a class="glyphicon glyphicon-arrow-left notArrow" data-i18n="[title]resources.btn_undo" onclick="undo()"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-arrow-right notArrow" data-i18n="[title]resources.btn_redo" onclick="redo()"></a>
    </li>
    <li>
        <a  class="glyphicon glyphicon-th-large notArrow" data-i18n="[title]resources.text_symbolEqualSize" ></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_symbolEqualWidth" onclick="setSymbolEqualWidth()"
                       style="width:70px;height: 25px ;margin:0 auto;"> </input> </li>
            <li><input type="button" data-i18n="[value]resources.btn_symbolEqualHeight" onclick="setSymbolEqualHeight()"
                       style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
            <li><input type="button" data-i18n="[value]resources.btn_symbolEqualWidthHeight" onclick="setSymbolEqualWidthHeight()"
                       style="width:70px;height: 25px ;margin:0 auto;"> </input> </li>
        </ul>
    </li>
    <li>
        <a  class="glyphicon glyphicon-th" data-i18n="[title]resources.text_symbolDistribution" ></a>
        <ul>
            <li><input type="button"  data-i18n="[value]resources.btn_symbolLevelDistribution" onclick="setSymbolLevelDistribution()"
                       style="width:70px;height: 25px ;margin:0 auto;"> </input> </li>
            <li><input type="button" data-i18n="[value]resources.btn_symbolVerticalDistribution" onclick="setSymbolVerticalDistribution()"
                       style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
        </ul>
    </li>
</div>
<div id="contentMe" style="width:100px;background-color:#f4f4f4;box-shadow:3px 3px 3px rgba(0,0,0,0.5);position:absolute;z-index:1000; top:20px;left:100px;display:none;text-align:center;">
    <a href="javascript:void(0)" id="paste" style="border-bottom:1px solid #ccc;display:block;line-height:20px;color:#000; font-size:16px;">粘贴此处</a>
</div>
<script type="text/javascript" include="bootstrap,responsive,sticklr,plottingPanel" src="../js/include-web.js"></script>
<script type="text/javascript"  include="iclient-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" include="PlotPanel,StylePanel" src="../js/plottingPanel/PlottingPanel.Include.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;
    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);
    L.supermap.plotting.initPlotPanel("plotPanel", serverUrl, drawControl);
    L.supermap.plotting.initStylePanel("stylePanel", serverUrl, editControl);

    var plotting = L.supermap.plotting.getControl(map, serverUrl);

    map.on('contextmenu', function (event) {
        drawControl.handler.disable();

        if(editControl.canPaste()){
            var contentMe = document.getElementById("contentMe");
            contentMe.style.top = event.originalEvent.clientY + "px";
            contentMe.style.left = event.originalEvent.clientX + "px";
            contentMe.style.display = "block";
            document.getElementById("paste").onclick = function(){
                editControl.paste(event.latlng);
            };
        }
    }).on('mousemove', function (event) {
        contentMe.style.display = "none";
    });

    //取消标绘
    function cancelDraw() {
        drawControl.handler.disable();
    }

    //清空绘制
    function clearLayer() {
        cancelDraw();

        for(var i = 0; i < map.getPlottingLayers().length; i++){
            map.getPlottingLayers()[i].removeAllFeatures();
        }
    }

    //删除选中标号
    function deleteSymbol() {
        editControl.deleteSelectedFeatures();
    }

    //复制
    function copySymbol() {
        editControl.copy();
    }

    //剪切
    function cutSymbol() {
        editControl.cut();
    }

    //粘贴
    function pasteSymbol() {
        editControl.paste();
    }

    //添加图层
    function addPlottingLayer() {
        cancelDraw();

        var plottingLayerName = "plottingLayer_" + Math.ceil(Math.random() * 1000);
        var plottingLayerNew = L.supermap.plotting.plottingLayer(plottingLayerName, serverUrl);
        drawControl.setDrawingLayer(plottingLayerNew);
        plottingLayerNew.addTo(map);

        alert("标绘图层"+plottingLayerNew.name+"增加成功!");
    }

    //保存态势图
    function saveSimulationMap() {
        cancelDraw();
        plotting.getSitDataManager().saveAsSmlFile("situationMap");
    }

    function loadSimulationMap() {
        plotting.getSitDataManager().openSmlFileOnServer("situationMap", function(evt){
            drawControl.setDrawingLayer(evt.sitDataLayers[0]);
            plottingLayer = evt.sitDataLayers[0];
        });
    }

    function editCircusRetangle() {
        editControl.setEditMode(SuperMap.Plot.EditMode.EDITCIRCUMRECTANGLE);
    }

    function editContorPoints() {
        editControl.setEditMode(SuperMap.Plot.EditMode.EDITCONTROLPOINT);
    }

    function addControlPoints() {
        editControl.setEditMode(SuperMap.Plot.EditMode.ADDCONTROLPOINT);
    }
    function removeControlPoints(){
        editControl.setEditMode(SuperMap.Plot.EditMode.REMOVECONTROLPOINT);
    }
    //切换多选模式
    function multiSelectModel() {
        editControl.multiSelect();
    }

    //多选对齐--左对齐
    function setSymbolAlighLeft() {
        editControl.align(SuperMap.Plot.AlignType.LEFT);
    }

    //多选对齐--右对齐
    function setSymbolAlighRight() {
        editControl.align(SuperMap.Plot.AlignType.RIGHT);
    }

    //多选对齐--上对齐
    function setSymbolAlighUp() {
        editControl.align(SuperMap.Plot.AlignType.UP);
    }

    //多选对齐--下对齐
    function setSymbolAlighDown() {
        editControl.align(SuperMap.Plot.AlignType.DOWN);
    }

    //多选对齐--竖直居中对齐
    function setSymbolAlighVerticalcenter() {
        editControl.align(SuperMap.Plot.AlignType.VERTICALCENTER);
    }

    //多选对齐--水平居中对齐
    function setSymbolAlighHorizontalcenter() {
        editControl.align(SuperMap.Plot.AlignType.HORIZONTALCENTER);
    }

    //切换图层是否锁定
    function setPlottingLayerIsLocked() {
        if (plottingLayer.getLocked() === true) {
            plottingLayer.setLocked(false);
        } else {
            plottingLayer.setLocked(true);
        }
    }

    //切换图层是否可编辑模式
    function setPlottingLayerIsEdit() {
        if (plottingLayer.getEditable() === true) {
            plottingLayer.setEditable(false);
        } else {
            plottingLayer.setEditable(true);
        }
    }

    //切换图层是否可选择模式
    function setPlottingLayerIsSelected() {
        if (plottingLayer.getSelected() === true) {
            plottingLayer.setSelected(false);
        } else {
            plottingLayer.setSelected(true);
        }
    }

    function drawAvoidRegion(){
        if (editControl._avoidEditing === false && editControl.getSelectedFeatures().length === 0) {
            return;
        }else{
            editControl.avoidEdit(true);
        }
    }
    function doneAvoidEdit(){
        editControl.avoidEdit(false);
    }
    function deleteAvoidEdit(){
        if (editControl._avoidEditing === false && editControl.getSelectedFeatures().length === 0) {
            return ;
        }else if(editControl._avoidEditing === true){
            editControl.avoidEdit(false);
            editControl.getSelectedFeatures()[0].removeAvoidRegions();
        }
    }

    //创建组合对象
    function createGroupObjects() {
        var features = editControl.getSelectedFeatures();
        if (features.length >= 2) {
            var groupObject = plottingLayer.createGroupObject(features);
            if(!!groupObject){
                editControl.selectFeatures(groupObject);
            }
            var feature = plottingLayer.features[plottingLayer.features.length-1];
            var transaction = new SuperMap.Plot.Transaction();
            transaction.transType = SuperMap.Plot.TransactionType.EDIT;
            var transInfo = new SuperMap.Plot.TransactionInfo();
            transInfo.layerId = plottingLayer._leaflet_id;
            transInfo.uuid = feature.uuid;
            transInfo.functionName = "createGroupObject";
            transInfo.undoParams = [feature];
            transInfo.redoParams = [features];
            transaction.transInfos.push(transInfo);
            L.supermap.plotting.getControl().getTransManager().add(transaction);
        }

    }

    //创建多旗
    function createDrawFlags() {
        var features = editControl.getSelectedFeatures();
        if (features.length >= 2) {
            var flagObject = plottingLayer.createFlags(features);
            if(!!flagObject){
                editControl.selectFeatures(flagObject);
            }
            var transaction = new SuperMap.Plot.Transaction();
            transaction.transType = SuperMap.Plot.TransactionType.EDIT;
            var transInfo = new SuperMap.Plot.TransactionInfo();
            transInfo.layerId = flagObject.layer._leaflet_id;
            transInfo.uuid = flagObject.uuid;
            transInfo.functionName = "createFlags";
            transInfo.undoParams = [flagObject];
            transInfo.redoParams = [features];
            transaction.transInfos.push(transInfo);
            L.supermap.plotting.getControl().getTransManager().add(transaction);
        }
    }

    //解绑组合对象
    function unGroupObject() {
        var features = editControl.getSelectedFeatures();
        for (var i = features.length - 1; i >= 0; i--) {
            if (features[i] instanceof L.supermap.plotting.GroupObject) {
                var subLayers = plottingLayer.unGroupObject(features[i]);
                editControl.selectFeatures(subLayers);
            }

        }
    }

    function undo(){
        editControl.avoidEdit(false);
        plotting.getTransManager().undo();
        editControl.fire(SuperMap.Plot.Event.featuresmodified);//刷新属性面板
    }

    function redo(){
        editControl.avoidEdit(false);
        plotting.getTransManager().redo();
        editControl.fire(SuperMap.Plot.Event.featuresmodified);//刷新属性面板
    }

    //等大
    //等宽
    function setSymbolEqualWidth(){
        editControl.equalLarge(SuperMap.Plot.EqualLargeType.WIDTH);
    }
    //等高
    function setSymbolEqualHeight(){
        editControl.equalLarge(SuperMap.Plot.EqualLargeType.HEIGHT);
    }
    //等宽高
    function setSymbolEqualWidthHeight(){
        editControl.equalLarge(SuperMap.Plot.EqualLargeType.SAME);
    }

    //均匀分布
    //横向均匀分布
    function setSymbolLevelDistribution(){
        editControl.uniformDistribution(SuperMap.Plot.UniformDistributionType.LEVEL);
    }

    //纵向均匀分布
    function setSymbolVerticalDistribution(){
        editControl.uniformDistribution(SuperMap.Plot.UniformDistributionType.VERTICAL);
    }

    document.onkeydown = function (event) {
        var event = event || window.event;
        if(event && event.keyCode === 46){//Delete键
            editControl.deleteSelectedFeatures();
        }
    }

    // document.oncontextmenu = function (event) {
    //     var event = event || window.event;
    //     if(event.button == 2){
    //         drawControl.handler.disable();
    //     }
    // }

</script>
</body>
</html>