Skip to content

M
mmc-stl-vue2
提交 afacdbff 作者: 翁进城
操作

fix: 星图地球源地址

上级 8536721b
正在显示 包含 110 行增加 和 67 行删除
src/components/MMCFlightControlCenter/components/cesiumLayer/index.vue
<template>
<div id="layer-container" class="cpt-cesium_layer">
</div>
<div id="layer-container" class="cpt-cesium_layer"></div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import _3dList from "./lib/3d";
import _2dList from './lib/2d';
import _2dList from "./lib/2d";
export default {
name: 'CesiumLayer',
name: "CesiumLayer",
data() {
return {
viewer: null,
......@@ -24,11 +23,13 @@ export default {
};
},
computed: {
...mapState('MMCFlightControlCenter', ['cesiumImagesLayers', 'cesium3DModels']),
...mapState("MMCFlightControlCenter", [
"cesiumImagesLayers",
"cesium3DModels",
]),
...mapState(["mapMode"]),
},
watch: {
},
watch: {},
mounted() {
if (!window.$mmc) {
window.$mmc = {};
......@@ -91,23 +92,33 @@ export default {
`layer-container`,
viewerOptions
);
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'cesiumViewer',
value: this.viewer
})
this.$store.commit("MMCFlightControlCenter/setState", {
key: "cesiumViewer",
value: this.viewer,
});
// 卫星图
this.imageryLayers.satellite = this.viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
maximumLevel: 18,
})
);
this.imageryLayers.satellite =
this.viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
maximumLevel: 18,
})
);
// 星图地球卫星影像 https://datacloud.geovisearth.com/
// 会员源地址 url: "https://tiles{s}.geovisearth.com/plus/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=",
this.imageryLayers.star_satellite =
this.viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: "https://tiles{s}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&token=4c504c0d9bdd48c3ba76731ffd14a536f6277d0c334d8f8a07652e26763a928d",
subdomains: "123",
maximumLevel: 18,
})
);
// 街道图
this.imageryLayers.street = this.viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url:
"https://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
url: "https://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
})
);
// 夜视图
......@@ -120,8 +131,7 @@ export default {
// 地图标注
this.imageryLayers.text = this.viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url:
"https://{s}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE={style}&TILEMATRIXSET={TileMatrixSet}&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=a5e0a8dcf07f40afe19b76bf8a32eef0",
url: "https://{s}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE={style}&TILEMATRIXSET={TileMatrixSet}&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=a5e0a8dcf07f40afe19b76bf8a32eef0",
layer: "cia",
style: "default",
format: "tiles",
......@@ -147,13 +157,15 @@ export default {
"15",
"16",
"17",
"18"
"18",
],
maximumLevel: 18
maximumLevel: 18,
})
)
);
this.imageryLayers.night.show = false;
this.imageryLayers.street.show = false;
this.imageryLayers.star_satellite.show = false;
this.viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
this.init_lng,
......@@ -162,10 +174,10 @@ export default {
),
});
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'cesiumImagesLayers',
value: this.imageryLayers
})
this.$store.commit("MMCFlightControlCenter/setState", {
key: "cesiumImagesLayers",
value: this.imageryLayers,
});
// 加载三维倾斜
window.$mmc._3d = [];
......@@ -185,10 +197,10 @@ export default {
obj.style3D.bottomAltitude = -20;
}
});
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'cesium3DModels',
value: window.$mmc._3d
})
this.$store.commit("MMCFlightControlCenter/setState", {
key: "cesium3DModels",
value: window.$mmc._3d,
});
// 二维影像缓存加载方式
window.$mmc._2d = [];
......@@ -234,7 +246,7 @@ export default {
.cesium-viewer-bottom {
display: none;
}
.cesium-viewer-zoomIndicatorContainer {
display: none;
}
......
src/components/MMCFlightControlCenter/components/mapImageSwitch/index.vue
......@@ -2,31 +2,45 @@
<template>
<div class="cpt-hwkeys">
<div class="hwkeys-wrap cp" @click="change" @mouseout="likai">
<div :class="{
<div
:class="{
'hwkeys-item': 1,
'hwkeys-item-satellite': 1,
}" v-for="item in tabs" :key="item.id" v-show="item.id == current" @click="handle_change(item.id)">
}"
v-for="item in tabs"
:key="item.id"
v-show="item.id == current"
@click="handle_change(item.id)"
>
<!-- <div class="typeNmae">{{ item.name }}</div> -->
</div>
</div>
<div class="changeMapBox pa cp">
<div class="dise" @mouseout="likai">
<div class="bai" :class="{ active: !is_3d }" v-show="!is_3d" @click="handle_change_3d(true)">
2D
</div>
<div class="bai" :class="{ active: is_3d }" v-show="is_3d" @click="handle_change_3d(false)">
3D
</div>
<div
class="bai"
:class="{ active: !is_3d }"
v-show="!is_3d"
@click="handle_change_3d(true)"
>2D</div>
<div
class="bai"
:class="{ active: is_3d }"
v-show="is_3d"
@click="handle_change_3d(false)"
>3D</div>
</div>
<div v-for="item in tabs" :key="item.id" class="dise" @mousemove="jinru(item.id)">
<div :class="{
<div
:class="{
'hwkeys-item': 1,
[item.class_name]: 1,
}" @click="handle_change(item.id)" style="position: relative; overflow: hidden">
<div class="zimu" :class="{ sh: numId == item.id + 1 }">
{{ item.name }}
</div>
}"
@click="handle_change(item.id)"
style="position: relative; overflow: hidden"
>
<div class="zimu" :class="{ sh: numId == item.id + 1 }">{{ item.name }}</div>
</div>
</div>
</div>
......@@ -34,9 +48,9 @@
</template>
<script>
import { mapState } from 'vuex';
import { mapState } from "vuex";
export default {
components: { },
components: {},
data() {
return {
numId: null, //鼠标悬浮效果
......@@ -50,6 +64,11 @@ export default {
class_name: "hwkeys-item-satellite",
},
{
id: 4,
name: "星图",
class_name: "hwkeys-item-satellite",
},
{
id: 2,
name: "街道",
class_name: "hwkeys-item-street",
......@@ -63,17 +82,19 @@ export default {
};
},
computed: {
...mapState('MMCFlightControlCenter', ['cesiumImagesLayers', 'cesium3DModels']),
...mapState("MMCFlightControlCenter", [
"cesiumImagesLayers",
"cesium3DModels",
]),
},
mounted() {
console.log('handle_change2')
console.log("handle_change2");
setTimeout(() => {
this.handle_change(1);
this.handle_change_3d(false);
}, 3500);
},
watch: {
},
watch: {},
methods: {
// 鼠标悬浮效果
jinru(id) {
......@@ -84,24 +105,29 @@ export default {
},
handle_change_3d(bool) {
this.is_3d = bool;
this.$store.dispatch('MMCFlightControlCenter/switch3DModelsShow', {show: bool})
this.$store.dispatch("MMCFlightControlCenter/switch3DModelsShow", {
show: bool,
});
},
handle_change(id) {
this.cesiumImagesLayers.satellite.show = false;
this.cesiumImagesLayers.star_satellite.show = false;
this.cesiumImagesLayers.street.show = false;
this.cesiumImagesLayers.night.show = false;
this.cesiumImagesLayers.text.show = false;
this.current = id;
if (id == 1) {
this.cesiumImagesLayers.street && (this.cesiumImagesLayers.street.show = false);
this.cesiumImagesLayers.satellite && (this.cesiumImagesLayers.satellite.show = true);
this.cesiumImagesLayers.night && (this.cesiumImagesLayers.night.show = false);
this.cesiumImagesLayers.satellite.show = true;
this.cesiumImagesLayers.text.show = true;
} else if (id == 2) {
this.cesiumImagesLayers.street && (this.cesiumImagesLayers.street.show = true);
this.cesiumImagesLayers.satellite && (this.cesiumImagesLayers.satellite.show = false);
this.cesiumImagesLayers.night && (this.cesiumImagesLayers.night.show = false);
} else {
this.cesiumImagesLayers.street && (this.cesiumImagesLayers.street.show = false);
this.cesiumImagesLayers.satellite && (this.cesiumImagesLayers.satellite.show = false);
this.cesiumImagesLayers.night && (this.cesiumImagesLayers.night.show = true);
this.cesiumImagesLayers.street.show = true;
} else if (id == 3) {
this.cesiumImagesLayers.night.show = true;
} else if (id == 4) {
this.cesiumImagesLayers.star_satellite.show = true;
this.cesiumImagesLayers.text.show = true;
}
console.log('this.cesiumImagesLayers', this.cesiumImagesLayers, id)
console.log("this.cesiumImagesLayers", this.cesiumImagesLayers, id);
},
change() {
this.active = !this.active;
......@@ -209,7 +235,7 @@ export default {
&.hwkeys-item-satellite {
// background: url(./assets/images/3d.png) center no-repeat;
background: url('./assets/images/ditu_icon.png') center no-repeat;
background: url("./assets/images/ditu_icon.png") center no-repeat;
background-size: 112% 112%;
}
......@@ -230,7 +256,8 @@ export default {
background: url(./assets/images/2d.png) center no-repeat;
}
&.hwkeys-item-street {}
&.hwkeys-item-street {
}
.typeNmae {
position: absolute;
......
src/components/MMCFlightControlCenter/store/index.js
......@@ -21,6 +21,10 @@ export default {
//卫星影像
show: false,
},
star_satellite: {
//星图卫星影像
show: false,
},
night: {
//夜景影像
show: false,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论