级联查询颜色区分

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -137,7 +137,7 @@ import { GetTabsData, GetTabsPane } from "@/api/cockpitNew";
 import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
 import pie from "@/components/echartsTemplate/pieNew.vue";
-import { loadGeoJSON } from "@/utils/MapHelper/help.js";
+import { loadGeoJSON, colors } from "@/utils/MapHelper/help.js";
 let manager_multi_level_query = null;
 let pick_entity = null;
 
@@ -388,34 +388,6 @@ export default {
         }
       }
     },
-    addPolygon(geom, id, colors, fillreset) {
-      let geojson = wellknown.parse(geom);
-      let _this = this;
-      // viewer.entities.removeAll();
-      let scolor = colors
-        ? Cesium.Color.fromCssColorString(colors)
-        : Cesium.Color.RED;
-      let fcolor =
-        colors && !fillreset
-          ? Cesium.Color.fromCssColorString(colors)
-          : Cesium.Color.WHITE;
-
-      let polygon = Cesium.GeoJsonDataSource.load(geojson, {
-        clampToGround: true,
-        stroke: scolor,
-        fill: fcolor.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
-        strokeWidth: 5,
-      });
-      polygon.then(function (dataSource) {
-        // dataSource.id = id;
-        // 将数据源添加到Cesium Viewer
-        dataSource.name = "MultiLevelQuery_echart";
-        viewer.dataSources.add(dataSource);
-        viewer.zoomTo(dataSource);
-        dataSourceList_gh[id] = dataSource;
-        if (id == "all") _this.isshowAll = true;
-      });
-    },
     echartClick(name, { iseyes }) {
       this.reset();
 
@@ -426,8 +398,15 @@ export default {
           if (value == name) {
             console.log("name: ", name);
             console.log("value ", value);
-
-            this.addPolygon(res.空间信息.split(";")[1], "all", "#ff0000", true);
+            loadGeoJSON(
+              res.空间信息.split(";")[1],
+              "#ff0000",
+              { isfly: true, fill: "#ffffff" },
+              (data) => {
+                data.name = "MultiLevelQuery_echart";
+                dataSourceList_gh[id] = data;
+              }
+            );
           }
         }
       });
@@ -592,12 +571,14 @@ export default {
       if (this.activeName == "权属") {
         this.qwnershipTabsFun();
       } else if (tabData) {
-        tabData.value.data.datalist.forEach((res) => {
+        tabData.value.data.datalist.forEach((res, ci) => {
           loadGeoJSON(
             res.geomvalue,
             "#ff0000",
-            { isfly: true, fill_a: 0.001 },
-            (data) => (data.name = "MultiLevelQuery_echart")
+            { isfly: true, fill_a: 1, fill: colors[ci % colors.length] },
+            (data) => {
+              data.name = "MultiLevelQuery_echart";
+            }
           );
         });
 
@@ -624,7 +605,7 @@ export default {
         if (res.dataname == tab.name) {
           this.rawData_qwnership = res.data;
           let data = [];
-          res.datalist.forEach((res) => {
+          res.datalist.forEach((res, ci) => {
             data.push({
               name: res.groupvalue,
               value: res.sumvalue,
@@ -632,8 +613,10 @@ export default {
             loadGeoJSON(
               res.geomvalue,
               "#ff0000",
-              { isfly: true, fill_a: 0.001 },
-              (data) => (data.name = "MultiLevelQuery_echart")
+              { isfly: true, fill_a: 1, fill: colors[ci % colors.length] },
+              (data) => {
+                data.name = "MultiLevelQuery_echart";
+              }
             );
           });
           this.setEchart_qwnership(data, "vertical", index);

src/utils/MapHelper/help.js

@@ -1,5 +1,17 @@
 import * as turf from "@turf/turf";
 import parse from "wellknown";
+export let colors = [
+  "#62ADED",
+  "#DFE15A",
+  "#6EDC8D",
+  "#00A42E",
+  "#F9B447",
+  "#7F4FE5",
+  "#FF6969",
+  "#27CED9",
+  "#DF56F5",
+  "#DCFFAF",
+];
 export function getCentroid(geojson, eindex) {
   if (turf.getType(geojson) === "Feature") {
     geojson = geojson.geometry;
@@ -35,8 +47,8 @@ export function loadGeoJSON(geom, yanse, adata, fun) {
     stroke: yanse
       ? Cesium.Color.fromCssColorString(yanse)
       : Cesium.Color.RED.withAlpha(0),
-    fill: yanse
-      ? Cesium.Color.fromCssColorString(yanse).withAlpha(adata.fill_a || 0.4)
+    fill: yanse || adata.fill
+      ? Cesium.Color.fromCssColorString(adata.fill || yanse).withAlpha(adata.fill_a || 0.4)
       : Cesium.Color.WHITE.withAlpha(0), //Cesium.Color.fromCssColorString("rgba(10, 95, 152, 0.4)"), //注意：颜色必须大写，即不能为blue
     strokeWidth: adata.sw || 2,
   })