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. Java的历史

    1991 绿色计划 (Green Project) 1991 年 1 月 一个名为"Green Project"的项目启动.该项旨在为家用电器提供支持,使这些电器智能化并且能够彼此 ...

  2. 10 个超酷的加载中的 Gif 动画

    #1: Calming cat loading gif #2: Stylish loading gif #3: Shape changing loading gif #4: Loading gif f ...

  3. Dynamic CRM 2013学习笔记（二十二）插件里调用WCF服务

      1. 添加service:     2.调用WCF BasicHttpBinding myBinding = new BasicHttpBinding(); myBinding.Name = &q ...

  4. 拖动div简单事例代码

    事例文件下载 //拖动容器代码 var rDrag = { o: null, init: function (o) { o.onmousedown = this.start; }, start: fu ...

  5. django rest_framework

    环境 django 1.6,rest_framework 3.3 ubuntu采用pip安装的rest_framework 按照例子一步步做下来 运行 提示filters.py第119行有错误form ...

  6. 怎么实现元素ol的降序排序显示

    首先介绍一下什么是ol元素.这里直接引用MDN里面的定义:The HTML <ol> Element (or HTML Ordered List Element) represents a ...

  7. [ACM_水题] UVA 11729 Commando War [不可同时交代任务 可同时执行 最短完成全部时间 贪心]

    There is a war and it doesn't look very promising for your country. Now it's time to act. You have a ...

  8. [游戏模版7] Win32 最简单贴图

    >_<:this is the first using mapping. >_<:There will be introducing how to do: First load ...

  9. 在DOS下的DEBUG命令的详细用法

    在DOS下的DEBUG命令的详细用法 名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump ...

  10. duilib进阶教程 -- 总结 (17)

    整个教程的代码下载:http://download.csdn.net/detail/qq316293804/6502207 (由于duilib进阶教程主要介绍界面,所以这个教程只给出界面相关的代码,完 ...