Merge branch 'master' of http://103.135.160.14:9034/r/PM20221203225_MobileWeb

lixuliang

2024-03-06 7c4546cc6f84adf52a4aaa61244635615041c178

Merge branch 'master' of http://103.135.160.14:9034/r/PM20221203225_MobileWeb

 src/assets/GLOBAL2.vue

@@ -8,7 +8,8 @@
const hexin = null;
const yzxcgh = null;
const historyLayer = null;
const rotate = null;
const rotate = 90;
const GPSMarker = null;

export default {
  layers, //收集器
@@ -20,6 +21,7 @@
  hexin,
  yzxcgh,
  historyLayer,
  rotate
  rotate,
  GPSMarker
};
</script>

 src/components/poplayer/history2.vue

@@ -38,6 +38,9 @@
    store.setMapToolShow(false);
    window.mapapi.getView().setCenter([4.606512, 2.621472]);
    addHistoryLayer(this.currentValue);
    if (_GLOBAL.GPSMarker) {
      window.mapapi.removeLayer(_GLOBAL.GPSMarker);
    }
  },
  methods: {
    changeLeftMap(item) {

 src/components/viewer2.vue

@@ -57,7 +57,7 @@
</template>
<script>
import store from "@/utils/store2.js";
import { setClick, leftClick } from "@/utils/map2.js";
import { setClick, leftClick,touchClick } from "@/utils/map2.js";
import _GLOBAL from "@/assets/GLOBAL2";
// import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom2.vue";
@@ -266,18 +266,16 @@
      });

      window.mapapi = map;

      addImageLayer();
      addAnnotationLayer();
      addHxLayer();
      addYzLayer();

      setClick(true);
      touchClick();

      getCurrentPosition();
      listenDirection();


      // leftClick()

      window.layerOpen = function (name, options) {
@@ -336,34 +334,34 @@
  },
  methods: {
    clicktoclose() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.count++;
        if (this.count == 2) {
          // console.log("单击事件");
          // 关闭所有弹窗
          //this.$refs.menu.closeall();
          // 清除定位中的位置标记
          //this.$refs.menu.clearFlyPoint();
        } else {
          // 执行放大操作
          // console.log("双击");
          // Viewer.camera.zoomIn();
          // console.log(window.clickPOI);
          // let p = sgworld.Navigate.getDegrees();
          // console.log(p);
          // Viewer.camera.flyTo({
          //   destination: Cesium.Cartesian3.fromDegrees(
          //     window.clickPOI.lon,
          //     window.clickPOI.lat,
          //     p.height / 1.8
          //   ),
          //   duration: 1.0,
          // });
        }
        this.count = 0;
      }, 300);
      this.count++;
      // clearTimeout(this.timer);
      // this.timer = setTimeout(() => {
      //   this.count++;
      //   if (this.count == 2) {
      //     // console.log("单击事件");
      //     // 关闭所有弹窗
      //     //this.$refs.menu.closeall();
      //     // 清除定位中的位置标记
      //     //this.$refs.menu.clearFlyPoint();
      //   } else {
      //     // 执行放大操作
      //     // console.log("双击");
      //     // Viewer.camera.zoomIn();
      //     // console.log(window.clickPOI);
      //     // let p = sgworld.Navigate.getDegrees();
      //     // console.log(p);
      //     // Viewer.camera.flyTo({
      //     //   destination: Cesium.Cartesian3.fromDegrees(
      //     //     window.clickPOI.lon,
      //     //     window.clickPOI.lat,
      //     //     p.height / 1.8
      //     //   ),
      //     //   duration: 1.0,
      //     // });
      //   }
      //   this.count = 0;
      // }, 300);
      // this.count++;
    },
    datafromchild(data) {
      for (var i in data) {

 src/utils/map2.js

@@ -2483,5 +2483,22 @@
    })
}

//监听地图双击事件

export function touchClick() {
    let dom = document.getElementById('openlayerContainer');
    dom.addEventListener('touchstart', onTouchStart);
    function onTouchStart(e) {
        let len = e.touches.length;
        if (len === 2) {
            window.mapapi.getView().animate({
                center: window.mapapi.getView().getCenter(),
                zoom: window.mapapi.getView().getZoom() - 1,
                duration: 1000,
            });
        }
    }
}




 src/utils/tool.js

@@ -119,6 +119,9 @@
//加载历史影像
export function addHistoryLayer(name) {
    const layerName = name;
    if (_GLOBAL.historyLayer) {
        window.mapapi.removeLayer(_GLOBAL.historyLayer)
    }
    _GLOBAL.historyLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: `https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=${layerName}&type=Sate&level={z}&x={x}&y={y}`,
@@ -128,41 +131,25 @@
}


//获取当前定位
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.watchPosition((res) => {
            let lat = res.coords.latitude;
            let lon = res.coords.longitude;
            _marker = createGPSMarker([lon, lat], _rotate);
            window.mapapi.addLayer(_marker)
            if (_GLOBAL.GPSMarker) {
                window.mapapi.removeLayer(_GLOBAL.GPSMarker)
            }
            _GLOBAL.GPSMarker = createGPSMarker([lon, lat], _GLOBAL.rotate);
            window.mapapi.addLayer(_GLOBAL.GPSMarker)

        });
    }

}


//创建当前定位点
export function createGPSMarker(position, rotate) {
    const GPSMarkerLayer = new ol.layer.Vector({
        id: 'LocationPoint',
@@ -191,17 +178,18 @@
};


//监听定位点跟随旋转
export function listenDirection() {
    window.addEventListener('deviceorientation', function (e) {
        if (_marker) {
            _rotate = e.alpha * (Math.PI / -180);
        if (_GLOBAL.GPSMarker) {
            _GLOBAL.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,
                        rotation: _GLOBAL.rotate,
                        anchorXUnits: "fraction",
                        anchorYUnits: "fraction",
                        scale: 0.5,