您的位置：首页 > 其它

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

2015-12-19 11:55 435 查看

昨天写了如何下载瓦片并且贴了如何调用瓦片的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 map
view: new ol.View({
center: center,//The initial center for the view.
projecton: 'EPSG:3857',// Default is EPSG:3857
zoomFactor: 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 in
zoomOutTipLabel: '缩小',//Text label to use for the button tip. Default is Zoom out
className: '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-screen
tipLabel:'全屏',//鼠标放上后的提示内容
})
]),
layers: [
new ol.layer.Tile({
opacity: 0.5,//透明度  Default is 1.
source: new ol.source.OSM({
attributions: [new ol.Attribution({ html: '© 刘壮 2015-12-19' })],//Author Information
url:url
})
})
]
});

//添加一个使用离线瓦片地图层
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url:url
})
});
//把离线地图瓦片添加到地图层上
map.addLayer(offlineMapLayer);

最后：好了，基本就是这样。什么？没有瓦片地图？自己去我gis地图分类，A1.0.1这个文章下载工具吧。有些工具下载的地图产生的文件不一，我这个map.js里面列出来了两种写法，请自行测试。由于瓦片文件过多而容量过大，暂不提供。

有问题？请看官网喽。也可以找我讨论，PS：本人目前对这块还是新手一枚

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航