注：当前使用的是 ol 「5.3.0」 版本，天地图使用的key请到天地图官网申请，并替换为自己的key
地图控件是一些用来与地图进行简单交互的工具，地图库预先封装好，可以供开发者直接使用。OpenLayers具有大部分常用的控件，如「缩放、导航、鹰眼、比例尺、旋转、鼠标位置」等。这些控件都是基于 ol.control.Control基类进行封装的，可以通过Map对象的controls属性或者调用addControl方法添加到地图中。地图控件通过HTML插入到Map页面，可以利用CSS调整地图控件样式。OpenLayers初始化地图时利用ol.control.default默认加载了缩放控件（ol.control.Zoom）
本节主要介绍「图层控件」。
1. 图层控件
在实际项目中，通常需要将地图加载资源以图层资源目录树的形式进行展示，便于用户查看。所以需要实现一个图层列表功能，对数据资源进行管理操作。
1.1. 创建图层列表函数
图层列表函数需要传入Map对象和图层树ID，用来显示加载图层，图层列表函数可以控制图层的显隐。
function loadLayersControl(map,id) {
// 图层列表容器
const treeContent = document.getElementById(id)
// 获取地图中所有图层，通过map的getLayers方法获取的是一个集合，
// 还需要调用getArray方法取到图层数组
const layers = map.getLayers().getArray()
for (let i = 0; i < layers.length; i++) {
// 获取每个图层名称，是否可见属性
const layer = layers[i]
// 新增li元素，用来保存图层项
const elementLi = document.createElement("li")
// 创建复选框元素
const elementInput = document.createElement('input')
elementInput.type = "checkbox"
elementInput.name = "layers"
// 添加子节点
elementLi.appendChild(elementInput)
treeContent.appendChild(elementLi)
// 创建label元素
const elementLabel = document.createElement('label')
elementLabel.className = "layer"
// 设置图层名称，图层get方法获取键值
setInnerText(elementLabel,layer.get("title"))
elementLi.appendChild(elementLabel)
// 设置图层默认显示状态
elementInput.checked = true
// 为checkbox添加变更事件
addChangeEvent(elementInput, layer)
}
}
1.2. 创建复选框事件
在图层名前通过是否勾选复选框控制图层显示状态。
// 为checkbox 元素绑定变更事件
function addChangeEvent(element, layer) {
element.onclick = evt=> {
//==========================================================================================//
//==========================================================================================//
//==========================================================================================//
//=====================这里有个bug，通过layer方法setVisible设置图层显隐不生效=================//
//==========================================================================================//
//==========================================================================================//
//==========================================================================================//
layer.set('visible', element.checked)
}
}
1.3. 创建地图对象
添加天地图矢量、影像以及注记图层。可以在Map属性layers中添加图层，也可以使用addLayer方法添加图层。
// _c表示经纬度，_w表示投影
const tdtLayer = new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
crossOrigin: "anoymous",
wrapX: false
})
})
const tdtzjLayer = new ol.layer.Tile({
title: "天地图矢量注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const tdtImageLayer = new ol.layer.Tile({
title: "天地图影像图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const tdtImagezjLayer = new ol.layer.Tile({
title: "天地图影像注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const map = new ol.Map({
target: "map",
// layers:[tdtLayer,tdtzjLayer,tdtImageLayer,tdtImagezjLayer],
loadTilesWhileInteracting: true,
view: new ol.View({
center: [11444274, 12707441],
zoom: 5,
worldsWrap: true,
minZoom: 1,
maxZoom: 20,
//rotation:Math.PI // 设置旋转角度
}),
controls: ol.control.defaults().extend([
new ol.control.MousePosition({
target:document.getElementById('mouse-position')
})
])
})
map.addLayer(tdtLayer)
map.addLayer(tdtzjLayer)
map.addLayer(tdtImageLayer)
map.addLayer(tdtImagezjLayer)
1.4. 调用图层树方法
最后，在加载完图层后调用图层树方法。
loadLayersControl(map,"layer-tree")
2. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加载图层控件</title>
<meta charset="utf-8" />
<script src="../libs/js/ol-5.3.3.js"></script>
<script src="../libs/js/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="../libs/css//ol.css">
<style>
* {
padding: 0;
margin: 0;
font-size:14px;
font-family:'微软雅黑'
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
/*图层控件的样式设置*/
.layer-control {
position: absolute;
z-index: 999;
right: 10px;
top: 5px;
bottom: 5px;
min-width: 200px;
max-height: 200px;
color: #ddd;
background-color: #0c0c0c96;
border: 1px #f2f2f2 solid;
border-radius: 5px
}
.layer-control .title {
margin:10px;
font-weight:bold;
font-size:15px;
}
.layer-tree li {
margin:5px 10px;
list-style:none;
}
</style>
</head>
<body>
<div id="map" title="地图显示">
<div class="layer-control" id="layer-control">
<div class="title"><label for="">图层列表</label></div>
<ul id="layer-tree" class="layer-tree"></ul>
</div>
</div>
</body>
</html>
<script>
function loadLayersControl(map,id) {
// 图层列表容器
const treeContent = document.getElementById(id)
// 获取地图中所有图层，通过map的getLayers方法获取的是一个集合，
// 还需要调用getArray方法取到图层数组
const layers = map.getLayers().getArray()
for (let i = 0; i < layers.length; i++) {
// 获取每个图层名称，是否可见属性
const layer = layers[i]
// 新增li元素，用来保存图层项
const elementLi = document.createElement("li")
// 创建复选框元素
const elementInput = document.createElement('input')
elementInput.type = "checkbox"
elementInput.name = "layers"
// 添加子节点
elementLi.appendChild(elementInput)
treeContent.appendChild(elementLi)
// 创建label元素
const elementLabel = document.createElement('label')
elementLabel.className = "layer"
// 设置图层名称，图层get方法获取键值
setInnerText(elementLabel,layer.get("title"))
elementLi.appendChild(elementLabel)
// 设置图层默认显示状态
elementInput.checked = true
// 为checkbox添加变更事件
addChangeEvent(elementInput, layer)
}
}
// 为checkbox 元素绑定变更事件
function addChangeEvent(element, layer) {
element.onclick = evt=> {
// 这里有个bug，通过layer方法setVisible设置图层显隐不生效
layer.set('visible', element.checked)
}
}
// 动态设置元素文本内容
function setInnerText(element, text) {
if (typeof element.textContent === "string") {
element.textContent = text
} else {
element.innerText = text
}
}
// _c表示经纬度，_w表示投影
const tdtLayer = new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
crossOrigin: "anoymous",
wrapX: false
})
})
const tdtzjLayer = new ol.layer.Tile({
title: "天地图矢量注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const tdtImageLayer = new ol.layer.Tile({
title: "天地图影像图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const tdtImagezjLayer = new ol.layer.Tile({
title: "天地图影像注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const map = new ol.Map({
target: "map",
// layers:[tdtLayer,tdtzjLayer,tdtImageLayer,tdtImagezjLayer],
loadTilesWhileInteracting: true,
view: new ol.View({
center: [102.59789, 30.62588],
zoom: 5,
worldsWrap: true,
minZoom: 1,
maxZoom: 20,
//rotation:Math.PI // 设置旋转角度
}),
// 鼠标控件：鼠标在地图上移动时显示坐标信息。
controls: ol.control.defaults().extend([
new ol.control.MousePosition({
target:document.getElementById('mouse-position')
})
])
})
map.addLayer(tdtLayer)
map.addLayer(tdtzjLayer)
map.addLayer(tdtImageLayer)
map.addLayer(tdtImagezjLayer)
loadLayersControl(map,"layer-tree")
</script>
原文始发于微信公众号（GIS之路）：OpenLayers加载常用控件（二）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/234714.html
