标签：shp map ol 矢量图 批量 阵地 var new 加载
批量动态加载矢量图层
下载依赖
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>
标签：shp,map,ol,矢量图,批量,阵地,var,new,加载 来源： https://blog.csdn.net/weixin_48058348/article/details/110678195
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。