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/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="../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="../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>
|
<style>
|
||||||
.top-panel {
|
.top-panel {
|
||||||
border: 1px solid #eceff9;
|
border: 1px solid #eceff9;
|
||||||
@ -49,6 +49,7 @@
|
|||||||
.flex-row {
|
.flex-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.flex-row > .layui-col-xs12,
|
.flex-row > .layui-col-xs12,
|
||||||
.flex-row > .layui-col-md6 {
|
.flex-row > .layui-col-md6 {
|
||||||
@ -111,6 +112,7 @@
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
.map-control-card .title {
|
.map-control-card .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -159,9 +161,17 @@
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.map-control-card {
|
||||||
|
position: static;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/ol@v10.5.0/dist/ol.js"></script>
|
<script src="../js/ol.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -221,6 +231,8 @@
|
|||||||
<select id="mapTypeSelect" lay-filter="mapType">
|
<select id="mapTypeSelect" lay-filter="mapType">
|
||||||
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
|
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
|
||||||
<option value="tianditu_normal">天地图-矢量</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_satellite">高德-卫星影像</option>
|
||||||
<option value="amap">高德-矢量</option>
|
<option value="amap">高德-矢量</option>
|
||||||
</select>
|
</select>
|
||||||
@ -355,12 +367,38 @@
|
|||||||
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.startsWith('tianditu_')) {
|
||||||
|
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.startsWith('tianditu_')) {
|
||||||
|
mapTypeSelect.value = 'amap';
|
||||||
|
switchMapType('amap');
|
||||||
|
layer.msg('天地图加载失败,已自动切换到高德地图');
|
||||||
|
layui.form.render('select');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
]
|
]
|
||||||
@ -369,12 +407,100 @@
|
|||||||
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.startsWith('tianditu_')) {
|
||||||
|
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.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