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. Configuring Locales

    原文地址:http://people.debian.org/~schultmc/locales.html The Easy Way Install debconf (i.e. runapt-get u ...

  2. 解读SQL Server 2014可更新列存储索引——存储机制

    概述 SQL Server 2014被号称是微软数据库的一个革命性版本,其性能的提升的幅度是有史以来之最. 可更新的列存储索引作为SQL Server 2014的一个关键功能之一,在提升数据库的查询性 ...

  3. [JS6] 通过用户事件事件执行脚本

    <html> <head> <title>通过用户事件事件执行脚本</title> <SCRIPT TYPE="text/JavaScr ...

  4. MySQL的pt-query-digest的下载与使用

    对于脚本文件,是可以执行的,我们不用安装.所以,但是这个脚本文件没有执行的权限,所以,我们首先赋予这个脚本文件的可执行的权限. 再次查看文件的信息后. 已经有了执行的权限了. 运行脚本的时候,可要注意 ...

  5. GCD使用dispatch_semaphore_t创建多线程网络同步请求

    一.简介: dispatch_semaphore_t:表示信号,生成信号的方法是 dispatch_semaphore_t semaphore= dispatch_semaphore_create(0 ...

  6. 【Android】进入Material Design时代

    由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

  7. SHINY－SERVER R（sparkR）语言web解决方案 架设shiny服务器

    1. shiny server简介 shiny-server是一种可用把R 语言以web形式展示的服务,其实RStudio公司自己构建了R Shiny Application运行的平台(http:// ...

  8. file_get_contents高級用法

    首先解決file_get_contents的超時問題,在超時返回錯誤後就象js中的settimeout那樣進行一次嘗試,錯誤超過3次或者5次後就確認為無法連線伺服器而徹底放棄.這裡就簡單介紹兩種解決方 ...

  9. C++与C#的时间转换

    1.C++中的时间:(1) time_t其实是一个64位的long int类型(2) time函数:函数简介: 函数名:  time     头文件:  time.h     函数原型:time_t ...

  10. CentOS7安装mysql数据库

    安装完Centos7,迫不急待的想安装mysql数据库,却没想到走了很多弯路,后来经过查资料,才知道了在Centos7中用MariaDB代替了mysql数据库. 准确来说,本文的标题有点误导的意思,本 ...