11

少年

2024-02-06 ffa44dff73d3834115dc619f2a0043ac288dd32b

11

 src/components/poplayer/main2.vue

ÎļþÒÑɾ³ý

 src/components/poplayer/poplayer2.vue

@@ -1,15 +1,17 @@
<template>
  <div style="z-index: 100000000">
    <div class="Poplayer">
  <div class="landAdmin">
    <transition name="el-zoom-in-bottom">
      <div class="Poplayer" v-if="state.show">
      <div class="close" @click.stop="closehandle"></div>
      <div class="title">点位详情</div>
      <div class="content">
        <div class="con-item" v-for="(item, index) in KEY" :key="index">
          <span class="name">{{ index }}：</span>
          <span class="value">{{ state.list[item] }}</span>
            <span class="value">{{ state.info[item] }}</span>
        </div>
      </div>
    </div>
    </transition>
  </div>
</template>

@@ -17,63 +19,62 @@
import store from "@/utils/store2";
import keys from "@/utils/poiKeys";
export default {
  name: "Main",
  components: {},
  props: {
    keys: {
      type: Object,
    },
    list: {
      type: Object,
    },
  },
  data() {
    return {
      state: store.Poplayer,
      state: store.dwInfo,
      KEY: {},
    };
  },
  computed: {},
  mounted() {
    if (this.list) {
      this.state.list = this.list;
      this.state.info = this.list;
    }
    this.KEY = keys[this.state.list.POITYPE];
    this.KEY = keys[this.state.info.POITYPE];
  },
  watch: {
    "state.list": function (val) {
    "state.info": function (val) {
      console.log("state.info");
      this.KEY = keys[val.POITYPE];
    },
    "state.show": function (val) {
      console.log("state.show");
      this.showlandInfo = val;
    },
  },
  methods: {
    closehandle() {
      if (window.pickFeature && window.pickFeature.primitive) {
        window.pickFeature.primitive.image = window.imgUrl;
        window.pickFeature = null;
      }
      store.setPoplayerListAction({});
      store.setdwInfo({});
      divPoint3 && divPoint3.deleteObject();
      store.setPoplayerShowAction(false);
      store.setTdglShow(false);
      if (window.tdglLine) {
        sgworld.Creator.DeleteObject(window.tdglLine);
        window.map.removeLayer(window.tdglLine);
        window.tdglLine = null;
      }
    },
  },
};
</script>

<style scoped>
.landAdmin {
  width: 100%;
  position: absolute;
  bottom: 0px;
  align-items: center;
  /* background: white; */
  z-index: 1000;
}
.Poplayer {
  /* min-width: 350px; */
  width: 80vw;
  /* min-height: 180px; */
  min-height: 180px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("./img/bg.png");
  background-color: #0b2c3f;

  border-radius: 10px;
  z-index: 999;
  color: #fff;
  font-family: SourceHanSansSC-R;
  /* padding: 20px; */
  padding: 10px 5px 10px 5px;
  box-sizing: border-box;
@@ -118,21 +119,25 @@

.con-item {
  width: 90%;
  overflow: hidden;
  /* overflow: hidden; */
  margin-left: 5%;
  margin-bottom: 7px;
  margin-left: 25px;
  margin-right: 20px;
  word-break: break-all;
  /* margin-right: 20px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.name {
  /* min-width: 100px; */
  float: left;
  width: 30%;
  /* float: left; */
}

.value {
  max-width: 400px;
  float: left;
  width: 70%;
  /* max-width: 400px; */
  /* float: left; */
  color: aqua;
}
</style>


 src/components/viewer2.vue

@@ -3,15 +3,6 @@
    <!-- openlayer -->
    <div id="openlayerContainer" @click="clicktoclose"></div>

    <div id="ponitPanel">
      <div id="ponitPanel-close" @click.stop="closehandle"></div>
      <div class="title">点位详情</div>
      <div id="ponitPanel-content">

      </div>

    </div>

    <!-- é¡µé¢æ ‡é¢˜ -->
    <div class="titleBg">
      <img src="@/assets/img/title/title.png" />
@@ -87,7 +78,7 @@
import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin2.vue";
import poplayer from "./poplayer/main2.vue";
import mainPoplayer from "./poplayer/poplayer2.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue";
import Axios from "axios";

@@ -123,7 +114,7 @@
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
    "my-poplayer": poplayer
    "my-poplayer":mainPoplayer
  },
  data() {
    return {
@@ -457,65 +448,4 @@
  width: 30px;
}

#ponitPanel {
  /* display: none; */
  width: 80vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("./poplayer/img/bg.png");
  z-index: 999;
  color: #fff;
  font-family: SourceHanSansSC-R;
  padding: 10px 5px 10px 5px;
  font-size: 16px;
  pointer-events: all;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  padding-left: 26px;
}


#ponitPanel-close {
  pointer-events: all;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("./poplayer/img/close.png");
  margin-top: 8px;
  margin-right: 5px;
  float: right;
  cursor: pointer;
}

#ponitPanel-content {
  width: 100%;
  margin: auto;
}

.ponitPanel-item {
  width: 90%;
  overflow: hidden;
  margin-bottom: 7px;
  margin-left: 25px;
  margin-right: 20px;
  word-break: break-all;
}

.ponitPanel-name {
  /* min-width: 100px; */
  float: left;
}

.ponitPanel-value {
  max-width: 400px;
  float: left;
  color: aqua;
}
</style>

 src/utils/map2 copy.js

ÎļþÒÑɾ³ý

 src/utils/map2.js

@@ -8,7 +8,7 @@
import Vue from 'vue';
import axios from "axios";
import _GLOBAL from '@/assets/GLOBAL2';
import poiLayer from '@/components/poplayer/main';
import poiLayer2 from '@/components/poplayer/main2';
import store from "@/utils/store2";
import { Message } from 'element-ui';
let tdglLine, qiyexinxi, qysl, ydbm, ydlx, cyfx, crzt, ydmj, crnx, crnf, rjl, jzxg, jzmd;
@@ -16,7 +16,7 @@
var clickEvent;

window.tdglLine = tdglLine
let PoiLayerConstructor = Vue.extend(poiLayer);
let PoiLayerConstructor = Vue.extend(poiLayer2);
/**核心区 */
export function loadHXQ() {
    let urls = window.gisBaseUrl + "/gisserver/wmsserver/YZ_BJ60";
@@ -2234,17 +2234,6 @@

//openlayer åœ°å›¾ç‚¹å‡»äº‹ä»¶
export function setClick(state) {
    console.log('setClick');
    let ponitPanel = document.getElementById('ponitPanel');
    let overlay = new ol.Overlay({
        element: ponitPanel,
        autoPan: {
            animation: {
                duration: 250,
            },
        },
    });
    window.map.addOverlay(overlay);
    function handleClick(e) {
        console.log(e.coordinate);
        // åœŸåœ°ç®¡ç†
@@ -2365,10 +2354,8 @@
            return;
        }


        window.map.forEachFeatureAtPixel(e.pixel, function (feature) {
            if (feature && feature.values_.desc) {
                ponitPanel.style.display = 'block'
                let obj = feature.values_.desc
                objdata = {
                    POITYPE: "POINT",
@@ -2377,9 +2364,11 @@
                    lon: obj.lng,
                    lat: obj.lat
                }
                overlay.setPosition(e.coordinate);
                store.setPoplayerShowAction(true);
                store.setPoplayerListAction(objdata);

                store.setTdglShow(false);
                store.setTdlgInfo({});
                store.setdwShow(true);
                store.setdwInfo(objdata);
                // if (window.instance) {
                //     window.instance.$destroy();
                // }

 src/utils/store2.js

@@ -150,6 +150,21 @@
    setTdlgInfo(val) {
        this.tdglInfo.info = val;
    },
    //点位
    dwInfo: {
        flag: false,
        show: false,
        info: {}
    },
    setdwFlag(val) {
        this.tdglInfo.flag = val;
    },
    setdwShow(val) {
        this.tdglInfo.show = val;
    },
    setdwInfo(val) {
        this.tdglInfo.info = val;
    },
    /**
    * åŽ†å²å½±åƒ
    */