From 5964bd44f4e28a46fb6f15bd2b5205867b8ea86b Mon Sep 17 00:00:00 2001
From: 少年 <1392120328@qq.com>
Date: 星期二, 06 二月 2024 15:37:46 +0800
Subject: [PATCH] 11
---
src/components/viewer2.vue | 63 +++-
src/components/sideMenu/addCollectionMenu/main2.vue | 20 +
src/components/leftMenu/sousuo2.vue | 222 +++++++--------
src/components/sideMenu/collectionMenu/collectionPanel2.vue | 248 +++++++++++++++++
src/components/sideMenu/collectionMenu/main2.vue | 23 +
src/components/rightNavigation/NavigationBar2.vue | 1
src/components/sideMenu/addCollectionMenu/addCollectionPanel2.vue | 90 ++++++
src/utils/map2.js | 127 +++++++++
8 files changed, 659 insertions(+), 135 deletions(-)
diff --git a/src/components/leftMenu/sousuo2.vue b/src/components/leftMenu/sousuo2.vue
index 9200167..f8d90fe 100644
--- a/src/components/leftMenu/sousuo2.vue
+++ b/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;
diff --git a/src/components/rightNavigation/NavigationBar2.vue b/src/components/rightNavigation/NavigationBar2.vue
index 386ddf7..f76d9a6 100644
--- a/src/components/rightNavigation/NavigationBar2.vue
+++ b/src/components/rightNavigation/NavigationBar2.vue
@@ -109,7 +109,6 @@
// 鐐瑰嚮鍙充笂瑙掕彍鍗曢」
handleMenuClick(attr) {
- debugger;
console.log('鐐瑰嚮鍙充笂瑙掕彍鍗曢」');
//娓呴櫎鎼滅储鐐�
flyPoint && Viewer.entities.remove(flyPoint);
diff --git a/src/components/sideMenu/addCollectionMenu/addCollectionPanel2.vue b/src/components/sideMenu/addCollectionMenu/addCollectionPanel2.vue
new file mode 100644
index 0000000..da23fb5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/sideMenu/addCollectionMenu/main2.vue b/src/components/sideMenu/addCollectionMenu/main2.vue
new file mode 100644
index 0000000..49ef2a4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/sideMenu/collectionMenu/collectionPanel2.vue b/src/components/sideMenu/collectionMenu/collectionPanel2.vue
new file mode 100644
index 0000000..9a764cb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/sideMenu/collectionMenu/main2.vue b/src/components/sideMenu/collectionMenu/main2.vue
new file mode 100644
index 0000000..d127f05
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/viewer2.vue b/src/components/viewer2.vue
index 158d9f6..24b7784 100644
--- a/src/components/viewer2.vue
+++ b/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 {
@@ -132,7 +143,7 @@
state: store.history,
};
},
- created() {},
+ created() { },
mounted() {
this.$nextTick(function () {
console.log("openlayer init");
@@ -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);
@@ -366,7 +377,7 @@
console.log(window.gisBaseUrl);
Axios.get(
window.gisBaseUrl +
- "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�"
+ "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�"
).then((res) => {
console.log(res);
});
@@ -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>
diff --git a/src/utils/map2.js b/src/utils/map2.js
index d9bef5e..977fba4 100644
--- a/src/utils/map2.js
+++ b/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);
@@ -882,7 +890,7 @@
//鍔犺浇涓夌淮鍥惧眰
export function loadLayer(treeNode) {
- console.log('loadLayer',treeNode);
+ console.log('loadLayer', treeNode);
let layer;
switch (treeNode.sourceType) {
case "tms":
@@ -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,
+ }
+ );
+}
\ No newline at end of file
--
Gitblit v1.9.3