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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
							<!--********************************************************************
* 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="turf" src="../../dist/ol/include-ol.js"></script>
    <style>
        .editPane {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 480px;
            text-align: center;
            background: #FFF;
            z-index: 1000;
        }

        .dragBoxCss {
            border: 1px solid #33CCFF;
        }

        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }
    </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='info' class='ol-popup'>
    <a href='#' id='popup-closer' class='ol-popup-closer'></a>
    <div id='info-content'></div>
</div>
<div class='panel panel-primary editPane' id='editPane'>
    <div class='panel-heading'>
        <h5 class='panel-title text-center' data-i18n="resources.text_createGrid"></h5></div>
    <div class='panel-body' id='gridsBody'>
        <div class='input-group'>
            <span class='input-group-addon'><span data-i18n="resources.text_gridAnalysisType"></span><span data-i18n="[title]resources.text_requiredField" style='color: red;'> * </span></span>
            <select class='form-control' id='gridAnalyzeType' name='gridAnalyzeType'>
                <option value='hexGrid' selected data-i18n="resources.text_hexGrid"></option>
                <option value='pointGrid' data-i18n="resources.text_pointGrid"></option>
                <option value='squareGrid' data-i18n="resources.text_squareGrid"></option>
                <option value='triangleGrid' data-i18n="resources.text_triangleGrid"></option>
            </select>
        </div>
        <p></p>
        <div class='input-group'>
            <span class='input-group-addon'><span data-i18n="resources.text_unitGridSize"></span><span data-i18n="[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'><span data-i18n="resources.text_gridUnitSizeUnit"></span><span data-i18n="[title]resources.text_requiredField" style='color: red;'> * </span></span>
            <select class='form-control' id='units' name='mode'>
                <option value='degrees' data-i18n="resources.text_degrees"></option>
                <option value='radians' data-i18n="resources.text_radians"></option>
                <option value='miles' selected data-i18n="resources.text_miles"></option>
                <option value='kilometers' data-i18n="resources.text_kilometers"></option>
            </select>
        </div>
        <p></p>
        <div id='squareGridChoic' class='input-group' style='display: none'>
            <span class='input-group-addon' data-i18n="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' data-i18n="resources.text_adjustPoint"></span>
            <span class='form-control'>
                <input id='iscentered' type='checkbox'>
                </span><span class='input-group-addon' data-i18n="resources.text_returnedByTriangle"></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' data-i18n="resources.text_adjustPoint"></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' data-i18n="[value]resources.btn_createGrid"/>&nbsp
            <input type='button' id='clearGridBtn' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear"/>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script>
    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
        mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark",
        turfLayer, bbox,

        map = new ol.Map({
            target: 'map',
            maxExtent: [-180.0, -85.05, 180.0, 85.05],
            controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [106, 36],
                zoom: 5,
                projection: 'EPSG:4326',
                multiWorld: true
            })
        });

    map.addLayer(new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: mapUrl,
            prjCoordSys: {"epsgCode": 4326}
        }),
        projection: 'EPSG:4326'
    }));

    //添加turf 图层
    var turfSource = new ol.source.Turf({
            wrapX: false,
            attributions: ""
        }),
        gridAnalyzeType = 'hexGrid';

    bindEvent();

    function bindEvent() {

        //格网分析事件绑定 --start
        $("#gridAnalyzeType").change(function (e) {
            bbox = null;
            clearLayer();
            //是否有需要删除的提示框
            widgets.alert.clearAlert();
            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();
            turfSource.clear();
            if (bbox) {
                switch (gridAnalyzeType) {
                    case 'hexGrid':
                        gridAnalyst.createHexGrid();
                        return;
                    case 'pointGrid':
                        gridAnalyst.createPointGrid();
                        return;
                    case 'squareGrid':
                        gridAnalyst.createSquareGrid();
                        return;
                    case 'triangleGrid':
                        gridAnalyst.createTriangleGrid();
                        return;
                }
            } else {
                widgets.alert.showAlert(resources.msg_drawAnalysisRegion, true);
            }
        });

        $("#clearGridBtn").click(function () {
            //是否有需要删除的提示框
            widgets.alert.clearAlert();
            if (vector.getSource().getFeatures().length === 0 && turfSource.getFeatures().length == 0) {
                widgets.alert.showAlert(resources.msg_noDataToDelete, false);
                return;
            }
            bbox = null;
            clearLayer();
        });
    }

    //创建鼠标操作提示：
    var helpTooltipElement, helpTooltip;

    createHelpTooltip();

    function createHelpTooltip() {
        if (helpTooltipElement) {
            helpTooltipElement.parentNode.removeChild(helpTooltipElement);
        }
        helpTooltipElement = document.createElement('div');
        helpTooltipElement.className = 'tooltip hidden';
        helpTooltip = new ol.Overlay({
            element: helpTooltipElement,
            offset: [15, 0],
            positioning: 'center-left'
        });
        map.addOverlay(helpTooltip);
    }

    //鼠标移动监听事件
    var pointerMoveHandler = function (evt) {
        var helpMsg = resources.msg_drawMeshRegion;

        helpTooltipElement.innerHTML = helpMsg;
        helpTooltip.setPosition(evt.coordinate);
        helpTooltipElement.classList.remove('hidden');
    };

    //绑定鼠标移动事件
    map.on('pointermove', pointerMoveHandler);
    map.getViewport().addEventListener('mouseout', function () {
        helpTooltipElement.classList.add('hidden');
    });

    //创建格网的绘图工具
    var dragBox = new ol.interaction.DragBox({
        className: 'dragBoxCss',
        condition: ol.events.condition.platformModifierKeyOnly
    });
    var source = new ol.source.Vector({
        wrapX: false,
    });
    var vector = new ol.layer.Vector({
        source: source,
        extent: [-180.0, -90, 180.0, 90]
    });

    //创建格网分析对象
    var gridAnalyst = {
        loadAnalystLayer: function () {
            map.getView().animate({zoom: 5}, {center: [106, 36]});
            turfLayer = new ol.layer.Vector({
                source: turfSource,
                extent: [-180.0, -90, 180.0, 90],
                style: function (feature) {
                    if (feature.getGeometry() instanceof ol.geom.Polygon) {
                        feature.setStyle(new ol.style.Style({
                            stroke: new ol.style.Stroke(({
                                color: 'red',
                                weight: 0.8,
                            })),
                            fill: new ol.style.Fill({
                                color: 'rgba(255, 255, 255, 0.1)',
                            })
                        }));
                    } else {
                        feature.setStyle(new ol.style.Style({
                            image: new ol.style.Icon(({
                                crossOrigin: 'anonymous',
                                src: '../img/marker-gold.png',
                                scale: 0.5
                            }))
                        }));
                    }
                }
            });
            map.addLayer(vector);
            map.addLayer(turfLayer);

            map.addInteraction(dragBox);
            dragBox.on('boxstart', function () {
                //是否有需要删除的提示框
                widgets.alert.clearAlert();
                clearLayer();
            });
            dragBox.on('boxend', function () {
                bbox = dragBox.getGeometry().getExtent();
                var rectangleFeature = new ol.Feature({
                    geometry: dragBox.getGeometry()
                });
                var rectanglesource = new ol.source.Vector({
                    features: [rectangleFeature],
                    wrapX: false
                });
                vector.setSource(rectanglesource);
            });

        },
        //格网分析
        createHexGrid: function () {
            var cellSide = $("#cellSide").val();
            var units = $("#units option:selected").val();
            var triangles = $("#triangles").get(0).checked;

            turfSource.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;

            turfSource.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;

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

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

    };
    gridAnalyst.loadAnalystLayer();

    function clearLayer() {
        if (turfSource.getFeatures().length > 0) {
            turfSource.clear();
        }
        vector.getSource().clear();
    }
</script>
</html>