Openlayer4 加载 ArcGIS 离线瓦片地图
本来以前是用 openlayer2, 在太乐地图下载的地图, 会有模版. 之前直接在此基础上更改的代码, 但是随着项目的发展功能的增多, openlayer2 越来越不适应现在的项目, 所以决定换成 openlayer4, 今天给大家说的是 Openlayer4 加载 ArcGIS 离线瓦片地图.
步骤 1: 下载地图 (我用的是太乐地图下载器)
[站外图片上传中...(image-80b6a-1515736060536)]
由于大小的原因, 我们选择前 6 级下载
[站外图片上传中...(image-8f9a3c-1515736060536)]
步骤 2: 导出 ArcGIS 地图
导出 ArcGIS 地图
步骤 3: 复制出我们想要的地图瓦片文件
[站外图片上传中...(image-e999d7-1515736060536)]
这个样子的
[站外图片上传中...(image-f6774d-1515736060536)]
步骤 4: 代码这样写, 里面有注释可以修改
<title>ol加载ArcGIS本地切片</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
源码下载地址: https://github.com/1294083463/openlayersLoadArcGIS
<link rel="stylesheet" href="js/ol.CSS">
<script src="js/ol.js">
</script>
</head>
<body>
<div id="map">
</div>
<script type="text/javascript">
// 设置地图中心,此处进行坐标转换, 把EPSG:4326(经纬度坐标),转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标,因为ol默认使用的是EPSG:3857坐标
//[106.677, 36.7388]是下载地图的中心经纬度
var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');
//创建地图
var map = new ol.Map({
view: new ol.View({
center: centerPos,
//地图中心位置
zoom: 0 //地图初始层级
}),
//添加地图图层
//这里注销在下面添加新的离线地图图层
/*layers: [
new ol.layer.Tile({
source:new ol.source.OSM()
})
],*/
//将地图添加到的map容器中
target: 'map'
});
//给8位字符串文件名补0
function zeroFill(num, len, radix) {
var str = num.toString(radix || 10);
while (str.length < len) {
str = "0" + str;
}
return str;
}
// ol.source.XYZ添加瓦片地图的层
var tileLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
tileUrlFunction: function(coordinate) {
//alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
var x = 'C' + zeroFill(coordinate[1], 8, 16);
var y = 'R' + zeroFill( - coordinate[2] - 1, 8, 16);
var z = 'L' + zeroFill(coordinate[0], 2, 10);
return '_alllayers/' + z + '/' + y + '/' + x + '.jpg'; //这里可以修改地图路径
},
projection: 'EPSG:3857'
})
});
map.addLayer(tileLayer); //添加到map里面
</script>
</body>
</html>
作者
作者: 孟庆岳
官网: 百度搜索 ( shmily 科技 )
CSDN 博客: http://blog.csdn.net/qq_27118895
github: https://github.com/1294083463/openlayersLoadArcGIS
来源: http://www.jianshu.com/p/2b92e21132de