批量动态加载矢量图层
下载依赖
npm i axios
npm install ol
因为没有后台接口，所以值是写死的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<style>
/* * {
margin: 0;
padding: 0;
} */
ol,
ul {
list-style: none;
}
#map{
height: 96%;
}
</style>
</head>
<body>
<div style="width:70%;height: 800px;background: rgb(95, 126, 134);position: relative;">
<div id="map"></div>
<div id="wrapper">
<div id="location"></div>
</div>
</div>
<div style="width: 30%;height:800px;position: absolute;top: 0;right: 0;">
<h2 style="width: 100%;height: 40px;background: rgb(112, 118, 119);text-align: center;line-height: 40px;">识别结果
</h2>
<ul id="table" style="overflow-y: auto;height: 730px;">
<!-- <li style="font-size: 18px;margin: 10px;">导弹阵地</li>
<li style="font-size: 18px;margin: 10px;">导弹阵地</li>
<li style="font-size: 18px;margin: 10px;">导弹阵地</li>
<li style="font-size: 18px;margin: 10px;">导弹阵地</li>
<li style="font-size: 18px;margin: 10px;">导弹阵地</li> -->
</ul>
</div>
</body>
<script src="./js/ol.js" type="text/javascript"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
var format = 'image/png';
var bounds;
// setTimeout(() => {
let Missile = ["导弹阵地", "导弹阵地", "导弹阵地", "导弹阵地", "导弹阵地", "导弹阵地"];
let table = document.getElementById("table");
Missile.forEach((item) => {
console.log(item)
let aa = `<li style="font-size: 18px;margin: 10px;" class="dianji">${item}</li>`
table.innerHTML += aa
})
let dianji = document.getElementsByClassName("dianji");
Array.from(dianji).forEach(item => {
item.onclick = function () {
console.log(132);
//发请求获取对应的bounds
bounds = [124.53851127749562, 43.26202200177205, 127.08635431984413,
45.24985478827901
];
map.getView().fit(bounds, map.getSize());
}
})
// }, 200)
//经纬度显示
var mousePositionControl = new ol.control.MousePosition({
className: 'custom-mouse-position',
target: document.getElementById('location'),
// coordinateFormat: ol.coordinate.createStringXY(5),
undefinedHTML: ' '
})
//加载谷歌地图图层
var tiled = new ol.layer.Tile({
opacity: 1,
source: new ol.source.XYZ({
url: "http://mt2.google.cn/vt/lyrs=y&src=app&x={x}&y={y}&z={z}&s=G", //地图路径也可用ol官网上自带的地图图层，如上：
}),
});
var aaa = [tiled];
//请求获取图层名称
let ary = ["shp:4444", "shp:1111"];
//默认显示第一个图层的定位
bounds = [124.53851127749562, 43.26202200177205, 127.08635431984413,
45.24985478827901
];
for (var i = 0; i < 2; i++) {
var shp = 'shp' + i;
shp = new ol.layer.Image({
opacity: 1,
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.1.159:8080/geoserver/shp/wms', //接口返回的地址
params: {
'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": ary[i], //图层名称，用户可以根据需求而改变
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
aaa.push(shp)
}
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu',
global: true
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([mousePositionControl]),
target: 'map',
layers: aaa,
view: new ol.View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize());
</script>
</html>