feat(2903): 三维cesium中增加WebTileLayer图层组件

YangTingruMG · YangTingruMG · commit af3836d3d36f · 2024-05-16T22:30:16.000+08:00
详细描述: 三维cesium中增加WebTileLayer图层组件
diff --git a/cesium/src/component.js b/cesium/src/component.js
@@ -34,6 +34,7 @@ export { default as Mapgis3dArcgisMapLayer } from "./components/Layer/ArcGISServ
 export { default as Mapgis3dGraphicSingleLayer } from "./components/Layer/Graphic/GraphicSingleLayer.vue";
 export { default as Mapgis3dGraphicLayer } from "./components/Layer/Graphic/GraphicLayer.vue";
 export { default as Mapgis3dGraphicLayerService } from "./components/Layer/Graphic/GraphicLayerService.vue";
+export { default as Mapgis3dWebTileLayer } from "./components/Layer/WebTile/WebTileLayer";
 
 // 要素图层
 export { default as Mapgis3dGeojsonLayer } from "./components/Layer/GeoJSON/GeoJsonLayer";
diff --git a/cesium/src/components/Layer/ServiceLayer.js b/cesium/src/components/Layer/ServiceLayer.js
@@ -27,7 +27,7 @@ export default {
     },
     layerStyle: {
       type: Object,
-      default: function() {
+      default: function () {
         return {
           visible: true,
           opacity: 1
@@ -91,7 +91,7 @@ export default {
   },
   watch: {
     layerStyle: {
-      handler: function() {
+      handler: function () {
         let { vueKey, vueIndex } = this;
         let layer = window.vueCesium[this.managerName].findSource(
           vueKey,
@@ -114,7 +114,7 @@ export default {
       deep: true
     },
     options: {
-      handler: function() {
+      handler: function () {
         let vm = this;
         let isEqual = this.$_isEqual(vm.options, vm.optionsBack);
         if (!isEqual) {
@@ -126,7 +126,7 @@ export default {
       deep: true
     },
     id: {
-      handler: function() {
+      handler: function () {
         const { vueIndex, vueKey } = this;
         let layer = window.vueCesium[this.managerName].findSource(
           vueKey,
@@ -180,7 +180,7 @@ export default {
 
       //取得除options、layerStyle和id之外的必要参数
       const { $props, vueIndex, vueKey } = this;
-      Object.keys($props).forEach(function(key) {
+      Object.keys($props).forEach(function (key) {
         if (key !== "options" && key !== "layerStyle" && key !== "id") {
           opt[key] = $props[key];
         }
@@ -371,7 +371,7 @@ export default {
         vm = this;
 
       //遍历window.vueCesium下所有的Manager
-      Object.keys(window.vueCesium).forEach(function(key) {
+      Object.keys(window.vueCesium).forEach(function (key) {
         if (key.indexOf("Manager") > -1 && key !== "GlobesManager") {
           //取出含有与webScene组件相同vueKey的Manager对象
           if (window.vueCesium[key].hasOwnProperty("vueKey")) {
@@ -395,7 +395,7 @@ export default {
       });
 
       //对数组进行排序
-      Layers.sort(function(a, b) {
+      Layers.sort(function (a, b) {
         if (a.options && b.options) {
           return a.options.zIndex - b.options.zIndex;
         }
@@ -637,7 +637,7 @@ export default {
     $_checkProps(checkObj, checkType) {
       let vm = this;
       if (checkObj && checkType) {
-        Object.keys(checkObj).forEach(function(key) {
+        Object.keys(checkObj).forEach(function (key) {
           let result;
           if (checkType.hasOwnProperty(key) && typeof key === "string") {
             result = vm.$_checkValue(checkObj, key, checkType[key]);
@@ -702,6 +702,14 @@ export default {
         tilingScheme = new Cesium.GeographicTilingScheme();
       } else if (tileMatrixSetName === "EPSG:3857") {
         tilingScheme = new Cesium.WebMercatorTilingScheme();
+      } else if (
+        ["bd09", "bd09ll", "bd09mc", "gcj02", "gcj02ll", "gcj02mc"].indexOf(
+          tileMatrixSetName
+        ) > -1
+      ) {
+        tilingScheme = new Cesium.CustomTilingScheme({
+          wkid: tileMatrixSetName
+        });
       } else {
         tilingScheme = new Cesium.GeographicTilingScheme();
       }
diff --git a/cesium/src/components/Layer/WebTile/WebTileLayer.vue b/cesium/src/components/Layer/WebTile/WebTileLayer.vue
@@ -0,0 +1,65 @@
+<template>
+  <span />
+</template>
+<script>
+import ServiceLayer from "../ServiceLayer";
+
+export default {
+  name: "mapgis-3d-web-tile-layer",
+  props: {
+    baseUrl: {
+      type: String,
+      default: ""
+    },
+    spatialReference: {
+      type: Object,
+      default: () => {}
+    },
+    srs: {
+      type: String,
+      default: "EPSG:4326"
+    }
+  },
+  data() {
+    return {
+      //监测props
+      checkType: {
+        visible: "boolean",
+        opacity: "number",
+        zIndex: "number",
+        vueKey: "string",
+        vueIndex: "string | Number"
+      },
+      managerName: "WebTileManager",
+      // providerName: "BaiduImageryProvider", //cesium调用的类名
+      providerName: "UrlTemplateImageryProvider"
+    };
+  },
+  inject: ["Cesium", "vueCesium"],
+  mixins: [ServiceLayer],
+  created() {},
+  mounted() {
+    this.mount();
+  },
+  destroyed() {
+    this.unmount();
+  },
+  methods: {
+    mount() {
+      let options = {};
+      if (this.$props.spatialReference) {
+        // 构造CustomTilingScheme
+        options.tilingScheme = this.$_setTilingScheme(
+          this.$props.spatialReference.wkid
+        );
+      }
+      this.$_mount(options);
+    },
+    unmount() {
+      this.$_unmount();
+    }
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/cesium/src/components/Layer/WebTile/index.js b/cesium/src/components/Layer/WebTile/index.js
@@ -0,0 +1,2 @@
+import WebTileLayer from "./WebTileLayer";
+export { WebTileLayer };
diff --git a/cesium/src/components/WebGlobe/manager.js b/cesium/src/components/WebGlobe/manager.js
@@ -74,6 +74,8 @@ export function initVueCesium() {
     window.vueCesium.M3DIgsManager || new EventHandlerManager();
   window.vueCesium.ArcgisManager =
     window.vueCesium.ArcgisManager || new EventHandlerManager();
+  window.vueCesium.WebTileManager =
+    window.vueCesium.WebTileManager || new EventHandlerManager();
   window.vueCesium.IgsDocLayerManager =
     window.vueCesium.IgsDocLayerManager || new IgsDocLayerManager();
   window.vueCesium.IgsTilecLayerManager =
@@ -147,7 +149,7 @@ export function initVueCesium() {
     window.vueCesium.CompareManager || new CompareManager();
 
   //在window.vueCesium下添加取得WebGlobe对象的方法
-  window.vueCesium.getViewer = function(vueKey) {
+  window.vueCesium.getViewer = function (vueKey) {
     if (!vueKey) {
       vueKey = "default";
     }
@@ -162,13 +164,13 @@ export function initVueCesium() {
    * @param callback 回调函数
    * @param vueKey vueKey，唯一标识webscene组件
    * */
-  window.vueCesium.getViewerByInterval = function(callback, vueKey) {
+  window.vueCesium.getViewerByInterval = function (callback, vueKey) {
     if (!vueKey) {
       vueKey = "default";
     }
     let ViewerManager = window.vueCesium.ViewerManager,
       viewer;
-    let interval = setInterval(function() {
+    let interval = setInterval(function () {
       if (
         ViewerManager.hasOwnProperty(vueKey) &&
         ViewerManager[vueKey].length > 0
@@ -298,7 +300,7 @@ export class BaseManager {
 
   flatAllSource() {
     let flat = [];
-    Object.keys(this).forEach(k => {
+    Object.keys(this).forEach((k) => {
       if (k !== "vueKey") {
         flat = flat.concat(this[k]);
       }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+import WebTileLayer from "./WebTileLayer";`
	`2`	`+export { WebTileLayer };`