^ 关注我，带你一起学GIS ^
注：当前使用的是 ol 9.2.4 版本，天地图使用的key请到天地图官网申请，并替换为自己的key
前言
随着GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样的GIS厂商有各自的数据源格式，也有Google、百度、高德、腾讯提供的GIS资源，如何加载各种GIS数据源，是WebGIS开发要解决的一个关键问题。
本节主要介绍OpenLayers加载ArcGIS瓦片数据，其中所指瓦片数据均为栅格瓦片数据。
1. 什么是瓦片数据
瓦片数据是按固定大小分层切割的一系列图片集。由GIS桌面端或者GIS服务器按要求切割存储在磁盘上，按照层级，行、列顺序进行组织。如何研究瓦片数据结构和瓦片切片方式不是本文的重点！！。
2. 如何加载瓦片数据
通过GIS服务器接口：按照各厂商或者组织的数据组织结构读取。 通过读取静态图片：读取瓦片数据进行拼接处理。
3. 加载ArcGIS瓦片数据
OpenLayers提供了TileArcGISRest类用来加载ArcGIS切片数据源。使用起来很方便，像其它图层和数据源一样，将创建好的切片数据源放于切片图层中即可。ArcGIS 服务地址：https://server.arcgisonline.com/arcgis/rest/services
// 创建ArcGIS Server Rest 瓦片图层
const arcgisSource = new ol.source.TileArcGISRest({
// ArcGIS世界影像图
url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
wrapX:false
})
const arcgisLayer = new ol.layer.Tile({
source:arcgisSource
})
map.addLayer(arcgisLayer)
4. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OpenLayers 加载ArcGIS切片</title>
<meta charset="utf-8" />
<script src="../../libs/js/ol9.2.4.js"></script>
<script src="../../js/config.js"></script>
<link rel="stylesheet" href="../../libs/css/ol9.2.4.css">
<style>
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: '微软雅黑';
}
html,
body {
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
}
#top-content {
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
color: #fff;
text-align: center;
font-size: 32px;
}
#top-content span {
font-size: 32px;
}
.ol-mouse-position {
padding: 5px;
top: 10px;
height: 40px;
line-height: 40px;
background: #060505ba;
text-align: center;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="top-content">
<span>OpenLayers 聚类分析</span>
</div>
<div id="map" title=""></div>
<div class="mouse-position" id="mouse-position"></div>
</body>
</html>
<script>
//==============================================================================//
//============================天地图服务参数简单介绍============================//
//================================vec：矢量图层=================================//
//================================img：影像图层=================================//
//================================cva：注记图层=================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影============//
//==============================================================================//
const TDTImgLayer = new ol.layer.Tile({
title: "天地图影像图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const TDTImgCvaLayer = new ol.layer.Tile({
title: "天地图影像注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [11444274, 3857662],
zoom: 5,
worldsWrap: true,
minZoom: 1,
maxZoom: 20,
projection: "EPSG:3857"
}),
// 鼠标控件：鼠标在地图上移动时显示坐标信息。
controls: ol.control.defaults.defaults().extend([
// 加载鼠标控件
new ol.control.MousePosition()
])
})
/**
* ArcGIS 服务地址：https://server.arcgisonline.com/arcgis/rest/services
*/
// 创建ArcGIS Server Rest 瓦片图层
const arcgisSource = new ol.source.TileArcGISRest({
// ArcGIS世界影像图
url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
wrapX: false
})
const arcgisLayer = new ol.layer.Tile({
source: arcgisSource
})
map.addLayer(TDTImgLayer)
map.addLayer(arcgisLayer)
map.addLayer(TDTImgCvaLayer)
</script>
❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
