优化

lixuliang

2024-03-15 626003e9beb59cf711f59f3b48087300070f121e

优化

 src/assets/GLOBAL2.vue

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

@@ -21,6 +22,7 @@
  hexin,
  yzxcgh,
  historyLayer,
  historyLW,
  rotate,
  GPSMarker
};

 src/components/leftMenu/sousuo.vue

@@ -282,7 +282,7 @@
      rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
      return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
    },
    getPoi() {
    getGdPoi() {
      axios
        .get(common.poiserve, {
          params: {
@@ -386,7 +386,7 @@
        this.poiList = [];
        switch (this.select) {
          case "全部":
            this.getPoi();
            this.getGdPoi();
            this.getData();
            // axios
            //   .all([
@@ -512,7 +512,7 @@
            //   );
            break;
          case "POI":
            this.getPoi();
            this.getGdPoi();
            break;
          case "地块":
            this.getData();

 src/components/leftMenu/sousuo2.vue

@@ -5,7 +5,10 @@
      <span
        @click="ssjmxs"
        style="float: left; height: 100%; width: 80%; overflow: hidden"
        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px;font-size: 0.15rem;"></i
        ><i
          class="el-icon-search"
          style="padding: 0px 15px 0px 20px; font-size: 0.15rem"
        ></i
        >{{ syssval }}</span
      >
      <span
@@ -150,7 +153,6 @@
  width: 0.8rem;
  position: relative;
  font-size: 0.14rem;

}
.el-select:after {
  content: "";
@@ -209,7 +211,7 @@
  line-height: 20px;
}
.ssjg .addressBox {
  text-indent: 27px;
  margin-left: 27px;
  margin-top: 5px;
  color: #000;
  font-weight: 500;
@@ -349,7 +351,7 @@
      rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
      return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
    },
    getPoi() {
    getGdPoi() {
      axios
        .get(common.poiserve, {
          params: {
@@ -362,8 +364,6 @@
          },
        })
        .then((res) => {
          // 高德
          console.log("poiserve");
          if (res.data.status == "1") {
            res.data.pois &&
              res.data.pois
@@ -395,6 +395,54 @@
                    pname: val.province,
                    type: val.type,
                    typecode: val.typecode,
                  };
                  Allresults.push(obj);
                });
          }
          this.total = Allresults.length;
          this.poiList = Allresults;
          this.showList = true;
        });
    },
    getBdPoi() {
      axios
        .get(common.poiserve, {
          params: {
            request: "bdPoi",
            query: this.poi_text,
            output: "json",
            coord: "cgcs2000",
            page_num: 1,
            page_size: 30,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.status == 0) {
            res.data.results &&
              res.data.results
                .filter((item) => {
                  var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                  return (
                    item.city.includes("北京") &&
                    item.name.includes(this.poi_text)
                  );
                })
                .forEach((val) => {
                  let poiarr = val.location.split(",");
                  let poi = {
                    lon: parseFloat(poiarr[0]),
                    lat: parseFloat(poiarr[1]),
                  };
                  let obj = {
                    address: val.address,
                    adname: val.area,
                    cityname: val.city,
                    id: val.uid,
                    lat: val.location.lat,
                    lng: val.location.lng,
                    name: val.name,
                    pname: val.province,
                  };
                  Allresults.push(obj);
                });
@@ -454,7 +502,7 @@
        this.poiList = [];
        switch (this.select) {
          case "全部":
            this.getPoi();
            this.getBdPoi();
            this.getData();
            // axios
            //   .all([
@@ -580,7 +628,7 @@
            //   );
            break;
          case "POI":
            this.getPoi();
            this.getBdPoi();
            break;
          case "地块":
            this.getData();

 src/components/poplayer/history2.vue

@@ -23,7 +23,7 @@
<script>
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store2";
import { addHistoryLayer } from "@/utils/tool";
import { addHistoryLayer, addHistoryLW } from "@/utils/tool";
export default {
  name: "historyBox",
  components: {},
@@ -42,6 +42,7 @@
    window.mapapi.getView().setCenter(ol.proj.fromLonLat([4.606512, 2.621472]));
    // window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
    addHistoryLayer(this.currentValue);
    addHistoryLW();
    if (_GLOBAL.GPSMarker) {
      window.mapapi.removeLayer(_GLOBAL.GPSMarker);
    }
@@ -54,7 +55,10 @@
    close() {
      store.setHistoryShow(false);
      window.mapapi.removeLayer(this.$global.historyLayer);
      window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
      window.mapapi.removeLayer(this.$global.historyLW);
      window.mapapi
        .getView()
        .setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
      store.setNavigatorShow(true);
      store.setMapToolShow(true);
    },
@@ -102,8 +106,6 @@
  /* background-color: #00e1ff; */
  color: #127dff;
}



.listBox .active {
  /* background-color: #4590d7; */

 src/components/rightMenu/bottom2.vue

@@ -1,10 +1,10 @@
<template>
  <div class="bottom" id="bottom" :style="customStyle" v-if="state1.show">
    <!-- <div class="mapTool">
      <div class="tool-rotate" @click="PointingNorth" title="指北">
    <div class="mapTool">
      <div class="tool-rotate" @click="flyToCurrentPosition" title="定位">
        <img src="@/assets/img/collection/compass.png" />
      </div>
    </div> -->
    </div>
    <div class="mapTool">
      <div class="tool-rotate" @click="flyBack" title="复位">
        <img src="@/assets/img/collection/recover.png" />
@@ -23,7 +23,6 @@
</template>

<style scoped>

.mapTool {
  width: 0.42rem;
  /* border-radius: 10px; */
@@ -46,7 +45,7 @@
  align-items: center;
  justify-content: center;
}
.mapTool2 .tool-rotate{
.mapTool2 .tool-rotate {
  height: 0.33rem;
  line-height: 0.33rem;
}
@@ -78,7 +77,7 @@
      },
    };
  },
  mounted() { },
  mounted() {},
  watch: {
    "state.show": {
      handler(newVal) {
@@ -131,9 +130,14 @@
        duration: 1000, // 缩放持续时间，默认不需要设置
      });
    },
    PointingNorth() {
      alert("指北针开发中");
      // console.log("指北针开发中")
    flyToCurrentPosition() {
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.personalPoi, // 中心点
        zoom: 17, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1500, // 缩放持续时间，默认不需要设置
      });
    },
  },
};

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -276,11 +276,11 @@
      switch (result.name) {
        case "二维地图":
          loadGeoMap();
          loadBaseMap();
          // loadBaseMap();
          // addAnnotationLayer();
          addHxLayer();
          addYzLayer();
          window.mapapi.getView().setZoom(14);
          // window.mapapi.getView().setZoom(14);
          break;
        case "影像地图":
          addImageLayer();

 src/components/sideMenu/sliderAlpha/alpha2.vue

@@ -15,7 +15,8 @@
  methods: {
    changeSlider(val) {
      if (window.tdgllayer) {
        window.tdgllayer.state_.layer.setOpacity(val / 100);
        window.tdgllayer.state_ &&
          window.tdgllayer.state_.layer.setOpacity(val / 100);
      }
    },
  },

 src/components/viewer2.vue

@@ -275,7 +275,7 @@
      // addAnnotationLayer();
      window.mapapi.getView().setZoom(14);
      loadGeoMap();
      loadBaseMap();
      // loadBaseMap();
      addHxLayer();
      addYzLayer();


 src/utils/map2.js

@@ -2207,8 +2207,10 @@
//openlayer 创建点位
window.pointArr = [];
export function createPointMarker(position, obj) {
    let positions = ol.proj.fromLonLat(position);
    let startFeature = new ol.Feature({
        geometry: new ol.geom.Point(position),
        geometry: new ol.geom.Point(positions),

    });
    startFeature.setProperties({
        desc: obj,
@@ -2266,7 +2268,10 @@
                        window.tdglLine = null;
                    }
                    var format = new ol.format.WKT(); // 创建一个 WKT 解析器
                    var feature = format.readFeature(response.data.geometry); // 解析 WKT 并生成要素对象
                    var feature = format.readFeature(response.data.geometry, {
                        dataProjection: 'EPSG:4326',
                        featureProjection: 'EPSG:3857'
                    }); // 解析 WKT 并生成要素对象

                    // 创建一个要素图层
                    window.tdglLine = new ol.layer.Vector({
@@ -2371,14 +2376,15 @@

        window.mapapi.forEachFeatureAtPixel(e.pixel, function (feature) {
            console.log(feature.getProperties(), 'aaa');

            //搜索的点位
            if (window.pointArr.length > 0) {
                let obj = feature.getProperties().desc
                objdata = {
                    POITYPE: "POINT",
                    name: obj.name,
                    address: obj.address,
                if (obj) {
                    objdata = {
                        POITYPE: "POINT",
                        name: obj.name,
                        address: obj.address,
                    }
                }
            } else {
                let properties = feature.getProperties().features[0].values_;
@@ -2474,10 +2480,6 @@
                }
            }





            store.setTdglShow(false);
            store.setTdlgInfo({});
            store.setdwShow(true);
@@ -2495,8 +2497,8 @@

export function flyToPoint(posisitons) {
    window.mapapi.getView().animate({
        center: posisitons,
        zoom: 15,
        center: ol.proj.fromLonLat(posisitons),
        zoom: 18,
        duration: 1500
    })
}

 src/utils/tool.js

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

import _GLOBAL from '@/assets/GLOBAL2'
import gcj02Mecator from '@/utils/transform'
import { ceil } from 'lodash';

//清除
export function clearAll() {
    if (_GLOBAL.ImageLayer) {
@@ -30,8 +30,8 @@
    _GLOBAL.ImageLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
            projection:"EPSG:3857",
            tileSize: 512        
            projection: "EPSG:3857",
            tileSize: 512
        }),
    });
    // window.mapapi.addLayer(_GLOBAL.ImageLayer);
@@ -128,11 +128,45 @@
    }
    _GLOBAL.historyLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            projection:"EPSG:3857",
            projection: "EPSG:3857",
            url: `https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=${layerName}&type=Sate&level={z}&x={x}&y={y}`,
        })
    });
    window.mapapi.addLayer(_GLOBAL.historyLayer);
}
var topResolution = 896.0859375;
var resolutions = [];
let matrixIds = [];

for (let zoom = 0; zoom < 13; zoom++) {
    resolutions.push(topResolution / Math.pow(2, zoom));
    matrixIds[zoom] = zoom;
}
// 
// 加载历史影像路网
export function addHistoryLW(name) {
    const layerName = name;
    if (_GLOBAL.historyLW) {
        window.mapapi.removeLayer(_GLOBAL.historyLW)
    }

    _GLOBAL.historyLW = new ol.layer.Tile({
        source: new ol.source.WMTS({
            url: "https://skyzt.bda.gov.cn/service/ImageEngine/picdis/abc?",
            layer: "Shiliang_Lw_2019",
            style: "",
            format: "image/png",
            // 投影坐标系
            tileGrid: new ol.tilegrid.WMTS({
                extent: [371987.18334, 252920.58593, 624459.12036, 423400.07714],
                origin: [0, 688194],
                resolutions: resolutions,
                matrixIds: matrixIds,
                tileSize: 256,
            }),
        }),
    });
    window.mapapi.addLayer(_GLOBAL.historyLW);
}

//实时获取定位
@@ -154,12 +188,15 @@

//创建当前定位点
export function createGPSMarker(position, rotate) {
    let GPSPOI_3857 = ol.proj.fromLonLat(position);
    // 记录当前位置(定位用)
    window.personalPoi = GPSPOI_3857;
    const GPSMarkerLayer = new ol.layer.Vector({
        id: 'LocationPoint',
        name: '定位点',
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point(position),
                geometry: new ol.geom.Point(GPSPOI_3857),
            })]
        }),
        style: new ol.style.Style({