增加二维

ZhAkps

2024-02-06 a6c2f0e8d84799f88b98c2736ed3108d32ef9327

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -33,30 +33,6 @@
        </div>
      </div>
    </div>
    <!-- <div class="areaType" style="margin-top: 10px">
      <div class="title">
        专题图层
        <span class="more" @click.stop="showLayerTree"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
      </div>
      <div class="container">
        <div
          class="layerItem"
          :key="value1.id"
          v-for="(value1, index1) in areaTypeList"
          @click.stop="handleAreaClick(value1, index1)"
        >
          <img
            :src="value1.src"
            :class="{ active: curAreaTypeIndex == index1 }"
          />
          <span :class="{ spanActive: curAreaTypeIndex == index1 }">{{
            value1.name
          }}</span>
        </div>
      </div>
    </div> -->
    <div class="areaType" style="margin-top: 10px">
      <div class="title">
        专题应用
@@ -129,10 +105,16 @@
  clearLayerByTypeId,
  clearLayerByTypeIdArr,
} from "@/utils/map.js";
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store.js";
import ZTTitem from "@/utils/ztt.js";
import _GLOBAL from "@/assets/GLOBAL2";
import store from "@/utils/store2.js";
import ZTTitem from "@/utils/ztt2.js";
import { layers } from "../../../../static/json/layer.js";

import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { get as getProjection, getTransform } from "ol/proj";
import { createXYZ } from "ol/tilegrid";

export default {
  name: "LayerPanel",
  data() {
@@ -153,22 +135,7 @@
          src: require("@/assets/img/layer/yxdt.png"),
        },
      ],
      sMapModelList: [
        // {
        //   id: "3Dcs",
        //   name: "3D城市",
        //   active: false,
        //   type: "san",
        //   src: require("@/assets/img/layer/3Dcs.png"),
        // },
        // {
        //   id: "swmx",
        //   name: "三维模型",
        //   active: false,
        //   type: "san",
        //   src: require("@/assets/img/layer/swmx.png"),
        // },
      ],
      sMapModelList: [],
      areaTypeList: [
        {
          id: "规划范围",
@@ -225,7 +192,7 @@
      ],
      zhuantiList: ZTTitem,
      //curMapModelIndex: 1,
      curEMapModelIndex: 0,
      curEMapModelIndex: 1,
      curSMapModelIndex: -1,
      curAreaTypeIndex: -1,
      curYjIndex: -1,
@@ -286,31 +253,13 @@
    },
    // 二维底图选择
    handleEMapClick(result, index) {
      let p = sgworld.Navigate.getCameraInfo();
      let pitch;
      if (pitch !== -90) {
        pitch = -90;
        sgworld.Navigate.flyToPointsInterest({
          destination: new Cesium.Cartesian3.fromDegrees(
            p.location.lon,
            p.location.lat,
            p.location.height
          ),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(pitch),
            roll: Cesium.Math.toRadians(0),
          },
        });
      }

      // 设置相机
      if (result.name == "二维地图") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
        this.changeLayerView(25000, false);
        window.map.getLayerByName("二维地图").setVisible(true);
        window.map.getLayerByName("影像地图").setVisible(false);
      } else if (result.name == "影像地图") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
        this.changeLayerView(50000, false);
        window.map.getLayerByName("影像地图").setVisible(true);
        window.map.getLayerByName("二维地图").setVisible(false);
      }
      // 切换图层
      const val = layers.filter((res) => {
@@ -435,6 +384,7 @@
    },
    // 第二行 专题图 点击
    handleZTlick(result, index) {
      console.log(result, index);
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
@@ -443,38 +393,11 @@
      const children = val[0].children;
      if (this.curZTIndex == index) {
        this.curZTIndex = -1;
        //   let _data = sgworld.ProjectTree.getObject(children[0].id);
        //   if (_data) {
        //     sgworld.ProjectTree.setVisibility(children[0].id, false);
        //   }

        store.setThematicLayerItemId("");
      } else {
        this.curZTIndex = index;
        store.setThematicLayerItemId(children);

        //   //清除
        //   // let arr = [
        //   //   "GuiHuaFanWeiShiYiTu",
        //   //   "XingZhengQuHuaTu",
        //   //   "GuiHuaDanYuanHuaFenTu",
        //   //   "ZhuYaoGongNengQuGuiHuaShiYiTu",
        //   // ];
        //   // arr.forEach((item) => {
        //   //   sgworld.ProjectTree.getObject(item) &&
        //   //     sgworld.ProjectTree.setVisibility(item, false);
        //   // });
        //   let dataObj = sgworld.ProjectTree.getObject(result.id);
        //   if (dataObj) {
        //     sgworld.ProjectTree.setVisibility(result.id, true);
        //   } else {
        //     _GLOBAL.layers[result.id] = [];
        //     children.forEach((item) => {
        //       let itemLayer = loadLayer(item);
        //       _GLOBAL.layers[result.id].push(itemLayer);
        //       console.log(_GLOBAL.layers[result.id]);
        //     });
        //   }
        //   // store.setThematicLayerItemId(result.id);
      }
    },
    // 第三行 专题功能 点击
@@ -505,29 +428,79 @@
        switch (index) {
          case 0:
            store.setSliderShow(true);
            window.tdglLayer = sgworld.Creator.createImageryProvider(
              layers[8].name,
              "tms",
              {
                id: layers[8].children[0].id,
                url: layers[8].children[0].urls,
                fileExtension: layers[8].children[0].img || "png",
                enablePickFeatures: false,
                level: layers[8].children[0].Level,
                minimumLevel: layers[8].children[0].minimumLevel,
                maximumLevel: layers[8].children[0].maximumLevel,
                tilingScheme:
                  layers[8].children[0].tileType === "Geo"
                    ? new Cesium.GeographicTilingScheme()
                    : new Cesium.WebMercatorTilingScheme(),
                // alpha: layers[8].children[0].alpha,
                alpha: this.alpha,
              },
              "0",
              layers[8].children[0].zIndex,
              true,
              ""
            );
            // window.tdglLayer = sgworld.Creator.createImageryProvider(
            //   layers[8].name,
            //   "tms",
            //   {
            //     id: layers[8].children[0].id,
            //     url: layers[8].children[0].urls,
            //     fileExtension: layers[8].children[0].img || "png",
            //     enablePickFeatures: false,
            //     level: layers[8].children[0].Level,
            //     minimumLevel: layers[8].children[0].minimumLevel,
            //     maximumLevel: layers[8].children[0].maximumLevel,
            //     tilingScheme:
            //       layers[8].children[0].tileType === "Geo"
            //         ? new Cesium.GeographicTilingScheme()
            //         : new Cesium.WebMercatorTilingScheme(),
            //     // alpha: layers[8].children[0].alpha,
            //     alpha: this.alpha,
            //   },
            //   "0",
            //   layers[8].children[0].zIndex,
            //   true,
            //   ""
            // );

            // console.log("gisserver-tms");
            // var url = layers[8].children[0].urls;
            // var projection = getProjection("EPSG:4326");
            // var tileGrid = createXYZ({
            //   extent: projection.getExtent(),
            // });
            // var source = new XYZ({
            //   projection: projection,
            //   tileGrid: tileGrid,
            //   tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            //     return (
            //       url +
            //       (tileCoord[0] - 1) +
            //       "/" +
            //       tileCoord[1] +
            //       "/" +
            //       (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
            //       ".jpeg"
            //     );
            //   },
            // });
            // window.tdglLayer = new Tile({
            //   source: source,
            // });
            // window.map.addLayer(window.tdglLayer);

            var url =
              "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";
            var projection = getProjection("EPSG:4326");
            var tmslayer = new Tile({
              source: new XYZ({
                projection: projection,
                tileGrid: createXYZ({
                  extent: projection.getExtent(),
                }),
                tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                  return (
                    url +
                    (tileCoord[0] - 1) +
                    "/" +
                    tileCoord[1] +
                    "/" +
                    (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
                    ".jpeg"
                  );
                },
              }),
            });
            window.map.addLayer(tmslayer);
            //显示滑动条
            store.setTdglFlag(true);
            break;