首页 > Web开发 > 详细

Web GIS 离线地图

时间:2016-01-16 16:37:26      阅读:544      评论:0      收藏:0      [点我收藏+]

Web GIS 离线地图

 

1,基于瓦片的离线地图下载

博客园 阿凡卢 提供了离线地图的下载工具,下载地址:http://pan.baidu.com/s/1hqvQr7e 具体使用见 参考资料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: &copy; Google China
        }).addTo(map);
        
        L.marker([31.229243, 121.479950]).addTo(map)
            .bindPopup(DTS 1<br>31° 38° 49°)
            .openPopup();
    </script>

效果图如下:

技术分享

参考资料:

Web GIS离线解决方案

百度谷歌离线地图解决方案(离线地图下载)

 

Web GIS 离线地图

原文:http://www.cnblogs.com/bruceleeliya/p/5135465.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!