农事操作隐藏后四个，地图模式2d改为3d

guoshilong

2022-11-08 082613d446e29e4ec1c16bfaa52345106a498b23

 src/components/map/mainInThere.vue

@@ -22,25 +22,6 @@
  // eslint-disable-next-line no-unused-vars
  defaults as OlControlDefaults,
  defaults,
  // 全屏控件
  FullScreen,
  // 比例尺控件
  ScaleLine,
  // 缩放滚动条控件
  // eslint-disable-next-line no-unused-vars
  ZoomSlider,
  // 鼠标位置控件
  // eslint-disable-next-line no-unused-vars
  MousePosition,
  // -地图属性控件
  Attribution,
  // 鹰眼控件
  // eslint-disable-next-line no-unused-vars
  OverviewMap,
  // 缩放到范围控件
  // eslint-disable-next-line no-unused-vars
  ZoomToExtent,
  Rotate
} from "ol/control.js";

import VectorLayer from "ol/layer/Vector";
@@ -81,11 +62,6 @@
        zIndex: 22,
        source: new VectorSource()
      }),
      // peopleLineAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      beginsPoint: new VectorLayer({
        // 图标图层
        zIndex: 22,
@@ -97,14 +73,6 @@
        source: new VectorSource()
      }),
      peopleLineAddlayer: null,

      // 存储新增点，线，面，数据的地方
      // polygonData: [],
      // polygonFlag: false,
      // editToolbar: null,
      // addPolygonEntitys: null,

      // typeSelected: "LineString",
      typeSelected: "Polygon",
      // drawLayer: null,
      draw: null,
@@ -145,17 +113,16 @@
        //面实例
        zIndex: 22,
        source: new VectorSource()
      })
      }),
      urls:[
        "http://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0",
        "http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0"
      ],
      imgSrc:''
    };
  },
  computed: {
    openDrawChiose() {
      // console.log(
      //   "this.openDrawLine:",
      //   this.openDrawLine,
      //   "this.openDrawPoint:",
      //   this.openDrawPoint
      // );
      if (this.openDrawLine) {
        return "openDrawLine";
      } else if (this.openDrawPoint) {
@@ -172,9 +139,21 @@
        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" // 行政区划
          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" // 行政区划
            url:this.urls[0]
          })
        }),
        new OlLayerTile({
          zIndex: 5,
          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" // 行政区划
            url:this.urls[1],
          })
        })
      ],
@@ -193,8 +172,8 @@

    var view = ol2d.getView();
    this.source = new VectorSource({ wrapX: false });
    view.setCenter([115.9032747077233, 28.67433116990186]);

    // view.setCenter([115.9032747077233, 28.67433116990186]);
    view.setCenter([116.56705776, 27.42386903]);
    this.view = view;
  },
  methods: {
@@ -249,7 +228,6 @@
      });
      ol2d.addInteraction(this.draw);
      this.draw.on("drawend", function(evt) {
        // console.log(evt, 3);
        that.drawingEnd(evt);
      });
    },
@@ -265,7 +243,7 @@
        points[0].map(item => {
          that.polygon.push({ lng: item[0], lat: item[1] });
        });
        // console.log(that.polygon, 1111);
        
        that.$store.commit("setpolygon", that.polygon); //用vuex传最终数据
        //重新画面
        that.addLines(that.polygon, "mian");
@@ -282,7 +260,6 @@
    },
    onceOnlodad(ourDatas) {
      this.ourDatas = ourDatas;
      console.log(ourDatas);
    },
    //old
    //加载底层路线和图标
@@ -307,8 +284,6 @@
    },
    // 若没有value数据，删除地图上的元素
    deleteElement(name, id) {
      // console.log(name, id);
      // this.ourLayer[name + id].getSource().clear();
      for (let k in this.ourLayer) {
        this.ourLayer[k].getSource().clear();
      }
@@ -363,15 +338,12 @@
      var entityArr = [];
      if (notdo) {
        entityArr = data;
        console.log(entityArr, "notdo");
      } else {
        for (let kd in data) {
          entityArr.push([Number(data[kd].lng), Number(data[kd].lat)]);
        }
      }
      // console.log(entityArr);
      var lineCoords = entityArr; // 线里点的集合
      // console.log(lineCoords);
      var feature_LineString = new Feature({
        //线面板
        geometry: new LineString(lineCoords)
@@ -395,8 +367,6 @@
      //面
      //解析面数据
      let mianData = [lineCoords];
      // console.log(mianData);
      // return;
      var feature_Polygon = new Feature({
        //面面板
        geometry: new Polygon(mianData)
@@ -418,7 +388,6 @@
      this.layermian.getSource().addFeature(feature_Polygon);
      //保存图层
      ol2d.addLayer(this.layermian);
      // console.log(this.ourLayer, 88888);
    },

    //上面是初始化·················
@@ -433,10 +402,8 @@
      }
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径按钮");
        this.controlBut("openDrawLine", this.notNow);
      } else {
        // console.log("加载标点按钮");
        this.controlBut("openDrawPoint", this.notNow);
      }
    },
@@ -468,7 +435,6 @@
    //确认数据
    useMapData() {
      //返回用数据
      // console.log(this.openDrawChiose, this.nowIndex);
      this.$parent.MapDataShow = false;
      let val;
      if (this.openDrawChiose == "openDrawLine") {
@@ -587,13 +553,6 @@
      }

      var lineCoords = entityArr; // 线里点的集合
      //移动位置---暂不需要
      // var view = ol2d.getView();
      // view.setCenter([
      //   lineCoords[Math.ceil(entityArr.length / 2)][0],
      //   lineCoords[Math.ceil(entityArr.length / 2)][1],
      // ]);
      // view.setZoom(14.5);

      // 要素
      var feature_LineString = new Feature({