Skip to content

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

fix: 星图地球源地址

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