注意:国内地图均经过加密,尤其是百度地图,经过了二次加密,通常情况下都会存在偏差。所以最好是利用地图下载器下载后面带有“无偏差”的地图,否则需要对经纬度进行转化。

1、需要的前端库文件有jquery.js、ol.js、ol.css。网上百度一番不难找,实在找不到的可以留言我发给你。

2、需要有地图的瓦片图。网上有各类工具:全能电子地图下载器,水经注地图下载器等等,可以免费将百度、谷歌、高德、腾讯等的地图制作成瓦片图后下载下来。同上,百度一番不难找,实在找不到可以留言。

3、首先在body中定义一个div用以存放地图,注意需要设置id

<div id="map" style="width: 80%;height: 80%;"></div>

4、js实现加载地图

第一个参数[111.36,26.25]为地图的中心位置,后面的两个参数是地图的坐标系,ol3默认情况下是3857,我们需要把经纬度从4326转化为3857。这样才不会错位。
var center = ol.proj.transform([111.36, 26.25], 'EPSG:4326', 'EPSG:3857');
设置离线地图的图层。通常我们下载下来的地图都会是类似d://roadmap/z/y/x.png这样的格式,其中zyx为数字,或是数据加一个字母,z代表图层,y代表y轴,x代表x坐标
将下载下来的地图放到项目里面,url设置对应的路径
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'roadmap/{z}/{x}/{y}.png'
})
});

ol3中一个完整的地图至少需要3个要素:1、图层layers,可以同时设置多个图层,按照先后顺序进行覆盖;2、中心坐标;3、地图容器

// 创建地图
var map = new ol.Map({
// 设置地图图层
layers: [
offlineMapLayer//将我们上一步设置好的离线地图加载进来
],
// 设置显示地图的视图
view: new ol.View({
//projection: 'EPSG:4326',
center: center, // 将之前定义好的中心点放进来
zoom: 10,      //设置地图默认展开到第10个图层,即默认z=10
}),
// 让之前id为map的div作为地图的容器
target: 'map',
});

完成以上步骤,一个最简单的离线地图就完成了。

ol3开发离线地图的更多相关文章

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

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

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

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

  3. 3D离线地图开发

    3D离线地图介绍(3D离线采用矢量数据作为地图基础,可保持地图数据最新) 一.开发中引用3D离线地图(可独立部署通过内外IP+端口进行访问,也可拷贝js库文件到项目中通过绝对路径访问) 1).离线AP ...

  4. 百度3D离线地图开发,3D离线地图开发,百度地图离线开发

    3D离线地图介绍(3D离线采用矢量数据作为地图基础,可保持地图数据最新) 一.开发中引用3D离线地图(可独立部署通过内外IP+端口进行访问,也可拷贝js库文件到项目中通过绝对路径访问) 1).离线AP ...

  5. Arcgis Android API开发之离线地图

    最近一直在倒腾Arcgis Android API等相关的东西,想把自己的做的图放到地图上去,也就是离线地图,穷人一般是没有钱的,一个月好几十的流量是开不起的,所以就左捉摸,右思考,看着API里面有离 ...

  6. Web GIS 离线地图

    Web GIS 离线地图 1,基于瓦片的离线地图下载 博客园 阿凡卢 提供了离线地图的下载工具,下载地址:http://pan.baidu.com/s/1hqvQr7e 具体使用见 参考资料2 阿凡卢 ...

  7. ArcGIS for Android示例解析之离线地图-----LocalTiledLayer

    转自:http://blog.csdn.net/wozaifeiyang0/article/details/7327423 LocalTiledLayer 看到这个标题是否是很激动,如题,该示例就是添 ...

  8. java离线地图web GIS制作

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

  9. Arcgis For Android之离线地图实现的几种方式

    为什么要用,我想离线地图的好处是不言而喻的,所以很多人做系统的时候都会考虑用离线地图.在此,我给大家介绍几种Arcgis For Android下加载离线地图的方式. 在Arcgis For Andr ...

随机推荐

  1. HTML-CSS线性渐变

    实现背景的渐变可以通过为背景添加颜色渐变的图片,也可以使用浏览器的功能来为背景添加渐变的颜色 在IE6或IE7浏览器下可以使用一下示例的CSS语句,设置filter属性来实现颜色 filter:pro ...

  2. Javascript-数据类型转换 、 运算符和表达式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ruby自动化之selenium webGUI

    1.下载ruby语言包,windows下需要安装rubyinstall http://railsinstaller.org/en 2.cmd命令下安装selenium-webdriver gem包 g ...

  4. base64的编码

    计算机中的数据一般是由ascii编码,来存储的, 0---31以及127,表示的是控制字符: 32-126表示的是字符,包括空格,阿拉伯数字,大小写字母: 之后的128个字符,是不可见的字符, 在网络 ...

  5. Widget Factory (高斯消元解线性方程组)

    The widget factory produces several different kinds of widgets. Each widget is carefully built by a ...

  6. ASCII 码

    http://baike.baidu.com/link?url=Y4crTsVq678Z8fr92DAGIrqVHoexVXsMc-WKBMVUKGDq4KbEOuhWbUQXuQEtnlom4yln ...

  7. 联想拯救者win10+ubuntu14.04

    之前是win10+win7,默认win10启动,win7所在磁盘直接格式化即可(如果是win10+unbuntu不能这么搞,据说会导致win10也起不来) 按F2进bios 除了按这里fast boo ...

  8. flask 表单

    表单 在Web程序中,表单时和用户交互最常见的方式之一.用户注册.登录.撰写文章.编辑设置,无一不用到表单.不过,表单的处理不简单.要创建表单,验证用户输入的内容,向用户显示错误提示,还要获取并保存数 ...

  9. 20165215 2017-2018-2 《Java程序设计》第5周学习总结

    20165215 2017-2018-2 <Java程序设计>第5周学习总结 教材学习内容总结 chapter7 Java支持在一个类中声明另外一个类,这样的类称作内部类,而包含内部类的类 ...

  10. 转:WCF传送二进制流数据基本实现步骤详解

    来自:http://developer.51cto.com/art/201002/185444.htm WCF传送二进制流数据基本实现步骤详解 2010-02-26 16:10 佚名 CSDN   W ...