fuyuhang
/
Project_yhfu
огледало од http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_turfGridAnalysis"></title>
    <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
    <script type="text/javascript" include="turf,leaflet.draw" src="../../dist/leaflet/include-leaflet.js"></script>
    <style>
        .leaflet-tooltip, .leaflet-tooltip:before {
            color: white;
            border: none;
            background: rgba(0, 0, 0, 0.5);
        }
    </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>
<script>
    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
        mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark",
        turfLayer,
        bbox,
        gridAnalyzeType = 'hexGrid',
        turfAnalyzeType = 'Interpolation_tin',

        map = L.map('map', {
            crs: L.CRS.EPSG4326,
            preferCanvas: true,
            center: [36, 106],
            maxZoom: 18,
            mixZoom: 2,
            zoom: 4
        });
    L.supermap.tiledMapLayer(mapUrl, {
        noWrap: true,
        prjCoordSys: {"epsgCode": "4326"},
        minZoom: 3
    }).addTo(map);

    //创建dom
    initEditView();

    function initEditView() {
        var infoView = L.control({position: 'topright'});
        infoView.onAdd = function () {
            var me = this;
            me._div = L.DomUtil.create('div');
            me._div.style.width = '420px';
            me._div.innerHTML = "<div class='panel panel-primary editPane' id='editPane'>"+
                "<div class='panel-heading'>"+
            "<h5 class='panel-title text-center'>" + resources.text_createGrid + "</h5></div>"+
            "<div class='panel-body' id='gridsBody'>"+
            "<div class='input-group'>"+
            "<span class='input-group-addon'>" + resources.text_gridAnalysisType + "<span title=" + resources.text_requiredField + " style='color: red;'> * </span></span>"+
            "<select class='form-control' id='gridAnalyzeType' name='gridAnalyzeType'>"+
            "<option value='hexGrid' selected>" + resources.text_hexGrid + "</option>"+
            "<option value='pointGrid'>" + resources.text_pointGrid + "</option>"+
            "<option value='squareGrid'>" + resources.text_squareGrid + "</option>"+
            "<option value='triangleGrid'>" + resources.text_triangleGrid + "</option>"+
            "</select>"+
            "</div>"+
            "<p></p>"+
            "<div class='input-group'>"+
            "<span class='input-group-addon'>" + resources.text_unitGridSize + "<span title=" + resources.text_requiredField + " style='color: red;'> * </span></span>"+
            "<input id='cellSide' type='text' class='form-control' value='50'/>"+
            "</div>"+
            "<p></p>"+
            "<div class='input-group'>"+
            "<span class='input-group-addon'>" + resources.text_gridUnitSizeUnit + "<span title=" + resources.text_requiredField + " style='color: red;'> * </span></span>"+
            "<select class='form-control' id='units' name='mode'>"+
            "<option value='degrees'>" + resources.text_degrees + "</option>"+
            "<option value='radians'>" + resources.text_radians + "</option>"+
            "<option value='miles' selected>" + resources.text_miles + "</option>"+
            "<option value='kilometers'>" + resources.text_kilometers + "</option>"+
            "</select>"+
            "</div>"+
            "<p></p>"+
            "<div id='squareGridChoic' class='input-group' style='display: none'>"+
            "<span class='input-group-addon'>" + resources.text_adjustSize + "</span>"+
            "<span class='form-control'>"+
            "<input id='completelyWithin' type='checkbox'>"+
            "</span>"+
            "</div>"+
            "<p></p>"+
            "<div id='pointGridChoic' class='input-group' style='display: none'>"+
            "<span class='input-group-addon'>" + resources.text_adjustPoint + "</span>"+
            "<span class='form-control'>"+
            "<input id='iscentered' type='checkbox'>"+
            "</span><span class='input-group-addon'>" + resources.text_creationRange + "</span>"+
            "<span class='form-control'><input id='isbboxIsMask' type='checkbox'>"+
            "</span>"+
            "</div>"+
            "<p></p>"+
            "<div id='hexGridChoic' class='input-group'>"+
            "<span class='input-group-addon'>" + resources.text_returnedByTriangle + "</span>"+
            "<span class='form-control'>"+
            "<input id='triangles' type='checkbox'>"+
            "</span>"+
            "</div>"+
            "<p></p>"+
            "<div align='right' class='input-group'>"+
            "<input type='button' id='createGridBtn' class='btn btn-primary' value=" + resources.btn_createGrid + ">&nbsp"+
            "<input type='button' id='clearGridBtn' class='btn btn-primary' value=" + resources.text_input_value_clear + ">"+
            "</div>"+
            "</div>"+
            "</div>";
            handleMapEvent(me._div, me._map);
            return me._div;
        };
        infoView.addTo(map);
    }

    //绑定dom事件
    bindEvent();

    function bindEvent() {
        //格网分析事件绑定 --start
        // 切换格网分析
        $("#gridAnalyzeType").change(function () {
            bbox = null;
            //是否有需要删除的提示框
            widgets.alert.clearAlert();
            clearLayer();
            gridAnalyzeType = $("#gridAnalyzeType option:selected").val();
            switch (gridAnalyzeType) {
                case 'hexGrid':
                    $("#squareGridChoic").hide();
                    $("#pointGridChoic").hide();
                    $("#hexGridChoic").show();
                    return;
                case 'pointGrid':
                    $("#squareGridChoic").hide();
                    $("#pointGridChoic").show();
                    $("#hexGridChoic").hide();
                    return;
                case 'squareGrid':
                    $("#squareGridChoic").show();
                    $("#pointGridChoic").hide();
                    $("#hexGridChoic").hide();
                    return;
                case 'triangleGrid':
                    $("#squareGridChoic").hide();
                    $("#pointGridChoic").hide();
                    $("#hexGridChoic").hide();
                    return;
            }
        });

        $("#createGridBtn").click(function () {
            //是否有需要删除的提示框
            widgets.alert.clearAlert();
            turfLayer.clearLayers();
            if (bbox) {
                switch (gridAnalyzeType) {
                    case 'hexGrid':
                        gridAnalyst.createHexGrid();
                        break;
                    case 'pointGrid':
                        gridAnalyst.createPointGrid();
                        break;
                    case 'squareGrid':
                        gridAnalyst.createSquareGrid();
                        break;
                    case 'triangleGrid':
                        gridAnalyst.createTriangleGrid();
                        break;
                }
            } else {
                widgets.alert.showAlert(resources.msg_drawAnalystRange, false);
            }
        });

        $("#clearGridBtn").click(function () {
            //是否有需要删除的提示框
            widgets.alert.clearAlert();
            if (gridAnalyst.editableLayers.getLayers().length === 0 && turfLayer.getLayers().length == 0) {
                widgets.alert.showAlert(resources.msg_noDataToDelete, false);
                return;
            }
            bbox = null;
            clearLayer();
        });
        //格网分析事件绑定 --end
    }

    //设置图标
    var pointIcon = L.icon({
        iconUrl: '../img/marker-gold.png',
        iconSize: [25, 25],
    });

    var bounds = L.latLngBounds(L.latLng(90, 180), L.latLng(-90, -180));

    function mapDrawListener(e) {
        var layer = e.layer;
        var layerBounds = layer._bounds;
        if (!bounds.contains(layerBounds)) {
            widgets.alert.showAlert(resources.msg_beyondScope, false);
            return;
        }

        map.fire("viewreset");
        if (gridAnalyst.editableLayers.getLayers().length > 0) {
            widgets.alert.showAlert(resources.msg_dontRedraw, false);
            return;
        }
        tooltip.removeFrom(map);
        map.off('mousemove', pointerMoveHandler);

        gridAnalyst.editableLayers.addLayer(layer);

        bbox = [layerBounds.getWest(), layerBounds.getSouth(), layerBounds.getEast(), layerBounds.getNorth()];
        drawing = false;
    }

    //添加鼠标滑动事件
    var tooltip = L.tooltip({
        direction: 'right'
    });
    var pointerMoveHandler = function (evt) {
        var helpMsg = resources.msg_drawAnalystRange;
        if (helpMsg) {
            tooltip.setContent(helpMsg);
            tooltip.setLatLng(evt.latlng);
        }
        tooltip.addTo(map);
    };

    map.on('mousemove', pointerMoveHandler);

    //创建格网分析对象
    var drawing = false;
    var gridAnalyst = {
        editableLayers: null,
        drawControl: null,
        turfLayerOptions: {
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                        icon: pointIcon, zIndexOffset: 1000
                    }
                );
            },
            style: function (feature) {
                return {
                    color: 'red',
                    weight: 0.8,
                    opacity: 0.8,
                    fillColor: 0.1
                }
            }
        },

        loadAnalystLayer: function () {
            var center = L.latLng(36, 106);
            map.flyTo(center, 4);

            //初始化turfLayer
            turfLayer = L.supermap.turfLayer(gridAnalyst.turfLayerOptions).addTo(map);

            //添加画图控件：
            gridAnalyst.editableLayers = new L.FeatureGroup();
            map.addLayer(gridAnalyst.editableLayers);

            var options = {
                position: 'topleft',
                draw: {
                    toolbar: false,
                    polyline: false,
                    polygon: false,
                    circle: false,
                    circlemarker: false,
                    rectangle: {},
                    marker: false,
                    remove: {},
                },
                edit: {
                    featureGroup: gridAnalyst.editableLayers,
                    edit: false,
                    remove: false
                }
            };
            gridAnalyst.drawControl = new L.Control.Draw(options);
            gridAnalyst.drawControl.setDrawingOptions({
                tooltip: {
                    start: resources.msg_clickDrawAnalystRange
                }
            });
            map.addControl(gridAnalyst.drawControl);
            handleMapEvent(gridAnalyst.drawControl.getContainer(), map);

            //绘图完成事件
            map.on(L.Draw.Event.CREATED, mapDrawListener);
            map.on('draw:drawstart', function () {
                //是否有需要删除的提示框
                widgets.alert.clearAlert();
                drawing = true;
            });
        },

        createHexGrid: function () {
            var cellSide = $("#cellSide").val();
            var units = $("#units option:selected").val();
            var triangles = $("#triangles").get(0).checked;

            turfLayer.process("Grids.hexGrid", {
                "bbox": bbox,
                "cellSide": cellSide,
                "units": units,
                "triangles": triangles
            });
        },

        createPointGrid: function () {
            var cellSide = $("#cellSide").val();
            var units = $("#units option:selected").val();
            var iscentered = $('#iscentered').get(0).checked;
            var isbboxIsMask = $('#isbboxIsMask').get(0).checked;

            turfLayer.process("Grids.pointGrid", {
                "bbox": bbox,
                "cellSide": cellSide,
                "units": units,
                "centered": iscentered,
                "bboxIsMask": isbboxIsMask
            });
        },

        createSquareGrid: function () {
            var cellSide = $("#cellSide").val();
            var units = $("#units option:selected").val();
            var completelyWithin = $("#completelyWithin").get(0).checked;

            turfLayer.process("Grids.squareGrid", {
                "bbox": bbox,
                "cellSide": cellSide,
                "units": units,
                "completelyWithin": completelyWithin
            });
        },

        createTriangleGrid: function () {
            var cellSide = $("#cellSide").val();
            var units = $("#units option:selected").val();
            turfLayer.process("Grids.triangleGrid", {
                "bbox": bbox,
                "cellSide": cellSide,
                "units": units
            });
        }
    };
    gridAnalyst.loadAnalystLayer();

    function clearLayer() {
        if (turfLayer) {
            turfLayer.clearLayers();
        }
        gridAnalyst.editableLayers.clearLayers();
    }


    //避免画图事件与地图事件冲突
    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        map.dragging.disable();
        div.addEventListener('mouseover', function () {
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
            map.off('mousemove', pointerMoveHandler);
            tooltip.removeFrom(map);
        });
        map.dragging.enable();
        div.addEventListener('mouseout', function () {
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
            if (!drawing) {
                map.on('mousemove', pointerMoveHandler);
            }
        });
    }

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