youhua

少年

2024-03-05 d46ebfb71da0148dcc2724024cf7b053d784f299

youhua

 src/assets/GLOBAL2.vue

@@ -8,6 +8,8 @@
const hexin = null;
const yzxcgh = null;
const historyLayer = null;
const rotate = null;

export default {
  layers, //收集器
  alpha,
@@ -17,6 +19,7 @@
  annotation,
  hexin,
  yzxcgh,
  historyLayer
  historyLayer,
  rotate
};
</script>

 src/assets/img/collection/add.png

 src/assets/img/collection/mark.png

 src/assets/img/collection/recover.png

 src/assets/img/collection/reduce.png

 src/components/leftMenu/sousuo2.vue

@@ -14,11 +14,11 @@
          top: -1px;
          right: -3px;
        ">
        <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" />
        <!-- <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" /> -->
      </span>
      <span v-show="syssval == '请输入关键词搜索地图'" style="float: right; height: 100%; width: 10%">
      <!-- <span v-show="syssval == '请输入关键词搜索地图'" style="float: right; height: 100%; width: 10%">
        <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="showAddFavorite" />
      </span>
      </span> -->
    </div>
    <!-- 搜索界面 -->
    <div class="ssjm" v-show="ssjm">
@@ -72,13 +72,13 @@
  position: absolute;
  /* text-align: center; */
  left: 2.5%;
  bottom: 0.2rem;
  top: 0.15rem;
  width: 95%;
  border: 1px solid white;
  height: 0.4rem;
  line-height: 0.4rem;
  background: #fff;
  border-radius: 0.2rem;
  border-radius: 0.15rem;
  color: black;
  font-size: 0.14rem;
}

 src/components/poplayer/history2.vue

@@ -34,6 +34,8 @@
    };
  },
  mounted() {
    store.setNavigatorShow(false);
    store.setMapToolShow(false);
    window.mapapi.getView().setCenter([4.606512, 2.621472]);
    addHistoryLayer(this.currentValue);
  },
@@ -44,6 +46,10 @@
    },
    close() {
      store.setHistoryShow(false);
      window.mapapi.removeLayer(this.$global.historyLayer);
      window.mapapi.getView().setCenter([116.505348, 39.795592]);
      store.setNavigatorShow(true);
      store.setMapToolShow(true);
    },
  },
};
@@ -51,7 +57,7 @@
<style scoped>
.colseBtn {
  position: absolute;
  top: 5vh;
  top: 3vh;
  right: 20px;
}

@@ -63,7 +69,7 @@
.listBox {
  position: absolute;
  right: 20px;
  bottom: 10px;
  bottom: 0.5rem;
  background-color: #373737;
}


 src/components/rightMenu/bottom2.vue

@@ -1,182 +1,84 @@
<template>
  <div class="bottom" id="bottom">
    <div class="mapTools" v-show="show">
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomIn" title="放大">
          <img src="../../../static/img/image/zoomIn.png" />
        </el-button>
  <div class="bottom" id="bottom" :style="customStyle" v-if="state1.show">
    <div class="mapTool">
      <div class="tool-rotate" @click="flyBack" title="复位">
        <img src="@/assets/img/collection/recover.png" />
      </div>
      </div>
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomOut" title="缩小">
          <img src="../../../static/img/image/zoomOut.png" />
        </el-button>
      <div class="tool-rotate" @click="zoomIn" title="放大">
        <img src="@/assets/img/collection/add.png" />
      </div>
      <div class="border"></div>
      <div class="tool-rotate" @click="zoomOut" title="缩小">
        <img src="@/assets/img/collection/reduce.png" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.bottom {
  position: absolute;
  bottom: 0.4rem;
  height: 0.76rem;
  right: 0.4rem;
}
.mapModeControl {
  position: absolute;
  right: 0.05rem;
  background: rgba(90, 90, 90, 0.5);
  bottom: 0.05rem;
  height: 0.76rem;
  width: 1.03rem;
  transition: all 1s;
}
.bottom .mapModeControl:hover {
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  width: 3.2rem;
}
.mapMode {
  display: inline-block;
}
.mapMode dl {
  width: 0.88rem;
  height: 0.6rem;
  border: 1px solid #494949;
  cursor: pointer;
  margin: 0.08rem;
}

.mapMode dl:hover {
  border-color: #0553b4;
}

.mapMode dl {
  position: relative;
}
#history {
  background: url(../../../static/img/1.png) no-repeat;
}
#mode-3d {
  background: url(../../../static/img/2.png) no-repeat;
}
#mode-2d {
  background: url(../../../static/img/4.png) no-repeat;
}
.mapMode dt {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  position: absolute;
  left: 0;
  bottom: 0px;
  font-size: 0.12rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  background: rgba(0, 0, 0, 0.5);
}
.mapModeActive {
  background: rgba(1, 37, 80, 0.5) !important;
}

.mapTools {
  position: absolute;
  /* bottom: 2rem; */
  bottom: 0.2rem;
  /* right: 0.1rem; */
}
.mapTool {
  margin: 0.1rem 0;
}
.mapTool .el-button {
  padding: 0 !important;
  font-size: 0.24rem;
  border: unset;
  float: unset;
  display: block;
  background: rgba(18, 126, 255, 1);
  border-radius: 10px;
  background: #ffffff;
  margin-bottom: 8px;
}

/* .button-group-vertical {
  text-align: center;
  position: relative;
} */
.fgx {
  position: absolute;
  width: 80%;
  height: 1px;
  height: 1px;
  border: 1px solid #dcdfe6;
  z-index: 999;
  margin: 0 10%;
.border {
  border: 0.5px solid #efecec;
}
/* .button-group-vertical .el-button-group > .el-button:first-child {
  border-top-right-radius: 0.04rem !important;
  border-bottom-left-radius: 0px !important;

.tool-rotate {
  padding: 8px;
}
.button-group-vertical .el-button-group > .el-button:last-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.04rem !important;
} */
.mapTool img {
  width: 24px;
  margin: 3px;
  /* height: 0.4rem; */

.tool-rotate img {
  width: 20px;
  height: 20px;
}
</style>
    
<script>
import Bus from "../../js/bus.js";
import store from "@/utils/store2";
export default {
  props: ["test"],
  data() {
    return {
      show: true,
      parentdata: {
        fwval: false,
        zbzval: false,
        qpval: false,
        zymlval: false,
        kjcxval: false,
        dxmsval: false,
        snmsval: false,
        ssval: false,
      state1:store.mapTools,
      state: store.layerPanel,
      customStyle: {
        position: "absolute",
        bottom: "0.4rem",
        right: "0.1rem",
      },
      clickIndex: 0,
      // isShowHistory: false,
      camera: {
        position: [116.52217697339846, 39.75979421847914, 17045.47005612415],
        orientation: {
          heading: 0,
          pitch: -90,
          roll: 0,
        },
      },
      modes: [
        {
          id: "mode-3d",
          name: "3D",
          mode: 3,
        },
        {
          id: "mode-2d",
          name: "2D",
          mode: 2,
        },
      ],
    };
  },
  mounted() {
    Bus.$on("myMsg", (myMsg) => {
      this.show = myMsg;
    });
  mounted() {},
  watch: {
    "state.show": {
      handler(newVal) {
        if (newVal) {
          this.customStyle = {
            position: "absolute",
            top: "2rem",
            right: "0.1rem",
          };
        } else {
          this.customStyle = {
            position: "absolute",
            bottom: "0.4rem",
            right: "0.1rem",
          };
        }
      },
      immediate: true,
    },
  },
  methods: {
    zoomIn() {
      const view = window.mapapi.getView();
      const zoom = view.getZoom();

      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.mapapi.getView().getCenter(), // 中心点
@@ -188,7 +90,6 @@
    zoomOut() {
      const view = window.mapapi.getView();
      const zoom = view.getZoom();

      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.mapapi.getView().getCenter(), // 中心点
@@ -197,6 +98,15 @@
        duration: 1000, // 缩放持续时间，默认不需要设置
      });
    },
    flyBack() {
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: [116.52217697339846, 39.75979421847914], // 中心点
        zoom: 12, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
      });
    },
  },
};
</script>

 src/components/rightNavigation/NavigationBar2.vue

@@ -1,9 +1,7 @@
<template>
  <div class="navigationBar">
    <div class="menuBtn">
      <el-button class="right-menuBtn" @click="handleMenuListShow">
  <div class="navigationBar" v-if="state.show">
    <div class="menuBtn" @click="handleMenuListShow">
        <img src="@/assets/img/navigation/menuicon.png" />
      </el-button>
    </div>
    <div class="menuList" v-show="showMenuList.show">
      <ul>
@@ -21,7 +19,6 @@
            <span>{{ value.name }}</span>
          </div>
        </li>
        
      </ul>
    </div>
  </div>
@@ -33,6 +30,7 @@
  name: "NavigationBar",
  data() {
    return {
      state:store.navigator,
      showMenuList: store.MenuList,
      resetShowState: store.resetLink,
      favoriteShowState: store.favorite,
@@ -109,7 +107,7 @@

    // 点击右上角菜单项
    handleMenuClick(attr) {
      console.log('点击右上角菜单项');
      console.log("点击右上角菜单项");
      //清除搜索点
      flyPoint && Viewer.entities.remove(flyPoint);
      flyPoint = undefined;
@@ -207,36 +205,26 @@
<style scoped>
.navigationBar {
  position: absolute;
  top: 0.55rem;
  right: 0.15rem;
  top: 0.75rem;
  right: 0.1rem;
  z-index: 10;
  /* width: 64px; */
}
.menuBtn .el-button {
  padding: 0 !important;
  font-size: 0.24rem;
  border: unset;
  float: unset;
  display: block;
.menuBtn {
  padding: 8px;
  background: rgba(18, 126, 255, 1);
  border-radius: 10px;
}
.menuBtn img {
  width: 24px;
  margin: 3px;
}
/* .menuBtn {
  margin-left: 25px;
  width: 22px;
  width: 20px;
  height: 20px;
  background-image: url("~@/assets/img/navigation/menuicon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
} */
}

.menuList {
  padding: 0px 2px;
  position: absolute;
  width: 40px;
  margin-top: 0.1rem;
  right: -0.05rem;
  right: 0;
  background-color: white;
  border-radius: 10px;
}
@@ -244,29 +232,25 @@
.menuItem {
  width: 32px;
  color: black;
  margin: 0px auto;
  margin-top: 10px;
  margin-bottom: 7px;
  /* padding-bottom: 7px; */
  border-bottom: 1px solid #e8e8e9;
  text-align: center;
  cursor: pointer;
  /* border-bottom: 1px solid #e8e8e9; */
  /* pointer-events:none */
}

li:last-child .menuItem {
  border: none;
}

img {
.menuItem img {
  width: 24px;
  /* height: 24px; */
  text-align: center;
}

.menuItem span {
  display: block;
  text-align: center;
  margin-top: 2px;
}
</style>

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -539,6 +539,7 @@
  background: white;
  z-index: 1000;
  padding-left: 0.25rem;
  border-radius: 15px 15px 0px 0px;
}

.title {

 src/components/sideMenu/layerTreePanel/layerTreePanel2.vue

@@ -103,7 +103,7 @@
  mounted() {
    axios.get("./static/json/layers.json").then(
      (res) => {
        // console.log("layers.json", res);
        console.log("layers.json", res);
        //获取默认选中数据的id
        this.parseJson(res.data.children);


 src/components/viewer2.vue

@@ -4,9 +4,9 @@
    <div id="openlayerContainer" @click="clicktoclose"></div>

    <!-- 页面标题 -->
    <div class="titleBg">
    <!-- <div class="titleBg">
      <img src="@/assets/img/title/title.png" />
    </div>
    </div> -->
    <!-- 历史影像 -->
    <my-history v-if="state.show"></my-history>
    <!-- 历史影像关闭按钮 -->
@@ -24,7 +24,7 @@
    <!-- 原左下菜单 -->
    <!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
    <!-- 左下快捷区域（复位、指北等） -->
    <my-left-bottom :test="childrendata"></my-left-bottom>
    <!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
    <!-- 右下快捷区域（放大缩小） -->
    <my-right-bottom :test="childrendata"></my-right-bottom>

@@ -34,7 +34,7 @@
    <!-- 位置面板 -->
    <my-collection-panel></my-collection-panel>
    <!-- 指北针面板 -->
    <my-direction-panel></my-direction-panel>
    <!-- <my-direction-panel></my-direction-panel> -->
    <!-- 新增收藏面板 -->
    <my-add-collection-panel></my-add-collection-panel>
    <!-- 窨井、摄像头统计面板 -->
@@ -87,7 +87,8 @@
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  getCurrentPosition,
  listenDirection,
  getCurrentPosition
} from "@/utils/tool";
// import Map from "ol/Map.js";
// import TileLayer from "ol/layer/Tile.js";
@@ -260,8 +261,8 @@
          projection: "EPSG:4326",
          zoom: 12,
          minZoom: 9.5,
          enableRotation: false,
        }),
        // events: ["singleclick", "pointermove"],
      });

      window.mapapi = map;
@@ -272,7 +273,11 @@
      addYzLayer();

      setClick(true);

      getCurrentPosition();
      listenDirection();


      // leftClick()

      window.layerOpen = function (name, options) {

 src/router/index.js

@@ -10,7 +10,7 @@
const routes = [
  {
    path: '/',
    redirect: "login",
    redirect: "home",
    // redirect: "index",
  },
  {

 src/utils/map2.js

@@ -2482,3 +2482,6 @@
        duration: 1500
    })
}




 src/utils/store2.js

@@ -1,4 +1,16 @@
const store = {
    navigator: {
        show: true,
    },
    setNavigatorShow(val){
      this.navigator.show = val
    },
    mapTools: {
        show: true,
    },
    setMapToolShow(val){
     this.mapTools.show = val
    },
    /**地址页面 */
    locationCollection: {
        show: false

 src/utils/tool.js

@@ -1,6 +1,7 @@

import _GLOBAL from '@/assets/GLOBAL2'
import gcj02Mecator from '@/utils/transform'
import { ceil } from 'lodash';
//清除
export function clearAll() {
    if (_GLOBAL.ImageLayer) {
@@ -128,18 +129,91 @@


//获取当前定位
var _rotate = 90;
var _marker = null;
var points = [];

export function randomPoint() {
    let t = 116.505348;
    let e = 39.795592;
    t += .01 * Math.random();
    e += .01 * Math.random();
    points.push([t, e]);
}


export function getCurrentPosition() {
    // setInterval(() => {
    //     randomPoint();
    // }, 1000)

    // console.log(points, '点位测试')
    // _marker = createGPSMarker(points, _rotate);
    // window.mapapi.addLayer(_marker)
    
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((res) => {
            console.log(res);//这里会返回经纬度，然后还要通过经纬度转换地区名称
        navigator.geolocation.watchPosition((res) => {
            let lat = res.coords.latitude;
            let lon = res.coords.longitude;
            _marker = createGPSMarker([lon, lat], _rotate);
            window.mapapi.addLayer(_marker)
        });
    }

}


export function createGPSMarker(position, rotate) {
    const GPSMarkerLayer = new ol.layer.Vector({
        id: 'LocationPoint',
        name: '定位点',
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point(position),
            })]
        }),
        style: new ol.style.Style({
            image: new ol.style.Icon({
                src: require('@/assets/img/collection/mark.png'),
                anchorOrigin: "top-left",
                anchorXUnits: "fraction",
                anchorYUnits: "fraction",
                offsetOrigin: "bottom-right",
                scale: 0.6,
                rotation: rotate,
                opacity: 1,
            })
        }),
        zIndex: 9999,
    });

    return GPSMarkerLayer
};


export function listenDirection() {
    window.addEventListener('deviceorientation', function (e) {
        if (_marker) {
            _rotate = e.alpha * (Math.PI / -180);
            _marker.setStyle(
                new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 0.5],
                        anchorOrigin: 'top-left',
                        src: require('@/assets/img/collection/mark.png'),
                        rotation: _rotate,
                        anchorXUnits: "fraction",
                        anchorYUnits: "fraction",
                        scale: 0.5,
                        opacity: 1
                    })
                })
            )
        }
    }, false);
};