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: '&copy; 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 百度谷歌离线地图解决方案（离线地图下载）

Web GIS 离线地图的更多相关文章

  1. Web GIS离线地图

    参考资料: http://www.cnblogs.com/luxiaoxun/p/5022333.html https://www.cnblogs.com/luxiaoxun/p/4454880.ht ...

  2. Web GIS离线解决方案

    1.背景 在离线环境下(局域网中)的GIS系统中如何使用地图?这里的地图主要指的是地图底图,有了底图切片数据,我们就可以看到地图,在上面加上自己的业务数据图层,进行相关操作. 要在离线环境下看到GIS ...

  3. java离线地图web GIS制作

    因为项目需求,要做一个web地图,之前做过高德的在线地图,它提供了一系列的API,并且由于是国产的,所以开发起来比较容易,现在由于项目是内网使用的,所以需要使用离线地图,由此便开始了: Web GIS ...

  4. 在 Web 页面中使用离线地图

    1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. GISMysqlToLocalFile (提取码: vus6) 3. Leaflet 2. 操作: 1. ...

  5. GIS开发离线地图应用-初识gis

    http://www.cnblogs.com/kevin-zlg/p/4611671.html 最新公司需要做一个基于gis地图的应用系统,由于之前公司项目中的电子地图模块都是我开发的,所以这个新系统 ...

  6. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  7. ArcGIS 10.5，打造智能的Web GIS平台

    2017年新年来临之际,ArcGIS 10.5正式发布.历经几个版本,ArcGIS 10.5已经革新为一个智能的以Web为中心的地理平台,推出更精细的分级授权.全新的i3S三维标准.大数据分析处理产品 ...

  8. 【BIGEMAP一键离线地图服务】

    地址:http://www.bigemap.com/offlinemaps/ 首页 离线地图 代码示例 项目案例 开发文档 关于我们     [BIGEMAP一键离线服务] 1.快速搭建离线地图服务2 ...

  9. 【转】关于 Web GIS

    以下部分选自2015-03-01出版的<Web GIS从基础到开发实践(基于ArcGIS API for JavaScript)>一书中的前言部分: Web GIS 概念于1994 年首次 ...

随机推荐

  1. Python time datetime常用时间处理方法

    常用时间转换及处理函数: import datetime # 获取当前时间 d1 = datetime.datetime.now() print d1 # 当前时间加上半小时 d2 = d1 + da ...

  2. 理解assign,copy,retain变strong

    举个例子: NSString *houseOfMM = [[NSString alloc] initWithString:'装梵几的三室两厅']; 上面一段代码会执行以下两个动作:  1 在堆上分配一 ...

  3. 通用对象池ObjectPool的一种简易设计和实现方案

    对象池,最简单直接的作用当然是通过池来减少创建和销毁对象次数,实现对象的缓存和复用.我们熟知的线程池.数据库连接池.TCP连接池等等都是非常典型的对象池. 一个基本的简易对象池的主要功能实现我认为应该 ...

  4. js时间函数

    时间 new Date() 获取时间,可以理解为是系统默认的函数. 从小括号里面获取系统时间日期,相当于在调用系统默认的函数. 年 getFullYear() 注意,有Full. 月 getMonth ...

  5. Java攻城狮面试考题

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. Maven学习总结(六)——Maven与Eclipse整合

    一.安装Maven插件 下载下来的maven插件如下图所示:,插件存放的路径是:E:/MavenProject/Maven2EclipsePlugin

  7. win10 体验

    最近听说win10出了正式版,微软貌似在win10上投入了很大的期望,不知道到底怎么样,实践出真知,小编今天就亲自体验一下! 其实很多人对win8不满意,主要是因为win8 的兼容性不尽人意,小编的电 ...

  8. unsigned long类型转换为CString出现的问题

    开发工具:VC2010 财务程序读卡时发现有的卡片读出的卡号异常,代码如下: // 读卡序列号 unsigned long cardNo; CICReader reader(ICREADER_TYPE ...

  9. UIBarButtonItem-添加自定义Left或者Right按钮

    为UINavigationController添加UINavigationItem,我们可以这样写:   1.添加返回导航按钮backBarButtonItem   1.用系统自带的返回按钮 UIBa ...

  10. XCode升级导致的IAP失败的问题

    应用提交苹果测试之前,一般都会在沙盒环境里进行测试充值.用沙盒的测试帐号进行充值的时候,服务端拿到苹果返回的receipt-data后,向苹果服务端进行校验的时候,如果返回错误码21007则再去沙盒环 ...