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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_openFile_vue"></title>
    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
    <script type="text/javascript" include="iclient-leaflet-css,xlsx"
            src="../../dist/leaflet/include-leaflet.js"></script>
</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="loading">....</div>
<script>
    var map = L.map('map', {
        center: [38, 110],
        zoom: 5,
    });
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + '/iserver/services/map-china400/rest/maps/China';

    var baseLayers = L.supermap.tiledMapLayer(url).addTo(map);
    var layersControl = L.control.layers({"baseLayers": baseLayers}, {}, {"position": 'topleft'}).addTo(map);

    var openFileViewModel = L.supermap.components.openFileViewModel(map);
    var messageBox = new SuperMap.Components.MessageBox();

    initEditView();

    function initEditView() {
        var infoView = L.control({position: 'topright'});
        infoView.onAdd = function () {
            var me = this;
            me._div = L.DomUtil.create('div', "component-openfile");
            me._div.id = "openFileContainer";
            //避免与"源码"控件重叠
            me._div.style["margin"] = "40px 4px 0px 0px";
            me._div.innerHTML = "<add_data v-bind:openFileViewModel='openFileViewModel' v-bind:messageBox='messageBox'></add_data>";
            handleMapEvent(me._div, me._map);
            return me._div;
        };
        infoView.addTo(map);
    }

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }

    var add_data = {
        props: ["openFileViewModel", "messageBox"],
        data: function () {
            return {
                text: resources.text_openFile
            }
        },
        template: [
            "<div class='file-select'>",
            "<label class='component-openfile__span--select' for='input_file'>",
            "<div class='supermapol-icons-upload'/>",
            "<span class='component-openfile__span'>{{text}}</span>",
            "</label>",
            "<input class='component-openfile__input' id='input_file' type='file'",
            "accept='.json,.geojson,.csv,.xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'",
            "v-on:change='fileSelectfn(this, $event)'>",
            "</div>"
        ].join(""),
        methods: {
            fileSelectfn(self, e) {
                //绑定事件监听
                self.openFileViewModel.on("filesizeexceed", _messageListener.bind(self));
                self.openFileViewModel.on("errorfileformat", _messageListener.bind(self));
                self.openFileViewModel.on("openfilefailed", _messageListener.bind(self));
                self.openFileViewModel.on("readdatafail", _messageListener.bind(self));
                self.openFileViewModel.on("openfilesucceeded", function (e) {
                    var layer = L.geoJSON(e.result).addTo(map);
                    map.flyToBounds(layer.getBounds());
                    layersControl.addOverlay(layer, e.layerName);
                });

                function _messageListener(e) {
                    this.messageBox.showView(e.message, e.messageType);
                }

                self.openFileViewModel.readFile(e);
            },
        }
    };

    // 创建根实例
    new Vue({
        el: '#openFileContainer',
        data: {
            openFileViewModel: openFileViewModel,
            messageBox: messageBox
        },
        components: {
            'add_data': add_data
        }
    });

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