Imdroid/security-monitor
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: 地图源加载失败可自动切换到备选地图源

Browse Source
This commit is contained in:
fengyarnom 2025-06-13 22:59:34 +08:00
parent 4ced686ed2
commit 705b004d62
1 changed files with 78 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
sec-beidou/src/main/resources/templates/page/device_overview.html
View File

@ -229,9 +229,9 @@
<form class="layui-form"> <form class="layui-form">
<div class="layui-form-item"> <div class="layui-form-item">
<select id="mapTypeSelect" lay-filter="mapType"> <select id="mapTypeSelect" lay-filter="mapType">
<option value="tianditu_satellite">天地图-卫星影像</option> <option value="tianditu_satellite" selected>天地图-卫星影像</option>
<option value="tianditu_normal">天地图-矢量</option> <option value="tianditu_normal">天地图-矢量</option>
<option value="amap_satellite" selected>高德-卫星影像</option> <option value="amap_satellite">高德-卫星影像</option>
<option value="amap">高德-矢量</option> <option value="amap">高德-矢量</option>
</select> </select>
</div> </div>
@ -365,12 +365,48 @@
layers: [ layers: [
new ol.layer.Tile({ new ol.layer.Tile({
source: new ol.source.XYZ({ source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY url: 'https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: function(imageTile, src) {
imageTile.getImage().src = src;
imageTile.getImage().onerror = function() {
// 天地图加载失败时切换到高德地图
var mapTypeSelect = document.getElementById('mapTypeSelect');
if(mapTypeSelect.value === 'tianditu_satellite') {
mapTypeSelect.value = 'amap_satellite';
switchMapType('amap_satellite');
layer.msg('天地图卫星图加载失败,已自动切换到高德卫星图');
layui.form.render('select');
} else if(mapTypeSelect.value === 'tianditu_normal') {
mapTypeSelect.value = 'amap';
switchMapType('amap');
layer.msg('天地图矢量图加载失败,已自动切换到高德矢量图');
layui.form.render('select');
}
};
}
}) })
}), }),
new ol.layer.Tile({ new ol.layer.Tile({
source: new ol.source.XYZ({ source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY url: 'https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: function(imageTile, src) {
imageTile.getImage().src = src;
imageTile.getImage().onerror = function() {
// 天地图加载失败时切换到高德地图
var mapTypeSelect = document.getElementById('mapTypeSelect');
if(mapTypeSelect.value === 'tianditu_satellite') {
mapTypeSelect.value = 'amap_satellite';
switchMapType('amap_satellite');
layer.msg('天地图卫星图加载失败,已自动切换到高德卫星图');
layui.form.render('select');
} else if(mapTypeSelect.value === 'tianditu_normal') {
mapTypeSelect.value = 'amap';
switchMapType('amap');
layer.msg('天地图矢量图加载失败,已自动切换到高德矢量图');
layui.form.render('select');
}
};
}
}) })
}) })
] ]
@ -379,12 +415,48 @@
layers: [ layers: [
new ol.layer.Tile({ new ol.layer.Tile({
source: new ol.source.XYZ({ source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY url: 'https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: function(imageTile, src) {
imageTile.getImage().src = src;
imageTile.getImage().onerror = function() {
// 天地图加载失败时切换到高德地图
var mapTypeSelect = document.getElementById('mapTypeSelect');
if(mapTypeSelect.value === 'tianditu_satellite') {
mapTypeSelect.value = 'amap_satellite';
switchMapType('amap_satellite');
layer.msg('天地图卫星图加载失败,已自动切换到高德卫星图');
layui.form.render('select');
} else if(mapTypeSelect.value === 'tianditu_normal') {
mapTypeSelect.value = 'amap';
switchMapType('amap');
layer.msg('天地图矢量图加载失败,已自动切换到高德矢量图');
layui.form.render('select');
}
};
}
}) })
}), }),
new ol.layer.Tile({ new ol.layer.Tile({
source: new ol.source.XYZ({ source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY url: 'https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: function(imageTile, src) {
imageTile.getImage().src = src;
imageTile.getImage().onerror = function() {
// 天地图加载失败时切换到高德地图
var mapTypeSelect = document.getElementById('mapTypeSelect');
if(mapTypeSelect.value === 'tianditu_satellite') {
mapTypeSelect.value = 'amap_satellite';
switchMapType('amap_satellite');
layer.msg('天地图卫星图加载失败,已自动切换到高德卫星图');
layui.form.render('select');
} else if(mapTypeSelect.value === 'tianditu_normal') {
mapTypeSelect.value = 'amap';
switchMapType('amap');
layer.msg('天地图矢量图加载失败,已自动切换到高德矢量图');
layui.form.render('select');
}
};
}
}) })
}) })
] ]