Web GIS 离线地图
2018-06-18 02:16:34来源:未知 阅读 ()
Web GIS 离线地图
1,基于瓦片的离线地图下载
博客园 阿凡卢 提供了离线地图的下载工具,下载地址:http://pan.baidu.com/s/1cxGpXW 具体使用见 参考资料2
阿凡卢 提供的地图下载软件,对于导出的瓦片图片的目录是基于ArcGIS切片目录,我编写了将导出到Mysql数据库中的瓦片数据导出为{type}/{z}/{x}/{y}.png 格式。具体步骤如下:
A 使用 阿凡卢 提供的地图下载软件将地图导出到Mysql数据库
B 使用我开发的软件把Mysql数据库中的瓦片数据导出到本地文件 点击这里下载
导出的图片目录如下:
这二步做好了以后,在IIS上新建一个空的网站,把我们的地图切片拷贝过去即可。
2,前端JS 用来加载地图的瓦片数据
前端推荐使用 Leaflet ,这里我已经把相关的 css,js 下载到了本地。具体 代码如下:
<html> <head> <title>离线地图</title> <link rel="stylesheet" href="dist/leaflet.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="dist/leaflet-ie.css" /> <link rel="stylesheet" href="dist/locate-ie.css"/> <![endif]--> <link rel="stylesheet" href="dist/mobile.css" /> <link rel="stylesheet" href="dist/locate.css" /> <script src="dist/leaflet.js"></script> <script src="dist/proj4js-compressed.js"></script> <script src="dist/proj4leaflet.js"></script> <script src="dist/locate.js" ></script> </head> <body> <div id="map"></div> </body> <script type="text/javascript"> var map = L.map('map').setView([31.2269, 121.4648], 12); L.tileLayer('http://localhost:8080/1818940751/{z}/{x}/{y}.png', { attribution: '© Google China' }).addTo(map); L.marker([31.229243, 121.479950]).addTo(map) .bindPopup('DTS 1<br>31° 38° 49°') .openPopup(); </script>
效果图如下:
参考资料:
1 Web GIS离线解决方案
2 百度谷歌离线地图解决方案(离线地图下载)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- webbench网站测压工具源码分析 2019-10-12
- 【webrtc】webrtc的rtp重传代码分析 2019-08-16
- 2019 WebRtc AudioMixer混音流程 2019-08-16
- 【web】movie review——静态页面训练、css训练 2018-09-19
- 【web】movie review——静态页面训练、css训练 2018-09-18
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash