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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_openFile_react"></title>
    <script type="text/javascript" include="react" 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 type="text/babel">
    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);

    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.style["margin"] = "40px 4px 0px 0px";
            me._div.id = "addDataContainer";

            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();
        });
    }

    class AddData extends React.Component {
        constructor(props) {
            super(props);
            //功能组件
            this.openFileViewModel = props.openFileViewModel;
            this.messageBox = props.messageBox;
            this.layersControl = props.layersControl;
            this.fileSelectfn = this.openFileViewModel.readFile.bind(this.openFileViewModel);
            //监听vm 事件：
            this.openFileViewModel.on("filesizeexceed", this._messageListener.bind(this));
            this.openFileViewModel.on("errorfileformat", this._messageListener.bind(this));
            this.openFileViewModel.on("openfilefailed", this._messageListener.bind(this));
            this.openFileViewModel.on("readdatafail", this._messageListener.bind(this));
            this.openFileViewModel.on("openfilesucceeded", function (e) {
                var layer = L.geoJSON(e.result).addTo(map);
                map.flyToBounds(layer.getBounds());
                layersControl.addOverlay(layer, e.layerName);
            });
        }

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

        render() {
            return <div className="file-select">
                <label className="component-openfile__span--select" htmlFor="input_file">
                    <div className="supermapol-icons-upload"/>
                    <span className="component-openfile__span">{this.props.text}</span>
                </label>
                <input className="component-openfile__input" id="input_file" type="file"
                       accept=".json,.geojson,.csv,.xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                       onChange={this.fileSelectfn}/>
            </div>
        }
    }

    var openFileViewModel = L.supermap.components.openFileViewModel(map);
    var messageBox = new SuperMap.Components.MessageBox();
    ReactDOM.render(
            <AddData openFileViewModel={openFileViewModel} messageBox={messageBox} text={resources.text_openFile}/>,
        document.getElementById('addDataContainer')
    );

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