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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.text_editor"></title>
<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: 9999;border-radius: 4px;">
    <div class='panel-heading' id="panelheading">
        <h5 class='panel-title text-center' data-i18n="resources.text_editor"></h5></div>
    <div class='panel-body content' id="panelbodycontent">
        <input id="btn_Copy" type="button" class="btn btn-default" data-i18n="[value]resources.btn_copy" onclick="copySymbol()" />
        <input id="btn_Cut" type="button" class="btn btn-default" data-i18n="[value]resources.btn_cut" onclick="cutSymbol()" />
        <input id="btn_Paste" type="button" class="btn btn-default" data-i18n="[value]resources.btn_paste" onclick="pasteSymbol()" />
        <input id="btn_Reset" type="button" class="btn btn-default" data-i18n="[value]resources.btn_reset" onclick="resetSymbol()" />
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></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-css" 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">
    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);
    var plotting = L.supermap.plotting.getControl(map, serverUrl);
    function plotSymbol() {
        //标绘多边形
        var polygonPoints = [];
        polygonPoints.push(new L.latLng(41,89));
        polygonPoints.push(new L.latLng(33,85));
        polygonPoints.push(new L.latLng(29,93));
        polygonPoints.push(new L.latLng(34,101));
        polygonPoints.push(new L.latLng(41,99));
        plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL, polygonPoints);

        //标绘折线
        var linePoints = [];
        linePoints.push(new L.latLng(29, 107));
        linePoints.push(new L.latLng(36,110));
        linePoints.push(new L.latLng(28,113));
        linePoints.push(new L.latLng(37,118));
        plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.POLYLINESYMBOL, linePoints);
    }

    function copySymbol() {
        editControl.copy();
    }

    function cutSymbol() {
        editControl.cut();
    }

    function pasteSymbol() {
        editControl.paste();
    }

    function resetSymbol() {
        plottingLayer.removeAllFeatures();
        plotSymbol();
    }
    map.on('contextmenu', function (event) {
        if(editControl.getSelectedFeatures().length == 0){
            return;
        }
        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";
    })
    window.onload = function(){
        plotSymbol();
    };
    $(document).ready(function(){
        $('#panelheading').click(function(){
            $('#panelbodycontent').toggle();
        });
    });
</script>
</body>
</html>