A1.0.2 离线瓦片用ol3显示多功能地图

昨天写了如何下载瓦片并且贴了如何调用瓦片的html代码，今天来一个稍微全面些的。
参考魏经理和openlayers官方网站API写了这么多。
能实现什么？
1.地图放大缩小，全屏。并且可自由更改参数(已写入参数)
2.鹰眼。
3.公里尺
4.作者信息如何添加
5.自动加载默认位置(不用说肯定的)
先预览截图：

废话少说，代码才是王道。

example0.3 多功能离线瓦片.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>GIS 0.1</title><meta name="description" content="GIS1.1 测试版" /><meta name="author" content="刘壮 20151219" /><!--Openlayers 3--><link href="../js/ol3.2.0/ol.css" rel="stylesheet" /><script src="../js/ol3.2.0/ol.js"></script>
</head>
<body scroll="no"><div id="map" style="width:100%"></div><script src="../js/myScript/map.js"></script>
</body>
</html>

../js/myScript/map.js

//******************************************//
//本GIS由Openlayers 3插件支持，请注意引用正确的js，css文件
//编者：刘壮 20151219
//1. 第一次使用，请配置这里
//   【*】标识为必须修改的参数，请确保正确
//******************************************////【*】 地图瓦片文件目录地址 ps：这个一定要设置正确的瓦片文件的位置，不然显示不出来
//var url = '../img/{z}/{y}/{x}.png';//{z} {x} {y} 是占位符，ol会识别的 ps:这个是我用OLOffLineMapOpenEXE工具下载的地图数据的调用格式
var url = 'http://192.168.0.71:8080/{z}/{z}_{y}_{x}.jpg';//{z} {x} {y} 是占位符，ol会识别的 ps：这个是魏经理下载的地图数据个调用格式
//【*】 地图设置中心  113.708003, 34.772622  同时用下载工具找个你要作为中心点的坐标
var center = ol.proj.transform([113.708003, 34.772622], 'EPSG:4326', 'EPSG:3857');
// 默认的缩放级别
var zoomlevel = 12;//******************************************//
//2. 下面的代码基本设置好了，基本不需要更改
//    ps:可根据需求选择性修改，各种参数也写了很全
//    只需要找到对应的参数位置修改参数值就行
//    部分英文注释是从Openlayers英文官网贴过来的，原注释
//******************************************//
//鹰眼参数
var overviewMapControl = new ol.control.OverviewMap({className: 'ol-overviewmap ol-custom-overviewmap',layers: [new ol.layer.Tile({ source: new ol.source.OSM({ url: url }) })],collapseLabel: '\u00BB',label: '\u00AB',collapsed: false
});
//地图初始化
var map = new ol.Map({//An ol.View object represents a simple 2D view of the mapview: new ol.View({center: center,//The initial center for the view.projecton: 'EPSG:3857',// Default is EPSG:3857zoomFactor: 2,//The zoom factor used to determine the resolution constraint. Default is 2.minZoom: 0,//缩放最小级别maxZoom: 19,//缩放最大级zoom:zoomlevel//缩放级别}),target: 'map',//基本的按钮操作在controls这里controls: ol.control.defaults({attributionOptions: ({ collapsible: true }),zoomOptions: ({duration: 250,//Animation duration in milliseconds. Default is 250.zoomInTipLabel: '放大',//Text label to use for the button tip. Default is Zoom inzoomOutTipLabel: '缩小',//Text label to use for the button tip. Default is Zoom outclassName: 'ol-zoom',//CSS class name. Default is ol-zoom.zoomInLabel: '+',//Text label to use for the zoom-in button. Default is +.zoomOutLabel:'-',//默认 - 号，缩小按钮的标签内容})}).extend([overviewMapControl,//添加鹰眼new ol.control.ScaleLine({minWidth:64}),//比例尺new ol.control.FullScreen({//全屏className: 'ol-full-screen',//css样式，默认ol-full-screentipLabel:'全屏',//鼠标放上后的提示内容})]),layers: [new ol.layer.Tile({opacity: 0.5,//透明度  Default is 1.source: new ol.source.OSM({attributions: [new ol.Attribution({ html: '&copy; 刘壮 2015-12-19' })],//Author Informationurl:url})})]
});//添加一个使用离线瓦片地图层
var offlineMapLayer = new ol.layer.Tile({source: new ol.source.XYZ({url:url})
});
//把离线地图瓦片添加到地图层上
map.addLayer(offlineMapLayer);

最后：好了，基本就是这样。什么？没有瓦片地图？自己去我gis地图分类，A1.0.1这个文章下载工具吧。有些工具下载的地图产生的文件不一，我这个map.js里面列出来了两种写法，请自行测试。由于瓦片文件过多而容量过大，暂不提供。
有问题？请看官网喽。也可以找我讨论，PS：本人目前对这块还是新手一枚

A1.0.2 离线瓦片用ol3显示多功能地图相关推荐

ios 高德地图加载瓦片地图_OpenLayers加载谷歌地球离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
OpenLayers加载谷歌地球离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
不同分辨率加载不同js_OpenLayers加载百度离线瓦片地图（完美无偏移）
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
axtoolbarcontrol加载图层后还是灰的_OpenLayers加载百度离线瓦片地图（完美无偏移）...
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
无偏移谷歌瓦片地址_OpenLayers加载百度离线瓦片地图（完美无偏移）
百度地图离线瓦片下载使用"迈高图-地图数据下载器"(以下简称:迈高图),演示数据以湖南省长沙市芙蓉区12~18级瓦片数据为例. 如果对本文有任何疑问或建议,欢迎到这里发文讨论. 下 ...
ios 高德地图加载瓦片地图_OpenLayers加载高德地图离线瓦片地图
谷歌地球离线瓦片下载使用"迈高图-地图数据下载器"(以下简称:迈高图),演示数据以湖南省长沙市7~16级瓦片数据为例. 下载演示数据迈高图选择谷歌地球为当前地图源,地图图层选择为 ...
A1.0.1 如何下载地图瓦片？记录我的实现过程
前端时间根据经理对GIS的介绍,使我有了一些初步了解,上周试图搞一下Openlayers这玩意,联网情况下地图加载正常,在断网情况下,然并卵. 那么,断网怎么办? 所以,今天无意间打开了Openlay ...
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
搭建离线瓦片地图服务并用QGIS显示离线地图
需求的提出: 由于业务需求,展示GIS时,不能连接互联网,也就是说不能调用互联网上提供的地图服务. 因为不能联网,所以必须在局域网或本机上搭建离线瓦片地图服务.本文讲述如何搭建离线瓦片 ...

A1.0.2 离线瓦片用ol3显示多功能地图

A1.0.2 离线瓦片用ol3显示多功能地图相关推荐

最新文章

热门文章