<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<!-- elementui -->
<script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
<link rel="stylesheet" href="http://bigemap.com/offline_data/newjunbiao/elementui.css" />
<title>圖層切換</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
#baseMap {
width: 100%;
height: 100%;
}
.tools {
width: 200px;
height: 30px;
position: absolute;
z-index: 9;
top: 40px;
right: 60px;
display: flex;
align-items: center;
background-color: aliceblue;
padding-left: 4px;
/* box-sizing: border-box; */
/* padding: 0 8px; */
}
.el-radio__original {
display: none !important;
}
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
.el-radio__inner {
box-shadow: none !important;
}
</style>
</head>
<body>
<div id="app">
<div class="tools">
<el-radio-group
v-model="radio"
style="display: inline-block"
@input="valueChange"
>
<el-radio :label="0">衛星地圖</el-radio>
<el-radio :label="1">電子地圖</el-radio>
</el-radio-group>
</div>
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
let satelliteMap = null;
let electronicMap = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {
radio: 0,
};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
bmgl.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/";
viewer = new bmgl.Viewer("baseMap", {
mapId: "bigemap.dc-satellite",
infoBox: false,
selectionIndicator: false,
});
satelliteMap = viewer.imageryLayers.get(0);
electronicMap = new bmgl.ImageryLayer(
new bmgl.BMImageryProvider({
mapId: "bigemap.dc-map",
})
);
},
//數值改變
valueChange(val) {
console.log(val);
switch (val) {
case 0: {
viewer.imageryLayers.remove(
electronicMap,
false
);
viewer.imageryLayers.add(satelliteMap);
break;
}
case 1: {
viewer.imageryLayers.remove(
satelliteMap,
false
);
viewer.imageryLayers.add(electronicMap);
break;
}
}
},
},
beforeDestroy() {
// 銷毀地球對象
viewer.entities.removeAll();
viewer.scene.primitives.removeAll();
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>