Merge branch 'master' of http://106.120.22.35:48888/r/PM20221203225_MobileWeb
| | |
| | | #cesiumTipInfo { |
| | | display: none !important; |
| | | } |
| | | .ol-zoom-in{ |
| | | display: none !important; |
| | | } |
| | | .ol-zoom-out{ |
| | | display: none !important; |
| | | } |
| | | </style> |
| | | |
| | | <body> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="landAdmin"> |
| | | <transition name="el-zoom-in-bottom"> |
| | | <div class="Poplayer" v-if="showlandInfo"> |
| | | <div class="close" @click.stop="closehandle"></div> |
| | | <div class="title">å°å详æ
</div> |
| | | <div class="content"> |
| | | <div class="con-item" v-for="(item, index) in KEY" :key="index"> |
| | | <span class="name">{{ index }}ï¼</span> |
| | | <span class="value">{{ state.info[item] }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </transition> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import store from "@/utils/store2"; |
| | | import keys from "@/utils/poiKeys"; |
| | | export default { |
| | | name: "landAdmin", |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | state: store.tdglInfo, |
| | | KEY: {}, |
| | | showlandInfo: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | if (this.list) { |
| | | this.state.info = this.list; |
| | | } |
| | | this.KEY = keys[this.state.info.POITYPE]; |
| | | }, |
| | | watch: { |
| | | "state.info": function (val) { |
| | | console.log("state.info"); |
| | | this.KEY = keys[val.POITYPE]; |
| | | }, |
| | | "state.show": function (val) { |
| | | console.log("state.show"); |
| | | this.showlandInfo = val; |
| | | }, |
| | | }, |
| | | methods: { |
| | | closehandle() { |
| | | store.setTdlgInfo({}); |
| | | divPoint3 && divPoint3.deleteObject(); |
| | | store.setTdglShow(false); |
| | | if (window.tdglLine) { |
| | | window.map.removeLayer(window.tdglLine); |
| | | window.tdglLine = null; |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | <style scoped> |
| | | .landAdmin { |
| | | width: 100%; |
| | | position: absolute; |
| | | bottom: 0px; |
| | | align-items: center; |
| | | /* background: white; */ |
| | | z-index: 1000; |
| | | } |
| | | .Poplayer { |
| | | /* min-width: 350px; */ |
| | | min-height: 180px; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | background-image: url("./img/bg.png"); |
| | | background-color: #0b2c3f; |
| | | |
| | | border-radius: 10px; |
| | | z-index: 999; |
| | | color: #fff; |
| | | /* padding: 20px; */ |
| | | padding: 10px 5px 10px 5px; |
| | | box-sizing: border-box; |
| | | font-size: 16px; |
| | | pointer-events: all; |
| | | } |
| | | |
| | | .title { |
| | | text-align: center; |
| | | font-size: 20px; |
| | | font-weight: 700; |
| | | letter-spacing: 4px; |
| | | padding-left: 26px; |
| | | } |
| | | |
| | | /* .title { |
| | | display: none; |
| | | width: 100%; |
| | | height: 30px; |
| | | line-height: 30px; |
| | | padding-left: 20px; |
| | | margin-top: 10px; |
| | | } */ |
| | | |
| | | .close { |
| | | pointer-events: all; |
| | | width: 28px; |
| | | height: 28px; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | background-image: url("./img/close.png"); |
| | | float: right; |
| | | margin-top: 8px; |
| | | margin-right: 5px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .content { |
| | | width: 100%; |
| | | margin: auto; |
| | | } |
| | | |
| | | .con-item { |
| | | width: 90%; |
| | | /* overflow: hidden; */ |
| | | margin-left: 5%; |
| | | margin-bottom: 7px; |
| | | /* margin-right: 20px; */ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .name { |
| | | width: 30%; |
| | | /* float: left; */ |
| | | } |
| | | |
| | | .value { |
| | | width: 70%; |
| | | /* max-width: 400px; */ |
| | | /* float: left; */ |
| | | color: aqua; |
| | | } |
| | | </style> |
| | | |
| | |
| | | this.curFuncIndex = index; |
| | | switch (index) { |
| | | case 0: |
| | | if (window.tdgllayer) { |
| | | window.map.removeLayer(window.tdgllayer); |
| | | store.setSliderShow(false); |
| | | window.tdgllayer = null; |
| | | window.map.removeLayer(window.tdgllayer); |
| | | return; |
| | | } |
| | | store.setSliderShow(true); |
| | | // window.tdglLayer = sgworld.Creator.createImageryProvider( |
| | | // layers[8].name, |
| | | // "tms", |
| | | // { |
| | | // id: layers[8].children[0].id, |
| | | // url: layers[8].children[0].urls, |
| | | // fileExtension: layers[8].children[0].img || "png", |
| | | // enablePickFeatures: false, |
| | | // level: layers[8].children[0].Level, |
| | | // minimumLevel: layers[8].children[0].minimumLevel, |
| | | // maximumLevel: layers[8].children[0].maximumLevel, |
| | | // tilingScheme: |
| | | // layers[8].children[0].tileType === "Geo" |
| | | // ? new Cesium.GeographicTilingScheme() |
| | | // : new Cesium.WebMercatorTilingScheme(), |
| | | // // alpha: layers[8].children[0].alpha, |
| | | // alpha: this.alpha, |
| | | // }, |
| | | // "0", |
| | | // layers[8].children[0].zIndex, |
| | | // true, |
| | | // "" |
| | | // ); |
| | | |
| | | // console.log("gisserver-tms"); |
| | | // var url = layers[8].children[0].urls; |
| | | // var projection = getProjection("EPSG:4326"); |
| | | // var tileGrid = createXYZ({ |
| | | // extent: projection.getExtent(), |
| | | // }); |
| | | // var source = new XYZ({ |
| | | // projection: projection, |
| | | // tileGrid: tileGrid, |
| | | // tileUrlFunction: function (tileCoord, pixelRatio, proj) { |
| | | // return ( |
| | | // url + |
| | | // (tileCoord[0] - 1) + |
| | | // "/" + |
| | | // tileCoord[1] + |
| | | // "/" + |
| | | // (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + |
| | | // ".jpeg" |
| | | // ); |
| | | // }, |
| | | // }); |
| | | // window.tdglLayer = new Tile({ |
| | | // source: source, |
| | | // }); |
| | | // window.map.addLayer(window.tdglLayer); |
| | | var url = layers[8].children[0].urls; |
| | | //"https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/"; |
| | | |
| | | // var url = |
| | | // "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/"; |
| | | |
| | | var tmslayer = new ol.layer.Tile({ |
| | | window.map.removeLayer(window.tdgllayer); |
| | | window.tdgllayer = new ol.layer.Tile({ |
| | | source: new ol.source.XYZ({ |
| | | projection: projection, |
| | | projection: "EPSG:4326", |
| | | tileGrid: ol.tilegrid.createXYZ({ |
| | | extent: [50.731, -90, 180, 70.0478], |
| | | extent: [50.582, -90, 180, 70.1558], |
| | | }), |
| | | tileUrlFunction: function (tileCoord, pixelRatio, proj) { |
| | | // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg'; |
| | | return ( |
| | | url + |
| | | "/" + |
| | | (tileCoord[0] - 1) + |
| | | "/" + |
| | | tileCoord[1] + |
| | |
| | | }, |
| | | }), |
| | | }); |
| | | window.map.addLayer(tmslayer); |
| | | window.map.addLayer(window.tdgllayer); |
| | | //æ¾ç¤ºæ»å¨æ¡ |
| | | store.setTdglFlag(true); |
| | | break; |
| | |
| | | store.setTdglFlag(false); |
| | | if (window.tdglLayer) { |
| | | store.setSliderShow(false); |
| | | sgworld.Creator.DeleteObject(window.tdglLayer); |
| | | window.map.removeLayer(window.tdgllayer); |
| | | } |
| | | store.setHistoryShow(true); |
| | | break; |
| | |
| | | immediate: true, //å·æ°å è½½ ç«é©¬è§¦å䏿¬¡handler |
| | | deep: true, // å¯ä»¥æ·±åº¦æ£æµå° obj 对象ç屿§å¼çåå |
| | | }, |
| | | // "state1.alpha": { |
| | | // handler: function (newVal) { |
| | | // this.handleFuncClick(0); |
| | | // }, |
| | | // deep: true, |
| | | // }, |
| | | }, |
| | | computed: { |
| | | alpha() { |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="sliders"> |
| | | <el-slider |
| | | v-model="value" |
| | | :max="100" |
| | | :min="0" |
| | | vertical |
| | | height="200px" |
| | | @input="changeSlider" |
| | | > |
| | | </el-slider> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | value: 100, |
| | | }; |
| | | }, |
| | | methods: { |
| | | changeSlider(val) { |
| | | // window.tdglLayer.item.alpha = val / 100; |
| | | window.tdgllayer&&window.tdgllayer.state&&window.tdgllayer.state_.layer.setOpacity(val / 100); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .sliders { |
| | | position: absolute; |
| | | top: 2rem; |
| | | left: 0.15rem; |
| | | z-index: 88; |
| | | } |
| | | .el-tooltip__popper { |
| | | z-index: 88 !important; |
| | | } |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div v-if="state.sliderShow"> |
| | | <myAlpha></myAlpha> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import myAlpha from './alpha2.vue'; |
| | | import store from "@/utils/store2.js"; |
| | | export default { |
| | | components: { |
| | | myAlpha |
| | | }, |
| | | data() { |
| | | return { |
| | | state: store.tdglInfo, |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | </template> |
| | | <script> |
| | | import store from "@/utils/store2.js"; |
| | | import { setClick } from '@/utils/map2.js' |
| | | import { setClick,leftClick } from '@/utils/map2.js' |
| | | import _GLOBAL from "@/assets/GLOBAL2"; |
| | | import { leftClick, loadLayer } from "@/utils/map.js"; |
| | | // import { leftClick, loadLayer } from "@/utils/map.js"; |
| | | import leftBottom from "@/components/leftMenu/bottom2.vue"; |
| | | import rightBottom from "@/components/rightMenu/bottom2.vue"; |
| | | import sousuo from "@/components/leftMenu/sousuo2.vue"; |
| | |
| | | import roamPanel from "./sideMenu/roamPanel/main.vue"; |
| | | import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue"; |
| | | import history from "./poplayer/history.vue"; |
| | | import landAdminInfo from "./poplayer/landAdmin.vue"; |
| | | import landAdminInfo from "./poplayer/landAdmin2.vue"; |
| | | import poplayer from "./poplayer/main2.vue"; |
| | | import sliderAlpha from "./sideMenu/sliderAlpha/main.vue"; |
| | | import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue"; |
| | | import Axios from "axios"; |
| | | |
| | | // import Map from "ol/Map.js"; |
| | |
| | | |
| | | window.map = map; |
| | | setClick(true) |
| | | leftClick() |
| | | // var url = |
| | | // "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/"; |
| | | |
| | |
| | | |
| | | //openlayer å°å¾ç¹å»äºä»¶ |
| | | export function setClick(state) { |
| | | console.log('setClick'); |
| | | let ponitPanel = document.getElementById('ponitPanel'); |
| | | let overlay = new ol.Overlay({ |
| | | element: ponitPanel, |
| | |
| | | }); |
| | | window.map.addOverlay(overlay); |
| | | function handleClick(e) { |
| | | console.log(e.coordinate); |
| | | // åå°ç®¡ç |
| | | if (store.tdglInfo.flag) { |
| | | axios |
| | | .get( |
| | | // "http://10.10.4.115:8022/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=" + |
| | | 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=" + |
| | | e.coordinate[0] + |
| | | "&lat=" + |
| | | e.coordinate[1] + |
| | | "&geom=true&requesttype=json" |
| | | ).then(response => { |
| | | let center = { lon: 0, lat: 0 }; |
| | | if (window.tdglLine) { |
| | | window.map.removeLayer(window.tdglLine); |
| | | window.tdglLine = null; |
| | | } |
| | | var format = new ol.format.WKT(); // å建ä¸ä¸ª WKT è§£æå¨ |
| | | var feature = format.readFeature(response.data.geometry); // è§£æ WKT å¹¶çæè¦ç´ 对象 |
| | | |
| | | // å建ä¸ä¸ªè¦ç´ å¾å± |
| | | window.tdglLine = new ol.layer.Vector({ |
| | | source: new ol.source.Vector({ |
| | | features: [feature] // å°è¦ç´ 对象å å
¥å°å¾å±æºä¸ |
| | | }) |
| | | }); |
| | | window.map.addLayer(window.tdglLine) |
| | | |
| | | |
| | | axios |
| | | .get( |
| | | // "http://10.10.4.115:8022//poisearch/guihuacon/getInfo?ydbm=" + |
| | | window.gisBaseUrl + "yzxncsApi/poisearch/guihuacon/getInfo?ydbm=" + |
| | | response.data.NO |
| | | ) |
| | | .then( |
| | | info => { |
| | | let data = info.data.data; |
| | | if (data.yongdishuju === null) { |
| | | objdata = { |
| | | POITYPE: "NOTDGL", |
| | | zwxx: "ææ ä¿¡æ¯", |
| | | lon: window.clickPOI.lon, |
| | | lat: window.clickPOI.lat, |
| | | } |
| | | } else { |
| | | qiyexinxi = info.data.data.qiyexinxi; |
| | | qysl = data.qiyexinxi.length; |
| | | if (qysl > 0) { |
| | | ydbm = data.qiyexinxi[0]["å°åç¼å·"]; |
| | | } else { |
| | | ydbm = data.churangxinxi["ydbh"]; |
| | | } |
| | | try { |
| | | ydlx = data.yongdishuju["ydlxmc"]; |
| | | } catch (e) { } |
| | | try { |
| | | cyfx = data.yongdishuju["cyfx"]; |
| | | } catch (e) { } |
| | | try { |
| | | // this.crzt = response.data["ZT"]; |
| | | switch (response.data["ZT"]) { |
| | | case 3: |
| | | crzt = "å·²åºè®©"; |
| | | break; |
| | | case 4: |
| | | crzt = "æªåºè®©"; |
| | | break; |
| | | } |
| | | } catch (e) { } |
| | | try { |
| | | ydmj = parseFloat( |
| | | "" + data.yongdishuju["ydmj"] |
| | | ).toFixed(0); |
| | | } catch (e) { } |
| | | try { |
| | | crnx = data.churangxinxi["crnx"]; |
| | | } catch (e) { } |
| | | try { |
| | | crnf = data.churangxinxi["crnf"]; |
| | | } catch (e) { } |
| | | try { |
| | | rjl = data.yongdishuju["rjl"]; |
| | | } catch (e) { } |
| | | try { |
| | | jzxg = data.yongdishuju["jzxg"]; |
| | | } catch (e) { } |
| | | try { |
| | | jzmd = data.yongdishuju["jzmd"]; |
| | | } catch (e) { } |
| | | objdata = { |
| | | POITYPE: "TDGL", |
| | | ydbm, |
| | | ydlx, |
| | | cyfx, |
| | | crzt, |
| | | ydmj, |
| | | ydbm, |
| | | crnx, |
| | | crnf, |
| | | rjl, |
| | | jzxg, |
| | | jzmd, |
| | | lon:e.coordinate[0], |
| | | lat: e.coordinate[1], |
| | | } |
| | | } |
| | | |
| | | store.setTdglShow(false); |
| | | store.setTdlgInfo({}); |
| | | store.setTdglShow(true); |
| | | store.setTdlgInfo(objdata); |
| | | } |
| | | ); |
| | | |
| | | }) |
| | | return; |
| | | } |
| | | |
| | | |
| | | window.map.forEachFeatureAtPixel(e.pixel, function (feature) { |
| | | if (feature && feature.values_.desc) { |
| | | ponitPanel.style.display = 'block' |