<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title data-i18n="resources.title_openFile"></title> <script type="text/javascript" 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/javascript"> 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 = new L.supermap.TiledMapLayer(url).addTo(map); var layersControl = L.control.layers({"baseLayers": baseLayers}, {}, {"position": 'topleft'}).addTo(map); var openFileComponents = new L.supermap.Components.OpenFile().addTo(map); //将成功返回的数据加载到地图 openFileComponents.on("openfilesucceeded", function (e) { var layer = L.geoJSON(e.result).addTo(map); map.flyToBounds(layer.getBounds()); layersControl.addOverlay(layer, e.layerName); }); //避免与"源码"控件重叠 openFileComponents.rootContainer.style.margin = "40px 4px 0px 0px"; </script> </body> </html>
时间: 2024-04-06 15:29:27 浏览: 119
HTML5程序设计学习笔记
这段代码是一个HTML页面的代码,包括一个基于Leaflet地图库的地图组件和一个用于打开文件的组件。在页面中,首先创建了一个地图对象,然后加载了一个中国地图服务作为底图,同时添加了一个控制图层的控件。接着创建了一个能够打开文件的组件,并注册了一个"openfilesucceeded"事件,用于在成功打开文件后将数据加载到地图上。最后为了避免与"源码"控件重叠,设置了一些样式。
阅读全文