北京经济技术开发区经开区虚拟城市项目-【前端】-移动端Web
少年
2024-03-04 4a5af28ba9fc254b81aae7345ae936cbaf0716be
src/components/viewer2.vue
@@ -57,7 +57,7 @@
</template>
<script>
import store from "@/utils/store2.js";
import { setClick, leftClick } from '@/utils/map2.js'
import { setClick, leftClick } from "@/utils/map2.js";
import _GLOBAL from "@/assets/GLOBAL2";
// import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom2.vue";
@@ -81,7 +81,14 @@
import mainPoplayer from "./poplayer/poplayer2.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue";
import Axios from "axios";
import {
  addImageLayer,
  addAnnotationLayer,
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  getCurrentPosition,
} from "@/utils/tool";
// import Map from "ol/Map.js";
// import TileLayer from "ol/layer/Tile.js";
// import View from "ol/View.js";
@@ -114,7 +121,7 @@
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
    "my-poplayer": mainPoplayer
    "my-poplayer": mainPoplayer,
  },
  data() {
    return {
@@ -137,11 +144,9 @@
      state: store.history,
    };
  },
  created() { },
  created() {},
  mounted() {
    this.$nextTick(function () {
      console.log("openlayer init");
      ol.Map.prototype.getLayerByName = function (name) {
        var layer;
        this.getLayers().array_.forEach(function (lyr) {
@@ -164,11 +169,15 @@
      let projection = ol.proj.get(_proj);
      let projectionExtent = projection.getExtent();
      let origin = projectionExtent ? ol.extent.getTopLeft(projectionExtent) : [-180, 90];
      let origin = projectionExtent
        ? ol.extent.getTopLeft(projectionExtent)
        : [-180, 90];
      let fromLonLat = ol.proj.getTransform("EPSG:4326", projection);
      let width = projectionExtent
        ? ol.extent.getWidth(projectionExtent)
        : ol.extent.getWidth(ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat));
        : ol.extent.getWidth(
            ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
          );
      let resolutions = [];
      let matrixIds = [];
@@ -236,10 +245,10 @@
        source: wmtsSource2,
      });
      // wmtsLayer2.setVisible(false);
      ////卫星影像
      layers.push(wmtsLayer);
      ////二维地图
      layers.push(wmtsLayer2);
      // layers.push(wmtsLayer2);
      ////卫星影像
      // layers.push(wmtsLayer);
      ////路网
      // layers.push(wmtsLayer1);
@@ -250,98 +259,21 @@
          center: [116.505348, 39.795592],
          projection: "EPSG:4326",
          zoom: 12,
          minZoom: 8.5
          minZoom: 9.5,
        }),
        // events: ["singleclick", "pointermove"],
      });
      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);
      addImageLayer();
      addAnnotationLayer();
      addHxLayer();
      addYzLayer();
      //加载高德标注
      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)
      setClick(true);
      getCurrentPosition();
      // 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,
      //     tileGrid: ol.tilegrid.createXYZ({
      //       extent: [50.731, -90, 180, 70.0478],
      //     }),
      //     tileUrlFunction: function (tileCoord, pixelRatio, proj) {
      //       // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg';
      //       return (
      //         url +
      //         (tileCoord[0] - 1) +
      //         "/" +
      //         tileCoord[1] +
      //         "/" +
      //         (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
      //         ".jpeg"
      //       );
      //     },
      //   }),
      // });
      // window.mapapi.addLayer(tmslayer);
      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);
@@ -459,7 +391,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);
      });