+底图加字段

liuyg

2022-03-25 e556182b998fdba960ee9fac00e7868dd514033a

+底图加字段

 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";
@@ -74,36 +75,37 @@
  },
  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({
      // gunAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      beginsPoint: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      DrawLayer: new VectorLayer({
        // 图标图层
        // zIndex: 1000,
        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: [
        // {
@@ -248,8 +250,10 @@
          // 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
          }),
          // }),
        });
@@ -264,6 +268,33 @@
        //   }
        // }
        // console.log("str", str);
        // that.view.setCenter(layer);
        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({

 src/views/hd/baseMap.vue

@@ -34,17 +34,17 @@
      <template slot-scope="{ type, disabled }" slot="haveBaseMapForm">
        <div class="inputInline" v-show="!notSet">
          <el-input
            v-model="chouseBaseMapTypeOnce"
            v-model="chouseBaseMapNameOnce"
            placeholder="底图名称"
            class="inputInlineType"
          ></el-input>
          <el-input
            placeholder="请输入底图地址"
            placeholder="请输入底图地址，示例：http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0"
            v-model="mapServiceValueOnce"
            class="input-with-select"
          >
            <!-- <el-select
            v-model="chouseBaseMapTypeOnce"
            v-model="chouseBaseMapNameOnce"
            slot="prepend"
            placeholder="请选择"
          >
@@ -91,7 +91,7 @@
  data() {
    return {
      mapServiceValueOnce: "",
      chouseBaseMapTypeOnce: "XYZ",
      chouseBaseMapNameOnce: "",
      form: {},
      query: {},
      loading: true,
@@ -138,6 +138,29 @@
              },
            ],
          },
          {
            label: "底图数量",
            prop: "addressNum",
            viewDisply: false,
            addDisplay: false,
            editDisply: false,
          },
          {
            label: "创建时间",
            prop: "createtime",
            viewDisply: false,
            addDisplay: false,
            // hide: true,
            editDisply: false,
          },
          {
            label: "修改时间",
            prop: "updatetime",
            viewDisply: false,
            addDisplay: false,
            // hide: true,
            editDisply: false,
          },
          // {
          //   label: "活动地点",
          //   viewDisply:false,
@@ -176,6 +199,7 @@
          {
            label: "专题底图",
            hide: true,
            viewDisply: false,
            prop: "haveBaseMap",
            component: "AvueUeditor",
            // options: {
@@ -266,6 +290,7 @@
    addMapServices(val) {
      if (val == 1) {
        this.mapServiceValueOnce = "";
        this.chouseBaseMapNameOnce = "";
      }
      if (this.mapServiceValueOnce == "") {
        this.$message({
@@ -274,28 +299,29 @@
        });
        return;
      }
      if (this.chouseBaseMapTypeOnce == "") {
      if (this.chouseBaseMapNameOnce == "") {
        this.$message({
          message: "请输入地图服务类型",
          message: "请输入地图服务名称",
          type: "warning",
        });
        return;
      }
      // console.log(this.mapServiceValue, this.chouseBaseMapType);
      // console.log(this.mapServiceValue, this.chouseBasemapname);
      // this.form["haveBaseMap"] = this.mapServiceValueOnce;
      //传入控制地图层 转store
      // this.$refs.baseMapMap.addService({
      //   type: this.chouseBaseMapType,
      //   type: this.chouseBasemapname,
      //   service: this.mapServiceValue,
      // });
      let that = this;
      this.$store.commit("setMapServiceValue", {
        type: that.chouseBaseMapTypeOnce,
        name: that.chouseBaseMapNameOnce,
        service: that.mapServiceValueOnce,
        show: true,
        layer: null,
      });
      this.mapServiceValueOnce = "";
      this.chouseBaseMapNameOnce = "";
    },
    setMapData(val) {
      this.LineData = val[0];
@@ -310,20 +336,20 @@
        loading();
        return;
      }
      let types = "",
      let names = "",
        urls = "",
        leng = this.mapServiceValue.length - 1;
      for (let k in this.mapServiceValue) {
        types += this.mapServiceValue[k].type;
        names += this.mapServiceValue[k].name;
        urls += this.mapServiceValue[k].service;
        if (k != leng) {
          types += ",";
          names += ",";
          urls += ",";
        }
      }
      let data = {
        hdid: row.hdid,
        maptype: types,
        mapname: names,
        mapurl: urls,
      };
      // console.log(data);
@@ -382,18 +408,18 @@
        loading();
        return;
      }
      let types = "",
      let names = "",
        urls = "",
        leng = this.mapServiceValue.length - 1;
      for (let k in this.mapServiceValue) {
        types += this.mapServiceValue[k].type;
        names += this.mapServiceValue[k].name;
        urls += this.mapServiceValue[k].service;
        if (k != leng) {
          types += ",";
          names += ",";
          urls += ",";
        }
      }
      row.maptype = types;
      row.mapname = names;
      row.mapurl = urls;
      // console.log(row);
      // loading();
@@ -492,15 +518,15 @@
          this.form = res.data.data;
          console.log(res);
          //解析数据
          let types = this.form.maptype.split(","),
          let names = this.form.mapname.split(","),
            urls = this.form.mapurl.split(",");
          console.log(types);
          console.log(names);
          console.log(urls);

          for (let k in types) {
          for (let k in names) {
            setTimeout(() => {
              this.$store.commit("setMapServiceValue", {
                type: types[k],
                name: names[k],
                service: urls[k],
                show: true,
                layer: null,
@@ -574,7 +600,7 @@
        this.page.total = data.total;
        this.data = data.records;
        for (let k in this.data) {
          this.data[k]["haveBaseMap"] = this.data[k].maptype;
          this.data[k]["addressNum"] = this.data[k].mapname.split(",").length;
        }
        this.loading = false;
        this.selectionClear();

 src/views/hd/baseMapMap.vue

@@ -3,7 +3,8 @@
    <MapInThere ref="baseMapMapsMap" />
    <div class="controlbaseMapMap">
      <div v-for="(item, index) in mapServiceValue" :key="index">
        {{ item.type + " " + index }}
        {{ item.name }}
        <div style="float: right">
        <el-switch class="around_left" v-model="item.show"> </el-switch>
        <el-button
          class="around_left"
@@ -13,6 +14,7 @@
          @click="deleteMapService(index)"
          :disabled="notSet"
        ></el-button>
        </div>
        <el-divider v-if="index != mapServiceValue.length - 1"></el-divider>
      </div>
    </div>

 vue.config.js

@@ -18,7 +18,9 @@
    entry.add("@/mock").end();
  },
  css: {
    extract: { ignoreOrder: true },
    extract: {
      ignoreOrder: true
    },
  },
  //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
  devServer: {
@@ -27,8 +29,10 @@
      "/api": {
        //本地服务接口地址
        // target: "http://192.168.0.107:80",
        // target: "http://192.168.0.102:82",
        //target: "http://171.34.197.243:790",
         target: 'http://localhost:82',
        target: "http://171.34.197.243:782", //服务器
        //  target: 'http://localhost:82',
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.vip/api',
        ws: true,