youhua

少年

2024-02-27 7a1966fcaf11102e608d248532eb60eafb878b2c

 src/components/viewer2.vue

@@ -8,7 +8,7 @@
      <img src="@/assets/img/title/title.png" />
    </div>
    <!-- 历史影像 -->
    <!-- <my-history v-if="state.show"></my-history> -->
    <my-history v-if="state.show"></my-history>
    <!-- 历史影像关闭按钮 -->
    <!-- <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
      <img class="searchBtn" src="@/assets/closeinput1.png" />
@@ -34,7 +34,7 @@
    <!-- 位置面板 -->
    <my-collection-panel></my-collection-panel>
    <!-- 指北针面板 -->
    <!-- <my-direction-panel></my-direction-panel> -->
    <my-direction-panel></my-direction-panel>
    <!-- 新增收藏面板 -->
    <my-add-collection-panel></my-add-collection-panel>
    <!-- 窨井、摄像头统计面板 -->
@@ -52,13 +52,14 @@
    <!-- 土地管理弹窗 -->
    <my-land-admin-info></my-land-admin-info>
    <my-slider></my-slider>
    <my-poplayer></my-poplayer>
  </div>
</template>
<script>
import store from "@/utils/store2.js";

import { setClick, leftClick } from '@/utils/map2.js'
import _GLOBAL from "@/assets/GLOBAL2";
import { leftClick, loadLayer } from "@/utils/map.js";
// import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom2.vue";
import rightBottom from "@/components/rightMenu/bottom2.vue";
import sousuo from "@/components/leftMenu/sousuo2.vue";
@@ -66,18 +67,19 @@
import NavigationBar from "./rightNavigation/NavigationBar2.vue";
import layertree from "@/components/rightMenu/layerTree2.vue";
import settingPanel from "./sideMenu/settingMenu/main.vue";
import collectionPanel from "./sideMenu/collectionMenu/main.vue";
import collectionPanel from "./sideMenu/collectionMenu/main2.vue";
import directionPanel from "./sideMenu/directionMenu/main.vue";
import addCollectionPanel from "./sideMenu/addCollectionMenu/main.vue";
import addCollectionPanel from "./sideMenu/addCollectionMenu/main2.vue";
import statisticsPanel from "./sideMenu/statisticsMenu/main.vue";
import manholePanel from "./sideMenu/manholeStatistics/main.vue";
import videoPanel from "./sideMenu/videoStatistics/main.vue";
import layerPanel from "./sideMenu/layerMenu/main2.vue";
import roamPanel from "./sideMenu/roamPanel/main.vue";
import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
import history from "./poplayer/history2.vue";
import landAdminInfo from "./poplayer/landAdmin2.vue";
import mainPoplayer from "./poplayer/poplayer2.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue";
import Axios from "axios";

// import Map from "ol/Map.js";
@@ -112,6 +114,7 @@
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
    "my-poplayer": mainPoplayer
  },
  data() {
    return {
@@ -134,7 +137,7 @@
      state: store.history,
    };
  },
  created() {},
  created() { },
  mounted() {
    this.$nextTick(function () {
      console.log("openlayer init");
@@ -173,7 +176,7 @@
        resolutions[z] = width / (256 * Math.pow(2, z));
        matrixIds[z] = z;
      }
      let wmtsTileGrid = new  ol.tilegrid.WMTS({
      let wmtsTileGrid = new ol.tilegrid.WMTS({
        origin: origin,
        resolutions: resolutions,
        matrixIds: matrixIds,
@@ -232,13 +235,13 @@
        id: "cva_c",
        source: wmtsSource2,
      });
      wmtsLayer2.setVisible(false);
      // wmtsLayer2.setVisible(false);
      ////卫星影像
      layers.push(wmtsLayer);
      ////二维地图
      layers.push(wmtsLayer2);
      ////路网
      layers.push(wmtsLayer1);
      // layers.push(wmtsLayer1);

      const map = new ol.Map({
        layers: layers,
@@ -247,14 +250,77 @@
          center: [116.505348, 39.795592],
          projection: "EPSG:4326",
          zoom: 12,
          minZoom: 8.5
        }),
      });

      window.map = map;
      window.mapapi = map;

      //加载航拍影像
      window.ImageLayer = new ol.layer.Tile({
        id: 'C0698021',
        visible: true,
        source: new ol.source.XYZ({
          wrapX: true,
          url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
        }),
        projection: new ol.proj.get('EPSG:4326')
      });
      window.mapapi.addLayer(window.ImageLayer);

      //加载高德标注
      window.annotation = new ol.layer.Tile({
        id: '69EB42A8',
        visible: true,
        source: new ol.source.XYZ({
          wrapX: true,
          url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
        }),
        projection: new ol.proj.get('EPSG:4326')
      });
      window.mapapi.addLayer(window.annotation);


      window.hexin = new ol.layer.Tile({
        source: new ol.source.TileWMS({
          ratio: 3,
          url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',//图层地址
          params: {
            'VERSION': '1.1.1',
            'SRS': 'EPSG:4326',
            'FORMAT': 'image/png',
            'TILED': true,
            "LAYERS": ''
          }
        })
      })
      window.mapapi.addLayer(window.hexin)


      //亦庄新城规划范围
      window.yizhuang = new ol.layer.Tile({
        source: new ol.source.TileWMS({
          ratio: 3,
          url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//图层地址
          params: {
            'VERSION': '1.1.1',
            'SRS': 'EPSG:4326',
            'FORMAT': 'image/png',
            'TILED': true,
            "LAYERS": ''
          }
        })
      })
      window.mapapi.addLayer(window.yizhuang)




      setClick(true)
      // leftClick()
      // var url =
      //   "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";
      

      // var tmslayer = new ol.layer.Tile({
      //   source: new ol.source.XYZ({
      //     projection: projection,
@@ -275,7 +341,7 @@
      //     },
      //   }),
      // });
      // window.map.addLayer(tmslayer);
      // window.mapapi.addLayer(tmslayer);

      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);
@@ -347,16 +413,16 @@
          // console.log("双击");
          // Viewer.camera.zoomIn();
          // console.log(window.clickPOI);
          let p = sgworld.Navigate.getDegrees();
          // let p = sgworld.Navigate.getDegrees();
          // console.log(p);
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              window.clickPOI.lon,
              window.clickPOI.lat,
              p.height / 1.8
            ),
            duration: 1.0,
          });
          // Viewer.camera.flyTo({
          //   destination: Cesium.Cartesian3.fromDegrees(
          //     window.clickPOI.lon,
          //     window.clickPOI.lat,
          //     p.height / 1.8
          //   ),
          //   duration: 1.0,
          // });
        }
        this.count = 0;
      }, 300);
@@ -393,7 +459,7 @@
      console.log(window.gisBaseUrl);
      Axios.get(
        window.gisBaseUrl +
          "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
        "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
      ).then((res) => {
        console.log(res);
      });
@@ -407,7 +473,8 @@
  width: 100%;
  height: 100%;
  background: black;
  position: absolute !important;
  /* position: absolute !important; */
  z-index: 0;
}

.titleBg {
@@ -431,12 +498,14 @@
.bottomLeft {
  display: none;
}

.colseBtn {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  left: 0.2rem;
}

.colseBtn img {
  width: 30px;
}