图片更改

shuishen

2022-11-02 764cb58899b8ca0e9632a5e83c6950569442c41c

 src/components/basemap/mainInThere.vue

@@ -14,6 +14,7 @@
import "ol/ol.css";
import OlView from "ol/View.js";
import XYZ from "ol/source/XYZ";
import TileArcGISRest from "ol/source/TileArcGISRest";
import OlLayerTile from "ol/layer/Tile.js";
import OlMap from "ol/Map.js";
import tip from "./tip.vue";
@@ -42,31 +43,6 @@
  Rotate,
} from "ol/control.js";

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";

import { OSM, TileWMS, Vector } from "ol/source";
// import Draw from "ol/interaction/Draw";
import Draw from "./Draw";

import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import LineString from "ol/geom/LineString.js";
import { Icon, Style, Fill, Stroke } from "ol/style.js";

// import drawFence from "./drawFence";

import OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
// import OlLayerVector from "ol/layer/Vector";
// import OlSourceVector from "ol/source/Vector";
import OlStyleStyle from "ol/style/Style";
import OlStyleIcon from "ol/style/Icon";
// // 用来添加相关文字描述的
import OlStyleText from "ol/style/Text";
import OlStyleFill from "ol/style/Fill";
// import Cesium from "libs/Cesium/Cesium.js";

export default {
  name: "MapInThere",
  components: {
@@ -74,81 +50,14 @@
  },
  data() {
    return {
      gunAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      peopleAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      carAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      // peopleLineAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      beginsPoint: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      DrawLayer: new VectorLayer({
        // 图标图层
        // zIndex: 1000,
        source: new VectorSource(),
      }),
      toMoveTime: null,
      oldService: "",
      mapService: [
        // {
        //   id: "",
        //   value: "",
        // show:''
        // },
      ],
      mapService: [],
    };
  },
  // computed: {
  //   mapServiceSee() {
  //   },
  // },
  // watch: {
  //   // openDrawChiose() {
  //   //   console.log(this.openDrawChiose, "openDrawChiose");
  //   // },
  //   mapServiceValue: {
  //     handler(val) {
  //       // console.log("深度监听：", val);
  //       // this.checkDom("getMapDataRefs", (dom) => {
  //       //   dom.setServiceData(this.mapServiceValue);
  //       // });
  //     },
  //     deep: true,
  //   },
  // },
  mounted() {
    const ol2d = new OlMap({
      layers: [
        // new OlLayerTile({
        //   zIndex: 4,
        //   title: "影像",
        //   source: new XYZ({
        //     url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
        //   }),
        // }),
        // new OlLayerTile({
        //   zIndex: 5,
        //   title: "道路+中文注记",
        //   source: new XYZ({
        //     url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
        //   }),
        // }),
        new OlLayerTile({
          zIndex: 4,
          title: "矢量",
@@ -190,17 +99,10 @@
    window.ol2d = ol2d;

    var view = ol2d.getView();

    // let provider = new Cesium.UrlTemplateImageryProvider({
    //   url: "/wp/{z}/{x}/{y}.png",
    //   fileExtension: "png",
    // });
    // view.imageryLayers.addImageryProvider(provider);

    // view.setCenter([115.85883507433789, 28.708432053474827])
    //设置中心点
    view.setCenter([114.03858862, 27.63088262]);

    //
    //缩放范围
    view.setZoom(18);
    this.view = view;
    // const ol3d = new OLCesium({ map: window.ol2d });
@@ -214,6 +116,7 @@
  },
  methods: {
    clearServiceData() {
      //清空
      this.mapService = [];
    },
    setServiceData(data) {
@@ -248,22 +151,39 @@
          // new OlLayerTile({
          zIndex: 5,
          title: data.length - 1,
          source: new XYZ({
          source: new TileArcGISRest({
            url: data[data.length - 1].service, // 注记
            // '水系图',  http://59.55.128.156:6080/arcgis/rest/services/fuzhoupcsdhl/MapServer
            // '行政区', http://59.55.128.156:6080/arcgis/rest/services/fzxzq/MapServer
          }),
          // }),
        });
        // console.log(data[data.length - 1].service);
        // console.log(that.oldService);
        // let str = "";
        // for (let k in that.oldService) {
        //   if (that.oldService[k] != data[data.length - 1].service[k]) {
        //     // console.log(that.oldService[k]);
        //     // console.log(data[data.length - 1].service[k]);
        //     str += that.oldService[k];
        //   }
        // }
        // console.log("str", str);
        let doit = () => {
          this.toMoveTime = setTimeout(() => {
            console.log(window.ol2d);

            // console.log(layer.getData());
            // // let position = layer.values_.source.tmpExtent_;
            // let position = layer.renderer_.renderedExtent_;
            // let lonlat = [
            //   [position[0], position[1]],
            //   [position[2], position[3]],
            // ];
            // let pot = layer.getFeatures()[0];
            // console.log(pot);
            // // let zoomto = new ZoomToExtent({ extent: lonlat });
            // // console.log(window.ol2d);
            // // window.ol2d.zoomToExtent(position);
            // this.view.setCenter(lonlat[0]);
          }, 500);
        };
        if (this.toMoveTime) {
          clearTimeout(this.toMoveTime);
          doit();
        } else {
          doit();
        }

        that.oldService = data[data.length - 1].service;
        window.ol2d.addLayer(layer);
        that.mapService.push({
@@ -280,30 +200,7 @@
          that.mapService.splice(that.$store.state.map.deleteIndex, 1);
        }
      }
      // console.log(this.mapService);
      // for()
    },
    // addMapService(data) {
    //   let layer = new OlLayerTile({
    //     // source: new XYZ({
    //     //   url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
    //     // }),
    //     // new OlLayerTile({
    //     zIndex: 5,
    //     title: "中文注记",
    //     source: new XYZ({
    //       url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
    //     }),
    //     // }),
    //   });
    //   this.mapService.push({
    //     layer: layer,
    //   });
    //   window.ol2d.addLayer(layer);
    //   setTimeout(() => {
    //     window.ol2d.removeLayer(layer);
    //   }, 2000);
    // },
  },
};
</script>