11

少年

2024-02-06 5964bd44f4e28a46fb6f15bd2b5205867b8ea86b

11

 src/components/leftMenu/sousuo2.vue

@@ -2,44 +2,22 @@
  <div id="sousuo" class="sousuo">
    <!-- æœç´¢æ¡† -->
    <div class="ssk" v-show="ssk.show">
      <span
        @click="ssjmxs"
        style="float: left; height: 100%; width: 80%; overflow: hidden"
        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
        >{{ syssval }}</span
      >
      <span
        v-show="syssval !== '请输入关键词搜索地图'"
        @click="clearval"
        style="float: right; height: 100%; width: 20%"
        ><i class="el-icon-circle-close"></i
      ></span>
      <span
        v-show="syssval !== '请输入关键词搜索地图'"
        style="
      <span @click="ssjmxs" style="float: left; height: 100%; width: 80%; overflow: hidden"><i class="el-icon-search"
          style="padding: 0px 15px 0px 20px"></i>{{ syssval }}</span>
      <span v-show="syssval !== '请输入关键词搜索地图'" @click="clearval" style="float: right; height: 100%; width: 20%"><i
          class="el-icon-circle-close"></i></span>
      <span v-show="syssval !== '请输入关键词搜索地图'" style="
          float: right;
          height: 100%;
          width: 10%;
          position: absolute;
          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%"
      >
        <img
          src="@/assets/img/navigation/addf.png"
          style="width: 20px"
          @click.stop="showAddFavorite"
        />
      <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>
    </div>
    <!-- æœç´¢ç•Œé¢ -->
@@ -51,37 +29,17 @@
      </div>
      <!-- æœç´¢æ¡† -->
      <div style="margin: 0.1rem 0">
        <el-input
          placeholder="输入关键字搜索地图"
          autofocus
          v-model="poi_text"
          @input="changeInput"
          clearable
        >
        <el-input placeholder="输入关键字搜索地图" autofocus v-model="poi_text" @input="changeInput" clearable>
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <!-- ç»“果显示 -->
      <div v-if="total != 0">
        <div class="ssjg" v-show="ssjgxs">
          <div
            class="everyinfo"
            v-for="(item, index) in poiList"
            :key="index"
            @click="flyTo(item)"
          >
          <div class="everyinfo" v-for="(item, index) in poiList" :key="index" @click="flyTo(item)">
            <div style="margin: 0.05rem 0">
              <i class="el-icon-map-location"></i>{{ item.name }}
            </div>
@@ -90,9 +48,7 @@
              <span>电话:{{ item.telphone ? item.telphone : "暂无联系方式" }}</span> -->
              <!-- <span>区域:{{ item.area ? item.area : "暂无区域信息" }}</span> -->
              <!-- <br /> -->
              <span
                >地址:{{ item.address ? item.address : "暂无详细地址" }}</span
              >
              <span>地址:{{ item.address ? item.address : "暂无详细地址" }}</span>
            </div>
          </div>
        </div>
@@ -136,11 +92,18 @@
  height: 100%;
  top: 0;
  background-color: #f3f3f3;
  z-index: 99999;
  z-index: 99;
}

.el-select {
  width: 80px;
}


.el-scrollbar .hover {
  background: none;
}


/* æ¯æ¡æœç´¢ç»“æžœ */
.everyinfo {
@@ -190,7 +153,7 @@
import axios from "axios";
import store from "@/utils/store2.js";
import common from "@/components/common";

import { createPointMarker, flyToPoint } from '@/utils/map2.js'
window.flyPoint = null;
window.flyLine = null;
let Allresults = [];
@@ -528,68 +491,91 @@
    flyTo(item) {
      this.ssjm = false;
      this.syssval = item.name;
      let that = this;
      //飞行定位
      flyToPoint([item.lng, item.lat])
      //创建点位
      let layer = createPointMarker([item.lng, item.lat], item);
      window.map.addLayer(layer)


















      // let that = this;
      // let degrees = item.location.split(',');
      // let degrees = [item.location.lng, item.location.lat];
      let degrees = [item.lng, item.lat];
      window.flyPoint && Viewer.entities.remove(window.flyPoint);
      window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
      sgworld.Navigate.flyToPointsInterest({
        destination: Cesium.Cartesian3.fromDegrees(
          degrees[0],
          degrees[1],
          1000
        ),
      });
      // let degrees = [item.lng, item.lat];
      // window.flyPoint && Viewer.entities.remove(window.flyPoint);
      // window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
      // sgworld.Navigate.flyToPointsInterest({
      //   destination: Cesium.Cartesian3.fromDegrees(
      //     degrees[0],
      //     degrees[1],
      //     1000
      //   ),
      // });
      // æ·»åŠ ç‚¹ä½
      window.flyPoint = Viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
        billboard: {
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          scale: 1,
          image: window.SmartEarthRootUrl + "/Workers/image/mark1.png",
          heightReference: 1,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
        properties: item,
      });
      // window.flyPoint = Viewer.entities.add({
      //   position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
      //   billboard: {
      //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      //     scale: 1,
      //     image: window.SmartEarthRootUrl + "/Workers/image/mark1.png",
      //     heightReference: 1,
      //     disableDepthTestDistance: Number.POSITIVE_INFINITY,
      //   },
      //   properties: item,
      // });
      // å¦‚果是地块，添加范围线
      if (item.type == "大兴用地") {
        axios
          .get(
            window.gisBaseUrl +
              "yzxncsApi/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
              degrees[0] +
              "&lat=" +
              degrees[1] +
              "&geom=true&requesttype=json"
          )
          .then((response) => {
            let center = { lon: 0, lat: 0 };
            let polygon = that.read(response.data.geometry);
            if (polygon.length > 0) {
              var geometry = [];
              let points = polygon[0].split(",");
              for (let i = 0; i < points.length; i++) {
                let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
                center.lon += parseFloat(point[0]) / points.length;
                center.lat += parseFloat(point[1]) / points.length;
                geometry.push({
                  x: parseFloat(point[0]),
                  y: parseFloat(point[1]),
                  z: 0,
                });
              }
              window.flyLine = sgworld.Creator.createPolyline(
                geometry,
                "#ff0000",
                1,
                0,
                "线"
              );
            }
          });
      }
      // if (item.type == "大兴用地") {
      //   axios
      //     .get(
      //       window.gisBaseUrl +
      //       "yzxncsApi/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
      //       degrees[0] +
      //       "&lat=" +
      //       degrees[1] +
      //       "&geom=true&requesttype=json"
      //     )
      //     .then((response) => {
      //       let center = { lon: 0, lat: 0 };
      //       let polygon = that.read(response.data.geometry);
      //       if (polygon.length > 0) {
      //         var geometry = [];
      //         let points = polygon[0].split(",");
      //         for (let i = 0; i < points.length; i++) {
      //           let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
      //           center.lon += parseFloat(point[0]) / points.length;
      //           center.lat += parseFloat(point[1]) / points.length;
      //           geometry.push({
      //             x: parseFloat(point[0]),
      //             y: parseFloat(point[1]),
      //             z: 0,
      //           });
      //         }
      //         window.flyLine = sgworld.Creator.createPolyline(
      //           geometry,
      //           "#ff0000",
      //           1,
      //           0,
      //           "线"
      //         );
      //       }
      //     });
      // }
    },
    AddFavorite() {
      let posi = sgworld.Viewer.camera.position;

 src/components/rightNavigation/NavigationBar2.vue

@@ -109,7 +109,6 @@

    // ç‚¹å‡»å³ä¸Šè§’菜单项
    handleMenuClick(attr) {
      debugger;
      console.log('点击右上角菜单项');
      //清除搜索点
      flyPoint && Viewer.entities.remove(flyPoint);

 src/components/sideMenu/addCollectionMenu/addCollectionPanel2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,90 @@
<template>
    <div class="addCollectionPanel">
        <div class="menutop">
            <div class="menuback" @click="back">
                <i class="el-icon-arrow-left"></i><span>返回</span>
            </div>
            <div class="menutitle">添加收藏</div>
        </div>
        <div style="width: 80%; margin: 0.2rem auto" id="sc">
            <el-input placeholder="请输入收藏点名称" v-model="scVal" size="small"></el-input>
            <div style="text-align: center; margin-top: 5%">
                <el-button size="mini" @click="cancelSc">取消</el-button>
                <el-button type="primary" size="mini" @click="addSc">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import store from "@/utils/store2.js";
export default {
    name: 'AddCollectionPanel',
    data() {
        return {
            scVal: ''
        }
    },
    methods: {
        addSc() {
            if (this.scVal == "") {
                this.$message("请输入收藏点名称");
            } else {
                this.scNewJm = false;
                // æ­¤å¤„执行收藏操作
                // èŽ·å–当前位置信息
                let posi = sgworld.Viewer.camera.position;
                let pointsInterest = {
                    destination: posi,
                    orientation: {
                        heading: Viewer.camera.heading,
                        pitch: Viewer.camera.pitch,
                        roll: Viewer.camera.roll,
                    },
                };
                // æ·»åŠ æ”¶è—ç‚¹åç§°å’Œä½ç½®ä¿¡æ¯åˆ°ä¸´æ—¶å¯¹è±¡ï¼Œåˆ°ä½ç½®æ”¶è—åˆ—表中
                let temObj = {};
                temObj.name = this.scVal;
                // å¯¹è±¡å…‹éš†
                temObj.position = JSON.parse(JSON.stringify(pointsInterest));
                // this.dataSc.push(temObj);
                if (window.locations == "" || window.locations == undefined) {
                    window.locations = [];
                }
                // æŠŠä½ç½®ä¿¡æ¯æ·»åŠ åˆ°ç¼“存中
                window.setLocations([...window.locations, temObj])
                //window.setLocations(this.dataSc);

                // ä»Žç¼“存中取出当前所有位置信息
                //this.dataSc = window.locations;

                // æ·»åŠ è¿‡ä¹‹åŽæŠŠä½ç½®ç‚¹åç§°ç½®ä¸ºç©º
                this.scVal = "";
                this.$message({
                    message: "已收藏，请到菜单>位置>收藏中查看",
                    duration: 1500,
                    type: "success",
                });
                this.back();
            }
        },
        cancelSc() {
            this.back();
        },
        back() {
            store.setAddFavoriteShow(false);
        }
    },
}
</script>

<style scoped>
.addCollectionPanel {
    position: absolute;
    width: 100%;
    height: 100%;
    color: black;
    background: white;
    z-index: 3001;
}
</style>

 src/components/sideMenu/addCollectionMenu/main2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,20 @@
<template>
    <div v-if="state.show">
        <addCollectionPanel></addCollectionPanel>
    </div>
</template>

<script>
import store from "@/utils/store2.js";
import addCollectionPanel from "./addCollectionPanel2.vue";
export default {
    components: {
        addCollectionPanel
    },
    data() {
        return {
            state: store.addFavorite
        }
    }
}
</script>

 src/components/sideMenu/collectionMenu/collectionPanel2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,248 @@
<template>
    <div class="collectionPanel">
        <div class="menutop">
            <div class="menuback" @click="back">
                <i class="el-icon-arrow-left"></i><span>返回</span>
            </div>
            <div class="menutitle">位置</div>
        </div>
        <div class="collectionContainer">
            <!-- <el-tabs type="border-card">
                <el-tab-pane label="收藏" v-if="dataSc.length !== 0">
                    <div class="collectionItem" v-for="(item, index) in dataSc" :key="index"
                        @click="goScPoint(item.position)">
                        <i class="el-icon-star-off"></i>
                        {{ item.name }}
                        <span style="float: right; margin-right: 0.2rem" v-on:click.stop="deleteSc(index)"><i
                                class="el-icon-delete"></i></span>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="收藏" v-else>
                    <div class="collectionItem" style="text-align: center">暂无数据！</div>
                </el-tab-pane>
                <el-tab-pane label="定位">
                    <div class="collectionItem" v-for="(item, index) in dataPosition" :key="index" @click="flyTo(item.geo)">
                        <i class="el-icon-location-outline"></i>{{ item.name }}
                    </div>
                </el-tab-pane>
            </el-tabs> -->
            <el-radio-group v-model="selectedType">
                <el-radio-button label="sc">收藏</el-radio-button>
                <el-radio-button label="dw">定位</el-radio-button>
            </el-radio-group>

            <div class="scContainer" v-if="selectedType == 'sc'">
                <div v-if="dataSc.length !== 0">
                    <div class="title"><span>收藏列表</span></div>
                    <div class="collectionItem" v-for="(item, index) in dataSc" :key="index"
                        @click="goScPoint(item.position)">
                        <img src="@/assets/img/collection/sc.png" />
                        <span>{{ item.name }}</span>
                        <span style="float: right; margin-right: 0.2rem" v-on:click.stop="deleteSc(index)"><i
                                class="el-icon-delete"></i></span>
                    </div>
                </div>
                <div class="emptyContainer" v-else>
                    <span>暂无数据！</span>
                    <img src="@/assets/img/collection/empty.png" />
                </div>
            </div>
            <div class="dwContainer" v-else>
                <div class="title"><span>定位列表</span></div>
                <div class="collectionItem" v-for="(item, index) in dataPosition" :key="index" @click="flyTo(item.geo)">
                    <img src="@/assets/img/collection/scdw.png" /><span>{{ item.name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
window.flyPoint = null;
import store from "@/utils/store2.js";
import { createPointMarker,flyToPoint } from '@/utils/map2.js'
export default {
    name: 'CollectionPanel',
    data() {
        return {
            dataSc: [],//收藏数据
            dataPosition: [
                { name: "亦庄文化园", geo: "POINT(116.497869 39.813206)" },
                { name: "北京经开壹中心", geo: "POINT(116.562533 39.78587)" },
                { name: "汇通大厦", geo: "POINT(116.508368 39.79346)" },
            ],//定位数据
            selectedType: 'sc'
        }
    },
    mounted() {
        this.dataSc = window.locations || [];
    },
    methods: {
        goScPoint(position) {
            store.setLocationCollectionShow(false);
            sgworld.Viewer.camera.flyTo({
                destination: position.destination,
                duration: 3,
                maximumHeight: 20000,
                pitchAdjustHeight: 1500,
                orientation: {
                    heading: position.orientation.heading,
                    pitch: position.orientation.pitch,
                    roll: position.orientation.roll,
                },
            });
        },
        flyTo(geo) {
            store.setLocationCollectionShow(false);
            let arr = geo.substring(6, geo.length - 1).split(' ');
            let coords = [Number(arr[0]), Number(arr[1])]
            flyToPoint(coords)
            let layer = createPointMarker(coords, null);
            window.map.addLayer(layer)


            // let degrees = this.getPosition(geo);
            // flyPoint && Viewer.entities.remove(flyPoint);
            // sgworld.Navigate.flyToPointsInterest({
            //     destination: Cesium.Cartesian3.fromDegrees(
            //         degrees[0],
            //         degrees[1],
            //         3000
            //     ),
            // });
            // flyPoint = Viewer.entities.add({
            //     position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
            //     billboard: {
            //         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            //         scale: 1,
            //         image: window.SmartEarthRootUrl + "/Workers/image/mark.png",
            //         heightReference: 1,
            //         disableDepthTestDistance: Number.POSITIVE_INFINITY,
            //     },
            // });
        },
        deleteSc(index) {
            this.$confirm("删除该收藏点, æ˜¯å¦ç»§ç»­?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.dataSc.splice(index, 1);
                    // æŠŠä½ç½®ä¿¡æ¯æ·»åŠ åˆ°ç¼“存中
                    window.setLocations(this.dataSc);
                    // ä»Žç¼“存中取出当前所有位置信息
                    this.dataSc = window.locations;
                    this.$message({ message: "删除成功！", duration: 1500, type: "success" });
                })
                .catch(() => {
                    this.$message({ type: "info", duration: 1500, message: "已取消删除" });
                });
        },
        getPosition(geo) {
            let p = geo && geo.replace("POINT(", "").replace(")", "");
            return p.split(" ");
        },
        back() {
            store.setLocationCollectionShow(false);
        }
    },
}
</script>

<style scoped>
.collectionPanel {
    position: absolute;
    color: black;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1001;
}

.collectionContainer {
    margin-top: 0.2rem;
    padding: 0.1rem;
}

.emptyContainer {
    margin-top: 0.2rem;
    text-align: center;
}

.emptyContainer img {
    width: 100%;
}

.scContainer {
    margin-top: 0.2rem;
}

.dwContainer {
    margin-top: 0.2rem;
}

.el-tabs--border-card /deep/ .el-tabs__header {
    background-color: lightgray;
    border-radius: 0.05rem;
}

.el-tabs {
    position: absolute;
    height: 80%;
    width: 95%;
    margin-left: 2.5%;
    border-radius: 0.05rem;
}

.el-tabs /deep/ .el-tabs__nav-wrap {
    border-top-left-radius: 0.05rem;
    border-top-right-radius: 0.05rem;
}

.el-tabs /deep/ .el-tabs__item {
    padding: 0 0.2rem;
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.14rem;
}

.el-tabs /deep/ .el-tabs__content {
    height: 90%;
    overflow: scroll;
}

.title {
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 16px;
    border-bottom: 1px solid #E5E5E6;
}

.title span {
    padding-left: 10px;
}

.collectionItem {
    /* font-size: 0.16rem; */
    /* background-color: rgb(228, 227, 227); */
    /* margin-bottom: 0.1rem; */
    height: 0.4rem;
    line-height: 0.4rem;
    /* border-radius: 0.05rem; */
    padding-left: 0.1rem;
    border-bottom: 1px solid #E5E5E6;
}

.collectionItem img {
    width: 0.16rem;
}

.collectionItem span {
    padding-left: 10px;
}

/deep/ .el-radio-button .el-radio-button__inner {
    width: 184px !important;
}
</style>

 src/components/sideMenu/collectionMenu/main2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,23 @@
<template>
    <div v-if="state.show">
        <collectionPanel></collectionPanel>
    </div>
</template>

<script>
import store from "@/utils/store2.js";
import collectionPanel from "./collectionPanel2.vue";
export default{
    components:{
        collectionPanel
    },
    data(){
        return{
            state:store.locationCollection
        }
    }
}
</script>

<style>
</style>

 src/components/viewer2.vue

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

    <div id="ponitPanel">
      <div class="title">点位详情</div>
      <div class="content">

      </div>

    </div>

    <!-- é¡µé¢æ ‡é¢˜ -->
    <div class="titleBg">
      <img src="@/assets/img/title/title.png" />
@@ -52,11 +60,12 @@
    <!-- åœŸåœ°ç®¡ç†å¼¹çª— -->
    <my-land-admin-info></my-land-admin-info>
    <my-slider></my-slider>
    <my-poplayer></my-poplayer>
  </div>
</template>
<script>
import store from "@/utils/store2.js";

import { setClick } from '@/utils/map2.js'
import _GLOBAL from "@/assets/GLOBAL2";
import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom2.vue";
@@ -66,9 +75,9 @@
import NavigationBar from "./rightNavigation/NavigationBar2.vue";
import layertree from "@/components/rightMenu/layerTree2.vue";
import settingPanel from "./sideMenu/settingMenu/main.vue";
import collectionPanel from "./sideMenu/collectionMenu/main.vue";
import collectionPanel from "./sideMenu/collectionMenu/main2.vue";
import directionPanel from "./sideMenu/directionMenu/main.vue";
import addCollectionPanel from "./sideMenu/addCollectionMenu/main.vue";
import addCollectionPanel from "./sideMenu/addCollectionMenu/main2.vue";
import statisticsPanel from "./sideMenu/statisticsMenu/main.vue";
import manholePanel from "./sideMenu/manholeStatistics/main.vue";
import videoPanel from "./sideMenu/videoStatistics/main.vue";
@@ -77,6 +86,7 @@
import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
import poplayer from "./poplayer/main.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
import Axios from "axios";

@@ -110,6 +120,7 @@
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
    "my-poplayer": poplayer
  },
  data() {
    return {
@@ -249,7 +260,7 @@
      });

      window.map = map;

      setClick(true)
      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);

@@ -320,16 +331,16 @@
          // console.log("双击");
          // Viewer.camera.zoomIn();
          // console.log(window.clickPOI);
          let p = sgworld.Navigate.getDegrees();
          // 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,
          });
          // Viewer.camera.flyTo({
          //   destination: Cesium.Cartesian3.fromDegrees(
          //     window.clickPOI.lon,
          //     window.clickPOI.lat,
          //     p.height / 1.8
          //   ),
          //   duration: 1.0,
          // });
        }
        this.count = 0;
      }, 300);
@@ -381,6 +392,7 @@
  height: 100%;
  background: black;
  position: absolute !important;
  z-index: 0;
}

.titleBg {
@@ -404,13 +416,34 @@
.bottomLeft {
  display: none;
}

.colseBtn {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  left: 0.2rem;
}

.colseBtn img {
  width: 30px;
}

#ponitPanel {
  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;
  box-sizing: border-box;
  font-size: 16px;
  pointer-events: all;
  position: absolute;
  bottom: 12px;
  left: -50px;
}


</style>

 src/utils/map2.js

@@ -1,3 +1,10 @@
import { Feature } from "ol";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from "ol/style";
import { Point, LineString } from "ol/geom";
import Overlay from 'ol/Overlay.js';
import { unByKey } from "ol/Observable.js"; //移除事件
import Vue from 'vue';
import axios from "axios";
import _GLOBAL from '@/assets/GLOBAL2';
@@ -6,6 +13,7 @@
import { Message } from 'element-ui';
let tdglLine, qiyexinxi, qysl, ydbm, ydlx, cyfx, crzt, ydmj, crnx, crnf, rjl, jzxg, jzmd;
let objdata;
var clickEvent;

window.tdglLine = tdglLine
let PoiLayerConstructor = Vue.extend(poiLayer);
@@ -2191,3 +2199,120 @@
        })
    }
}



//openlayer åˆ›å»ºç‚¹ä½
export function createPointMarker(position, obj) {
    let startFeature = new Feature({
        geometry: new Point(position),
    });
    startFeature.setProperties({
        desc: obj,
    });
    let MarkerLayer = new VectorLayer({
        id: 'LocationPoint',
        name: '标记点',
        source: new VectorSource({
            features: [startFeature],
        }),
        style: new Style({
            image: new Icon({
                src: require('@/assets/img/collection/scdw.png'),
                anchorOrigin: "top-left",
                anchorXUnits: "fraction",
                anchorYUnits: "fraction",
                offsetOrigin: "bottom-right",
                scale: 0.6,
                opacity: 1,
            })
        }),
        zIndex: 1099,
    })
    return MarkerLayer;
}

//openlayer åœ°å›¾ç‚¹å‡»äº‹ä»¶
export function setClick(state) {
    let ponitPanel = document.getElementById('ponitPanel');
    let overlay = new Overlay({
        element: ponitPanel,
        autoPan: {
            animation: {
                duration: 250,
            },
        },
    });
    window.map.addOverlay(overlay);

    // let _clickCallback = callback;
    function handleClick(e) {
        window.map.forEachFeatureAtPixel(e.pixel, function (feature) {
            // console.log(feature, '111111')
            if (feature && feature.values_.desc) {
                let obj = feature.values_.desc
                objdata = {
                    POITYPE: "POINT",
                    name: obj.name,
                    address: obj.address,
                    lon: obj.lng,
                    lat: obj.lat
                }


                ponitPanel.innerHTML = `
                       <div class="ponitPanel-name">
                         <span>名称：</span>
                         <span>${objdata.name}</span>
                       </div>
                     <div class="ponitPanel-value"> 
                        <span>地址：</span>
                       <span>${objdata.address}</span>
                    </div>`
                overlay.setPosition(e.coordinate);

                // store.setPoplayerShowAction(true);
                // store.setPoplayerListAction(objdata);
                // if (window.instance) {
                //     window.instance.$destroy();
                // }
                // window.instance = new PoiLayerConstructor({
                //     data: {
                //         list: objdata
                //     }
                // });
                // window.instance.$mount();
            }
        });
    }
    if (state) {
        clickEvent = window.map.on('click', handleClick);
    } else {
        unByKey(clickEvent)
        clickEvent = null
    }
}


export function flyToPoint(posisitons) {
    let zoom = window.map.getView().getZoom();
    if (zoom >= 16) {
        zoom = 12
    }
    let duration = 2000;
    window.map.getView().animate({
        center: posisitons,
    })
    window.map.getView().animate(
        //动画开始时
        {
            zoom: zoom > 16 ? zoom - 0.01 : zoom + 0.01,
            duration: duration / 2,
        },
        //动画结束时
        {
            zoom: zoom >= 16 ? 16 : zoom + 4,
            duration: duration / 2,
        }
    );
}