当前位置: 58彩票app下载 > 编程技术 > 正文

离线地图

时间:2019-09-25 09:49来源:编程技术
Web GIS 离线地图 1,基于瓦片的离线地图下载 博客园阿凡卢提供了离线地图的下载工具,下载地址: 参考资料2 阿凡卢 提供的地图下载软件,对于导出的瓦片图片的目录是基于ArcGIS切片

Web GIS 离线地图

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

博客园阿凡卢提供了离线地图的下载工具,下载地址: 参考资料2

图片 1

阿凡卢提供的地图下载软件,对于导出的瓦片图片的目录是基于ArcGIS切片目录,我编写了将导出到Mysql数据库中的瓦片数据导出为{type}/{z}/{x}/{y}.png 格式。具体步骤如下:

A 使用阿凡卢提供的地图下载软件将地图导出到Mysql数据库

B 使用我开发的软件把Mysql数据库中的瓦片数据导出到本地文件 点击这里下载

图片 2

导出的图片目录如下:

图片 3

图片 4

这二步做好了以后,在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;                L.marker([31.229243, 121.479950]).addTo            .bindPopup('DTS 1<br>31° 38° 49°')            .openPopup();    </script>

效果图如下:

图片 5

参考资料:

1Web GIS离线解决方案

2百度谷歌离线地图解决方案

编辑:编程技术 本文来源:离线地图

关键词: