<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>切换底图</title>
|
<style>
|
.toolsbar-mappic {
|
overflow-x: hidden;
|
overflow-y: auto;
|
padding: 0;
|
}
|
|
.toolsbar-mappic ul li {
|
display: inline-block;
|
width: 64px;
|
list-style-type: none;
|
margin: 5px;
|
text-align: center;
|
cursor: pointer;
|
font-size: 12px;
|
color: #fff;
|
}
|
|
.mt-row {
|
height: 30px;
|
margin-top: 10px;
|
}
|
|
.mt-label {
|
height: 30px;
|
color: white;
|
width: 65px;
|
float: left;
|
margin-left: 30px;
|
line-height: 30px;
|
font-size: 12px;
|
}
|
|
.mt-content {
|
height: 30px;
|
color: white;
|
width: 230px;
|
float: left;
|
/* margin-left: 10px; */
|
}
|
|
.mapImg {
|
border-radius: 10px;
|
height: 64px;
|
width: 64px;
|
}
|
|
.mapImg:hover {
|
box-shadow: 0 0 8px #fff, 0 0 8px #fff;
|
}
|
.layui-slider-bar{
|
background: #2183cc !important;
|
}
|
.layui-slider-wrap-btn{
|
border: 2px solid #2183cc !important;
|
}
|
</style>
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
<script>
|
layui.use(['element', 'layer', 'form', 'slider'], function () {
|
var element = layui.element;
|
var form = layui.form;
|
var $ = layui.$
|
, slider = layui.slider;
|
slider.render({
|
elem: '#alpha'
|
, min: 0 //最小值
|
, max: 100 //最大值
|
, value:parent.viewer.scene.globe.baseColor.alpha*100
|
, input: false //输入框
|
, change: function(value){
|
let a = Number(value)/100.00;
|
parent.changeBaseLayerAlpha(a);
|
}
|
});
|
|
//监听折叠
|
element.on('collapse(test)', function (data) {
|
|
});
|
});
|
|
/**
|
*初始化页面参数
|
**/
|
function init(terrain) {
|
$('[name="terrain"]').prop('checked', terrain); //必须要用prop
|
|
}
|
</script>
|
</head>
|
|
<body>
|
<div class="toolsbar-mappic">
|
<ul id="basemaps" style="margin-left: 20px;margin-top: 10px;">
|
<li class="hover" onclick="changeMap(0)">
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/天地图影像.png">
|
</div>
|
<div>天地图影像</div>
|
</li>
|
<!-- <li class="hover" onclick="changeMap(1)">
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/微软.png">
|
</div>
|
<div>微软影像</div>
|
</li> -->
|
<li class="hover" onclick="changeMap(2)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/天地图电子.png">
|
</div>
|
<div>天地图电子</div>
|
</li>
|
<!-- <li class="hover" onclick="changeMap(3)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/ArcGis.png">
|
</div>
|
<div>ArcGIS影像</div>
|
</li> -->
|
<li class="hover" onclick="changeMap(4)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/百度影像.png">
|
</div>
|
<div>百度影像</div>
|
</li>
|
<li class="hover" onclick="changeMap(5)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/百度电子.png">
|
</div>
|
<div>百度电子</div>
|
</li>
|
<li class="hover" onclick="changeMap(6)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/高德影像.png">
|
</div>
|
<div>高德影像</div>
|
</li>
|
<li class="hover" onclick="changeMap(7)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/高德电子.png">
|
</div>
|
<div>高德电子</div>
|
</li>
|
<li class="hover" onclick="changeMap(8)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/腾讯影像.png">
|
</div>
|
<div>腾讯影像</div>
|
</li>
|
<li class="hover" onclick="changeMap(9)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/腾讯电子.png">
|
</div>
|
<div>腾讯电子</div>
|
</li>
|
<!-- <li class="hover" onclick="changeMap(10)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/OSM.png">
|
</div>
|
<div>OSM地图</div>
|
</li>
|
<li class="hover" onclick="changeMap(11)">
|
|
<div>
|
<img class="mapImg" src="../../assets/images/basemap/蓝色底图.png">
|
</div>
|
<div>蓝色底图</div>
|
</li> -->
|
|
</ul>
|
</div>
|
<!--是否显示地形-->
|
|
|
<div class="mt-row">
|
<div class="mt-label">透明度(%)</div>
|
<div class="mt-content">
|
<div id="alpha" style="width: 100px;padding-top: 12px;float: left;"></div>
|
<div>
|
<input id="terrain" style="margin-left: 50px; margin-top: 5px;" type="checkbox" name="terrain"
|
lay-skin="primary" title="显示地形" checked="true" onclick="check()" /> 显示地形
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
function changeMap(index) {
|
parent.changeBaseLayer(index);
|
}
|
function check() {
|
var terrain = document.getElementById('terrain');
|
parent.terrainshow(terrain.checked);
|
}
|
</script>
|
|
|
</body>
|
|
</html>
|
