fix: 新增一些新的地图源
This commit is contained in:
fengyarnom
parent
499037fca6
commit
aac2bcbfd5
@ -10,7 +10,7 @@
|
||||
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
||||
<link rel="stylesheet" href="../css/public.css" media="all">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.5.0/ol.css">
|
||||
<link rel="stylesheet" href="../css/ol.css">
|
||||
<style>
|
||||
.top-panel {
|
||||
border: 1px solid #eceff9;
|
||||
@ -49,6 +49,7 @@
|
||||
.flex-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-row > .layui-col-xs12,
|
||||
.flex-row > .layui-col-md6 {
|
||||
@ -111,6 +112,7 @@
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
min-width: 220px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.map-control-card .title {
|
||||
font-size: 14px;
|
||||
@ -159,9 +161,17 @@
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.map-control-card {
|
||||
position: static;
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/ol@v10.5.0/dist/ol.js"></script>
|
||||
<script src="../js/ol.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -221,6 +231,8 @@
|
||||
<select id="mapTypeSelect" lay-filter="mapType">
|
||||
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
|
||||
<option value="tianditu_normal">天地图-矢量</option>
|
||||
<option value="tianditu_terrain">天地图-地形</option>
|
||||
<option value="tianditu_terrain_hybrid">天地图-地形混合</option>
|
||||
<option value="amap_satellite">高德-卫星影像</option>
|
||||
<option value="amap">高德-矢量</option>
|
||||
</select>
|
||||
@ -355,12 +367,38 @@
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
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.startsWith('tianditu_')) {
|
||||
mapTypeSelect.value = 'amap';
|
||||
switchMapType('amap');
|
||||
layer.msg('天地图加载失败,已自动切换到高德地图');
|
||||
layui.form.render('select');
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
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.startsWith('tianditu_')) {
|
||||
mapTypeSelect.value = 'amap';
|
||||
switchMapType('amap');
|
||||
layer.msg('天地图加载失败,已自动切换到高德地图');
|
||||
layui.form.render('select');
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
})
|
||||
]
|
||||
@ -369,12 +407,100 @@
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
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.startsWith('tianditu_')) {
|
||||
mapTypeSelect.value = 'amap';
|
||||
switchMapType('amap');
|
||||
layer.msg('天地图加载失败,已自动切换到高德地图');
|
||||
layui.form.render('select');
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
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.startsWith('tianditu_')) {
|
||||
mapTypeSelect.value = 'amap';
|
||||
switchMapType('amap');
|
||||
layer.msg('天地图加载失败,已自动切换到高德地图');
|
||||
layui.form.render('select');
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
tianditu_terrain: new ol.layer.Group({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&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.startsWith('tianditu_')) {
|
||||
mapTypeSelect.value = 'amap';
|
||||
switchMapType('amap');
|
||||
layer.msg('天地图加载失败,已自动切换到高德地图');
|
||||
layui.form.render('select');
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
tianditu_terrain_hybrid: new ol.layer.Group({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&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.startsWith('tianditu_')) {
|
||||
mapTypeSelect.value = 'amap';
|
||||
switchMapType('amap');
|
||||
layer.msg('天地图加载失败,已自动切换到高德地图');
|
||||
layui.form.render('select');
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://t{0-7}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&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.startsWith('tianditu_')) {
|
||||
mapTypeSelect.value = 'amap';
|
||||
switchMapType('amap');
|
||||
layer.msg('天地图加载失败,已自动切换到高德地图');
|
||||
layui.form.render('select');
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
})
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user