| | |
| | | <div id="openlayerContainer" @click="clicktoclose"></div> |
| | | |
| | | <!-- 页面标题 --> |
| | | <div class="titleBg"> |
| | | <!-- <div class="titleBg"> |
| | | <img src="@/assets/img/title/title.png" /> |
| | | </div> |
| | | </div> --> |
| | | <!-- 历史影像 --> |
| | | <my-history v-if="state.show"></my-history> |
| | | <!-- 历史影像关闭按钮 --> |
| | |
| | | <!-- 原左下菜单 --> |
| | | <!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> --> |
| | | <!-- 左下快捷区域(复位、指北等) --> |
| | | <my-left-bottom :test="childrendata"></my-left-bottom> |
| | | <!-- <my-left-bottom :test="childrendata"></my-left-bottom> --> |
| | | <!-- 右下快捷区域(放大缩小) --> |
| | | <my-right-bottom :test="childrendata"></my-right-bottom> |
| | | |
| | |
| | | <!-- 位置面板 --> |
| | | <my-collection-panel></my-collection-panel> |
| | | <!-- 指北针面板 --> |
| | | <my-direction-panel></my-direction-panel> |
| | | <!-- <my-direction-panel></my-direction-panel> --> |
| | | <!-- 新增收藏面板 --> |
| | | <my-add-collection-panel></my-add-collection-panel> |
| | | <!-- 窨井、摄像头统计面板 --> |
| | |
| | | </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"; |
| | |
| | | addHxLayer, |
| | | addYzLayer, |
| | | loadBaseMap, |
| | | getCurrentPosition, |
| | | loadGeoMap, |
| | | listenDirection, |
| | | getCurrentPosition |
| | | } from "@/utils/tool"; |
| | | // import Map from "ol/Map.js"; |
| | | // import TileLayer from "ol/layer/Tile.js"; |
| | |
| | | state: store.history, |
| | | }; |
| | | }, |
| | | created() {}, |
| | | created() { }, |
| | | mounted() { |
| | | this.$nextTick(function () { |
| | | ol.Map.prototype.getLayerByName = function (name) { |
| | |
| | | |
| | | const TDTKey = "f234b950740b8c2e0d9959a51c169d21"; |
| | | const tiandituUrl = "http://t0.tianditu.gov.cn"; |
| | | let options = { proj: "EPSG:4326", layer: "img", matrixSets: "c" }; |
| | | let options = { proj: "EPSG:3857", layer: "img", matrixSets: "c" }; |
| | | let _proj = options.proj; |
| | | let _layer = options.layer; |
| | | let _key = TDTKey; |
| | |
| | | let origin = projectionExtent |
| | | ? ol.extent.getTopLeft(projectionExtent) |
| | | : [-180, 90]; |
| | | let fromLonLat = ol.proj.getTransform("EPSG:4326", projection); |
| | | let fromLonLat = ol.proj.getTransform("EPSG:3857", projection); |
| | | let width = projectionExtent |
| | | ? ol.extent.getWidth(projectionExtent) |
| | | : ol.extent.getWidth( |
| | | ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat) |
| | | ); |
| | | ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat) |
| | | ); |
| | | |
| | | let resolutions = []; |
| | | let matrixIds = []; |
| | |
| | | layers: layers, |
| | | target: "openlayerContainer", |
| | | view: new ol.View({ |
| | | center: [116.505348, 39.795592], |
| | | projection: "EPSG:4326", |
| | | zoom: 12, |
| | | minZoom: 9.5, |
| | | center: ol.proj.fromLonLat([116.505348, 39.795592]), |
| | | projection: "EPSG:3857", |
| | | zoom: 11.5, |
| | | minZoom: 7, |
| | | maxZoom: 19.5, |
| | | enableRotation: false, |
| | | // constrainResolution: true, |
| | | smoothResolutionConstraint: false, |
| | | }), |
| | | // events: ["singleclick", "pointermove"], |
| | | }); |
| | | |
| | | window.mapapi = map; |
| | | |
| | | addImageLayer(); |
| | | addAnnotationLayer(); |
| | | // addImageLayer(); |
| | | // addAnnotationLayer(); |
| | | window.mapapi.getView().setZoom(14); |
| | | loadGeoMap(); |
| | | loadBaseMap(); |
| | | addHxLayer(); |
| | | addYzLayer(); |
| | | |
| | | setClick(true); |
| | | touchClick(); |
| | | |
| | | getCurrentPosition(); |
| | | listenDirection(); |
| | | // leftClick() |
| | | |
| | | window.layerOpen = function (name, options) { |
| | |
| | | }, |
| | | 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) { |
| | |
| | | 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); |
| | | }); |