fuyuhang
/
Project_yhfu
cermin dari http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!--********************************************************************
* 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_turfClassificationAnalysis"></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",
        nearestDataUrl = host + "/iserver/services/map-china400/rest/maps/China_4326",
        mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark",
        turfLayer, nearestQueryResultLayer,
        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_classificationAnalysis + "</h5></div>"+
            "<div class='panel-body content' id='classificationBody' >"+
            "<div class='panel'>"+
            "<div class='input-group'>"+
            "<span class='input-group-addon'>" + resources.text_classificationAnalysisType + "<span data-i18n='[title]resources.text_requiredField' style='color: red;'> * </span></span>"+
            "<select class='form-control' id='classificationAnalyzeType' name='interpolationAnalyzeType'>"+
            "<option value='nearestOption' selected>nearestAnalyze</option>"+
            "</select>"+
            "</div>"+
            "</div>"+
            "<div class='input-group' id='nearestBody'></div>"+
            "</div>";
            handleMapEvent(me._div, me._map);
            return me._div;
        };
        infoView.addTo(map);
    }

    //设置图标
    var airportIcon = L.Icon.extend({
        options: {
            iconSize: [25, 25],
            iconAnchor: [10, 10],
            popupAnchor: [2, -10]
        }
    });
    var pointIcon = L.Icon.extend({
        options: {
            iconSize: [35, 35],
            iconAnchor: [5, 35],
            popupAnchor: [2, -25]
        }
    });
    var airportBlueIcon = new airportIcon({iconUrl: '../img/airportBlue.png'});
    var airportRedIcon = new airportIcon({iconUrl: '../img/airportRed.png'});
    var selectPointIcon = new pointIcon({iconUrl: '../img/position.png'});
    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 mapOnClickListener(e) {
        if (!bounds.contains(e.latlng)) {
            widgets.alert.showAlert(resources.msg_beyondScope, false);
            return;
        }

        if (!classificationAnalyst.sourcePoints || classificationAnalyst.sourcePoints.features.length === 0) {
            widgets.alert.showAlert(resources.text_loadingData, true);
            return;
        }
        clearLayer();
        classificationAnalyst.selectPointMarker = L.marker(e.latlng, {icon: selectPointIcon}).bindPopup(resources.text_querypoint).addTo(map);
        classificationAnalyst.nearestAnalyze(classificationAnalyst.sourcePoints, e.latlng);
    }

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

    map.on('mousemove', pointerMoveHandler);

    //创建邻近分析对象：
    var classificationAnalyst = {
        sourcePoints: null,
        line: null,
        selectPointMarker: null,

        loadAnalystLayer: function () {
            var center = L.latLng(36, 106);
            map.flyTo(center, 4);
            //初始化turfLayer
            turfLayer = L.supermap.turfLayer({
                pointToLayer: function (feature, latlng) {
                    return L.marker(latlng, {
                            icon: airportRedIcon, zIndexOffset: 1000
                        }
                    );
                }
            }).addTo(map);

            var airportsParam = new SuperMap.QueryBySQLParameters({
                queryParams: {
                    name: "Airport_pt@China.1",
                }
            });

            //只发送一次请求
            if (!nearestQueryResultLayer) {
                L.supermap
                    .queryService(nearestDataUrl)
                    .queryBySQL(airportsParam, function (serviceResult) {
                        classificationAnalyst.sourcePoints = serviceResult.result.recordsets[0].features;
                        nearestQueryResultLayer = L.geoJSON(classificationAnalyst.sourcePoints, {
                            pointToLayer: function (feature, latlng) {
                                return L.marker(latlng, {icon: airportBlueIcon}).bindPopup(feature.properties.NAME);
                            }
                        }).addTo(map);

                    });
            } else {
                nearestQueryResultLayer.addTo(map);
            }

            //点击地图进行最近飞机场分析
            map.on('click', mapOnClickListener);
        },

        nearestAnalyze: function (sourcePoints, pointLnglat) {
            turfLayer.process("Classification.nearestPoint", {
                "targetPoint": [pointLnglat.lng, pointLnglat.lat],
                "points": sourcePoints
            }, function (result) {
                var latlng = L.latLng(result.geometry.coordinates[1], result.geometry.coordinates[0]);
                turfLayer.bindPopup(resources.msg_nearestAirport + result.properties.NAME).openPopup(latlng);
                classificationAnalyst.line = L.polyline([pointLnglat, latlng], {
                    color: "red",
                    dashArray: '5',
                    weight: 1
                }).addTo(map);
                map.fire("viewreset");
            });
        },
    };
    classificationAnalyst.loadAnalystLayer();


    function clearLayer() {
        if (turfLayer) {
            turfLayer.clearLayers();
        }
        if (classificationAnalyst.line) {
            classificationAnalyst.line.removeFrom(map);
        }
        if (classificationAnalyst.selectPointMarker) {
            classificationAnalyst.selectPointMarker.removeFrom(map);
        }
    }

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


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