arcgis前端(3)-----＞基础篇–自定义地图优化/隐藏or显示子图层
文章目录
前言
上一篇介绍了如何使用代码去加载自定义arcgis的地图及如何上传一个自定义的arcgis地图，本篇将介绍自定义地图的优化方案1隐藏or显示子图层。
实现效果展示
一、常见问题
Q：为什么要优化呢？
A：在有的时候我们通常只需要某样东西而不需要所有的东西，这就像大猩猩与香蕉的故事。例如：小明是做水质管理的，那么关注的大多数都是与河流山川有关系的数据而不需要去关注什么收费站呀、什么停车场啊这些多余的数据。而且当数据多的时候往往渲染的时间也会增加，当我们只显示我们需要的数据这就达到了优化的作用(减少了渲染数据的时间)。
Q：什么是子图层？
A：一个图层里的图层，如下图：
二、具体实现
1.通过导出时设置
在我们发布自定义图层时我们可以只勾选需要的基础的子图层来进行基础显示发布，后期通过展示页面进行其它子图层的显示/隐藏，如之前我们的地图我们默认只需要显示省会、地级名以及县界
注：也可以直接通过代码控制不用在地图上设置，可直接阅读2.通过代码动态显示/隐藏子图层
勾选之后进行覆盖发布(因为在上一篇中已经发布过了，所以我们这里选择覆盖发布)
等待发布成功后，打开之前设置的服务地址打开地图就能看到新的变动
发布成功后，我们可以发现现在的比之前的加载速度快了很多，但数据没之前多了，这时我们就需要通过代码去做一个多选的图层显示/隐藏功能
2.通过代码动态显示/隐藏子图层
相关示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#leftPanel {
width: 15%;
height: 92vh;
position: fixed;
left: 30px;
top: 30px;
background-color: #eee;
border: 1px solid gray;
border-radius: 16px;
overflow: auto;
padding-bottom: 20px;
}
#leftPanel>div {
padding: 20px;
padding-bottom: 0;
}
body ::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
/*高宽分别对应横竖滚动条的尺寸*/
border-radius: 5px;
/* height: 5px; */
}
body ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background-color: #cecece;
border-radius: 5px;
height: 5px;
/*background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);*/
}
body ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #f5f5f5;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer"], function (Map, MapView, MapImageLayer) {
const map = new Map();
// points to the states layer in a service storing U.S. census data
// 加载自定义地图
let layer = new MapImageLayer({
url: "http://localhost:6080/arcgis/rest/services/MyMaps/电子地图/MapServer",//地图地址
});
/**
* 获取该地图的所有子图层，并对其进行相关操作
* 要设置子图层是否显示只需要修改该子图层的visible来实现是否显示
*/
layer.when(() => {
const needShow = ['省道_polyline', '国道_polyline'];
layer.sublayers.map((item, index) => {
// 设置默认加载时需要显示的子图层，这里我们通过title来判断 也可以通过id判断
if (needShow.includes(item.title)) {
item.visible = true;
}
// 将子图层名称添加到左侧面板
$('#leftPanel').append(`
<div>
<input ${
item.visible ? 'checked' : ''} id="layer_${
index}" name="${
item.id}" value="${
item.visible}" type="checkbox">
<label for="layer_${
index}">${
item.title}</label>
</div>
`);
});
});
map.add(layer); // adds the layer to the map
// 创建一个map视图 后期视图上的操作都通过这个对象来操作
const view = new MapView({
container: "viewDiv",//html容器，即将地图添加到哪个容器里
map: map,
zoom: 4,
// center: [15, 65] // longitude, latitude 地图初始位置
logo: false //不显示Esri的logo
});
// 事件
window.onload = () => {
// 修改子图层显示or隐藏状态
$('#leftPanel>div>input').on('click', e => {
const node=$(e.target);
const sublayer = layer.findSublayerById(parseInt(node.attr('name')));
sublayer.visible=!sublayer.visible;
})
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<!-- 左侧面板 -->
<div id="leftPanel"> </div>
</body>
</html>