| | |
| | | <el-button> <img src="@/assets/img/left/ztfx/yqfk.png" /> </el-button |
| | | ></el-tooltip> |
| | | </div> |
| | | <div class="specialTool" @click="kuangxuan()"> |
| | | <div class="specialTool" @click="rangeQuery()"> |
| | | <el-tooltip |
| | | class="item" |
| | | effect="dark" |
| | |
| | | width: 111%; |
| | | margin-left: -15px; |
| | | } |
| | | |
| | | .el-button:focus, |
| | | .el-button:hover { |
| | | background: transparent; |
| | | } |
| | | |
| | | .special { |
| | | position: absolute; |
| | | left: 65px; |
| | |
| | | background-color: rgba(14, 50, 143, 0.5); |
| | | width: 350px; |
| | | } |
| | | |
| | | .specialTools { |
| | | margin-left: 20px; |
| | | } |
| | | |
| | | .specialTool { |
| | | border: 1px solid #999; |
| | | border-radius: 5px; |
| | |
| | | height: 40px; |
| | | margin: 5px; |
| | | } |
| | | |
| | | .specialTool img { |
| | | margin: 4px; |
| | | } |
| | | |
| | | .specialTools::-webkit-scrollbar { |
| | | /*滚动条整体样式*/ |
| | | width: 5px; |
| | |
| | | border-radius: 0; |
| | | background: rgba(218, 218, 218, 0.1); |
| | | } |
| | | |
| | | .specialTool:hover { |
| | | background: rgba(0, 168, 255, 0.16); |
| | | } |
| | |
| | | .tool-title { |
| | | margin: 1px 10px; |
| | | } |
| | | |
| | | .tool-title label { |
| | | vertical-align: top; |
| | | } |
| | | |
| | | .special label { |
| | | margin-left: 10px; |
| | | font-size: 17px; |
| | |
| | | /* color: #3d3d3d; */ |
| | | color: white; |
| | | } |
| | | |
| | | .el-button { |
| | | padding: 0 !important; |
| | | font-size: 24px; |
| | |
| | | display: block; |
| | | background: rgba(0, 0, 0, 0); |
| | | } |
| | | |
| | | .el-button label { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .closeTool { |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: 0; |
| | | } |
| | | |
| | | .active { |
| | | background: rgba(0, 168, 255, 0.16); |
| | | } |
| | | </style> |
| | | |
| | | <style> |
| | | #pointInfoBox { |
| | | /* width: 350px; */ |
| | | padding: 20px; |
| | | text-align: left; |
| | | background-image: url("~@/assets/img/new/listbg.png"); |
| | | /* border: 5px #08235f solid; */ |
| | | /* border-radius: 7px; */ |
| | | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5); |
| | | color: #fff; |
| | | } |
| | | </style> |
| | | <script> |
| | | import axios from "axios"; |
| | | import { mapState, mapMutations } from "vuex"; |
| | | import Bus from "../../tools/Bus"; |
| | | import { roman } from "../../../assets/json/index.js"; |
| | | import URLInCode from "@/assets/js/urlInCode"; |
| | | import keyName from "@/utils/poiKeys"; |
| | | import LayerField from "../../../../static/NameConf"; |
| | | let handler; |
| | | let pickFeature; |
| | | let tooltipHTML; |
| | | let divPoint1; |
| | | let imgUrl; |
| | | let scale; |
| | | window.divPoint1 = null; |
| | | window.pickFeature = null; |
| | | window.imgUrl = null; |
| | | window.scale = null; |
| | | let buildingPolygon; |
| | | let tooltip; |
| | | let lineArr = []; |
| | | let video; |
| | | let video2; |
| | | let video3; |
| | | let video4; |
| | | let promiseS3M; |
| | | //交通图层 |
| | | let panoramaLayer; |
| | |
| | | yqfkHandle() { |
| | | this.setYqfk(!this.yqfk); |
| | | }, |
| | | kuangxuan() { |
| | | rangeQuery() { |
| | | Bus.$emit("showRangeBox", true); |
| | | }, |
| | | tdglHandle() { |
| | |
| | | panorama.open({ |
| | | id: "qjMap", |
| | | closeId: "panoramaClose", |
| | | lng: p.lon, |
| | | lon: p.lon, |
| | | lat: p.lat, |
| | | }); |
| | | |
| | |
| | | } |
| | | }, |
| | | clearSelectObject() { |
| | | if (pickFeature && pickFeature.primitive) { |
| | | pickFeature.primitive.image = imgUrl; |
| | | pickFeature.primitive.scale = scale; |
| | | pickFeature = null; |
| | | if (window.pickFeature && window.pickFeature.primitive) { |
| | | window.pickFeature.primitive.image = imgUrl; |
| | | window.pickFeature.primitive.scale = scale; |
| | | window.pickFeature = null; |
| | | } |
| | | }, |
| | | setCesuimHandle() { |
| | | var that = this; |
| | | |
| | | Bus.$on("clearSelectObject", this.clearSelectObject); |
| | | handler && handler.destroy(); |
| | | handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); |
| | | handler.setInputAction((event) => { |
| | | let nPickFeature = sgworld.Viewer.scene.pick(event.position); |
| | | |
| | | if (Cesium.defined(nPickFeature)) { |
| | | this.resetImg(); |
| | | if (buildingPolygon) { |
| | | sgworld.Creator.DeleteObject(buildingPolygon); |
| | | buildingPolygon = null; |
| | | } |
| | | if (nPickFeature.primitive instanceof Cesium.Billboard) { |
| | | if (nPickFeature.id.length > 0) { |
| | | return; |
| | | } |
| | | this.resetImg(); |
| | | this.resetBorder(); |
| | | pickFeature = nPickFeature; |
| | | // this.resetBorder(); |
| | | window.pickFeature = nPickFeature; |
| | | // console.log(nPickFeature); |
| | | imgUrl = nPickFeature.primitive.image; |
| | | scale = nPickFeature.primitive.scale; |
| | | nPickFeature.primitive.scale = 1; |
| | | nPickFeature.primitive.image = |
| | | window.SmartEarthRootUrl + "Workers/image/point.png"; |
| | | nPickFeature.primitive.scale = 1; |
| | | //点击弹框 |
| | | let obj = {}; |
| | | let lng; |
| | | let lon; |
| | | let lat; |
| | | let isCamera = false; |
| | | if (nPickFeature.id.tag) { |
| | | let properties = nPickFeature.id.properties; |
| | | let propertyNames = nPickFeature.id.properties.propertyNames; |
| | | if (propertyNames.indexOf("监控名") !== -1) { |
| | | isCamera = true; |
| | | obj["JK名称"] = properties["JK名称"]._value; |
| | | obj["JK类型"] = properties["JK类型"]._value; |
| | | obj["功能"] = properties["功能"]._value; |
| | | obj["所在区"] = properties["所在区"]._value; |
| | | obj["JK编号"] = properties["JK编号"]._value; |
| | | // obj["JK类型"] = properties["JK类型"]._value; |
| | | // obj["功能"] = properties["功能"]._value; |
| | | // obj["所在区"] = properties["所在区"]._value; |
| | | // obj["JK编号"] = properties["JK编号"]._value; |
| | | obj["JK内码"] = properties["JK内码"]._value; |
| | | } else { |
| | | propertyNames.forEach((item) => { |
| | |
| | | window.Viewer.scene.globe.ellipsoid.cartesianToCartographic( |
| | | nPickFeature.id.position._value |
| | | ); |
| | | lng = Cesium.Math.toDegrees(cartographic.longitude); |
| | | lon = Cesium.Math.toDegrees(cartographic.longitude); |
| | | lat = Cesium.Math.toDegrees(cartographic.latitude); |
| | | } else { |
| | | obj = nPickFeature.id.attributes; |
| | | lng = nPickFeature.id.positions[0]; |
| | | lon = nPickFeature.id.positions[0]; |
| | | lat = nPickFeature.id.positions[1]; |
| | | } |
| | | |
| | | tooltipHTML = ""; |
| | | // console.log(obj); |
| | | |
| | | for (let i in obj) { |
| | | let value = obj[i]; |
| | | value && (tooltipHTML += `<p>${i}:${value || "无"}</p>`); |
| | | if (divPoint1) { |
| | | divPoint1.deleteObject(); |
| | | } |
| | | if (!isCamera) { |
| | | tooltipHTML = ""; |
| | | //重置LayerField数据 |
| | | for (let item in LayerField) { |
| | | LayerField[item] = 0; |
| | | } |
| | | // 删除字段 |
| | | let { OBJECTID, ID, BZDZ, Latitude, Longtitude, ...userData } = |
| | | obj; |
| | | |
| | | if (tooltip) { |
| | | tooltip.show(false); |
| | | tooltip = null; |
| | | // 判断展示的类型 |
| | | if ( |
| | | userData.hasOwnProperty("部件名称") || |
| | | userData.hasOwnProperty("井编号") |
| | | ) { |
| | | //修改LayerField数据 |
| | | for (let itemName in userData) { |
| | | let CnName = keyName[itemName] || itemName; |
| | | if (LayerField.hasOwnProperty(CnName)) { |
| | | LayerField[CnName] = userData[itemName]; |
| | | if (CnName == "经度" || CnName == "纬度") { |
| | | let str = Number(LayerField[CnName]); |
| | | LayerField[CnName] = str.toFixed(6); |
| | | } |
| | | } |
| | | } |
| | | // 展示LayerField数据 |
| | | for (let item in LayerField) { |
| | | let value = LayerField[item]; |
| | | value && (tooltipHTML += `<p>${item}:${value || "无"}</p>`); |
| | | } |
| | | } else { |
| | | // 直接展示 |
| | | for (let itemName in userData) { |
| | | let value = userData[itemName]; |
| | | let CnName = keyName[itemName] || itemName; |
| | | value && |
| | | (tooltipHTML += `<p>${CnName}:${value || "无"}</p>`); |
| | | console.log(tooltipHTML); |
| | | } |
| | | } |
| | | |
| | | let description = ` |
| | | <div id="pointInfoBox" class="pointInfoBox" style="pointer-events:auto;"> |
| | | <span style="position: absolute; right: 12px; top: 6px;">×</span> |
| | | ${tooltipHTML} |
| | | </div> |
| | | `; |
| | | divPoint1 = sgworld.Creator.createDivPoint( |
| | | "详细信息", |
| | | { |
| | | lon: lon, |
| | | lat: lat, |
| | | height: 50, |
| | | }, |
| | | { |
| | | type: "custom", |
| | | offset: ["c", 50], |
| | | description, |
| | | onclick(data) { |
| | | // sgworld.Creator.DeleteObject(divPoint1); |
| | | divPoint1 && divPoint1.deleteObject(); |
| | | if (window.pickFeature && window.pickFeature.primitive) { |
| | | window.pickFeature.primitive.image = imgUrl; |
| | | window.pickFeature.primitive.scale = scale; |
| | | window.pickFeature = null; |
| | | } |
| | | }, |
| | | } |
| | | ); |
| | | // if (tooltip) { |
| | | // tooltip.show(false); |
| | | // tooltip = null; |
| | | // } |
| | | // tooltip = sgworld.Core.CreateResultTooltip(window.Viewer, { |
| | | // color: "black", |
| | | // addY: -40, |
| | | // far: 200000, |
| | | // closeBtn: true, |
| | | // close: () => { |
| | | // this.resetImg(); |
| | | // }, |
| | | // }); |
| | | |
| | | // let description = `<div style='background: |
| | | // rgba(14, 50, 143, 0.6); |
| | | // border: 1px solid #205fbc; |
| | | // border-radius: 5px; |
| | | // color: #fff; |
| | | // padding: 15px; |
| | | // box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38); |
| | | // '>${tooltipHTML}</div>`; |
| | | |
| | | // tooltip.showAt( |
| | | // Cesium.Cartesian3.fromDegrees(lon, lat, 0), |
| | | // description |
| | | // ); |
| | | } |
| | | |
| | | tooltip = sgworld.Core.CreateResultTooltip(window.Viewer, { |
| | | color: "black", |
| | | addY: -40, |
| | | far: 200000, |
| | | closeBtn: true, |
| | | close: () => { |
| | | this.resetImg(); |
| | | this.resetBorder(); |
| | | }, |
| | | }); |
| | | |
| | | let description = `<div style='background: |
| | | rgba(14, 50, 143, 0.6); |
| | | border: 1px solid #205fbc; |
| | | border-radius: 5px; |
| | | color: #fff; |
| | | padding: 15px; |
| | | box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38); |
| | | '>${tooltipHTML}</div>`; |
| | | |
| | | tooltip.showAt( |
| | | Cesium.Cartesian3.fromDegrees(lng, lat, 0), |
| | | description |
| | | ); |
| | | |
| | | //关闭地块信息弹窗 |
| | | Bus.$emit("closeLandInfoPop", true); |
| | | layuiLayer.close(SmartEarthPopupData.layerProp); |
| | | this.$store.commit("description", obj); |
| | | } else if (nPickFeature.primitive instanceof Cesium.Cesium3DTileset) { |
| | | // let cartographic = |
| | | // window.Viewer.scene.globe.ellipsoid.cartesianToCartographic( |
| | | // nPickFeature.content.tile.boundingSphere.center |
| | | // ); |
| | | // let lon = Cesium.Math.toDegrees(cartographic.longitude); |
| | | // let lat = Cesium.Math.toDegrees(cartographic.latitude); |
| | | let p = sgworld.Navigate.getMouseDegrees(event); |
| | | let lon = p.lon; |
| | | let lat = p.lat; |
| | | |
| | | axios |
| | | .get( |
| | | "http://10.10.4.121:8070/gisserver/wfsserver/yizhuang-building-wfs-1207", |
| | | { |
| | | params: { |
| | | version: "1.3.0", |
| | | request: "GetFeature", |
| | | typename: `亦庄建筑外轮廓4326`, |
| | | propertyname: "*", |
| | | format: "json", |
| | | filter: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><ogc:Intersects><ogc:PropertyName>SAHEP</ogc:PropertyName><gml:Point > <gml:pos>${lon} ${lat}</gml:pos></gml:Point></ogc:Intersects></ogc:Filter>`, |
| | | }, |
| | | } |
| | | ) |
| | | .then((response) => { |
| | | if (response.data.features.length > 0) { |
| | | var geometry = []; |
| | | let POIs = response.data.features[0].geometry.coordinates[0]; |
| | | for (let i = 0; i < POIs.length; i++) { |
| | | geometry.push({ |
| | | x: parseFloat(POIs[i][0]), |
| | | y: parseFloat(POIs[i][1]), |
| | | z: 0, |
| | | }); |
| | | } |
| | | buildingPolygon = sgworld.Creator.createPolygon( |
| | | geometry, |
| | | { |
| | | fillColor: "#00ff0050", |
| | | outlineColor: "#ff0000", |
| | | outlineWidth: 2, |
| | | }, |
| | | 1, |
| | | 0, |
| | | "面" |
| | | ); |
| | | } |
| | | }); |
| | | } |
| | | // else if (nPickFeature.primitive instanceof Cesium.GroundPrimitive) { |
| | | // let wmsLayer = this.$store.state.selectedLayers.filter((item) => { |
| | |
| | | this.$parent.$parent.$parent.isShowSpeAnalyse = false; |
| | | }, |
| | | resetImg() { |
| | | if (pickFeature && pickFeature.primitive) { |
| | | pickFeature.primitive.image = imgUrl; |
| | | pickFeature.primitive.scale = scale; |
| | | pickFeature = null; |
| | | if (window.pickFeature && window.pickFeature.primitive) { |
| | | window.pickFeature.primitive.image = imgUrl; |
| | | window.pickFeature.primitive.scale = scale; |
| | | window.pickFeature = null; |
| | | } |
| | | }, |
| | | resetBorder() { |
| | | lineArr.forEach((item, index) => { |
| | | if (lineArr[index]) { |
| | | sgworld.Creator.DeleteObject(lineArr[index]); |
| | | lineArr[index] = null; |
| | | } |
| | | }); |
| | | }, |
| | | // resetBorder() { |
| | | // lineArr.forEach((item, index) => { |
| | | // if (lineArr[index]) { |
| | | // sgworld.Creator.DeleteObject(lineArr[index]); |
| | | // lineArr[index] = null; |
| | | // } |
| | | // }); |
| | | // }, |
| | | stdsjHandle() { |
| | | window.open( |
| | | "http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3" |
| | |
| | | }); |
| | | }); |
| | | }, |
| | | spjkHandle() { |
| | | if (window.sxtkGeojson) { |
| | | window.sxtkGeojson.deleteObject(); |
| | | window.sxtkGeojson = null; |
| | | window.sxthandler.destroy(); |
| | | //关闭弹窗 |
| | | Bus.$emit("closeRightPop", true); |
| | | layuiLayer.close(SmartEarthPopupData.layerProp); |
| | | return; |
| | | } else { |
| | | Bus.$emit("showSPJK"); |
| | | // this.spjkLoad(); |
| | | } |
| | | }, |
| | | |
| | | handleCommand(command) { |
| | | switch (command) { |
| | | case "qytj": |
| | |
| | | }); |
| | | } |
| | | }, |
| | | read(wkt) { |
| | | var regExes = { |
| | | typeStr: /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/, |
| | | emptyTypeStr: /^\s*(\w+)\s*EMPTY\s*$/, |
| | | spaces: /\s+/, |
| | | parenComma: /\)\s*,\s*\(/, |
| | | doubleParenComma: /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here |
| | | trimParens: /^\s*\(?(.*?)\)?\s*$/, |
| | | }; |
| | | /** |
| | | * Object with properties corresponding to the geometry types. Property values |
| | | * are functions that do the actual parsing. |
| | | * @private |
| | | */ |
| | | var parse$1 = { |
| | | /** |
| | | * Return point geometry given a point WKT fragment. |
| | | * |
| | | * @param {String} str A WKT fragment representing the point. |
| | | * @return {Point} A point geometry. |
| | | * @private |
| | | */ |
| | | point: function point(str) { |
| | | if (str === undefined) { |
| | | return []; |
| | | } |
| | | |
| | | var coords = str.trim().split(regExes.spaces); |
| | | return [Number.parseFloat(coords[0]), Number.parseFloat(coords[1])]; |
| | | }, |
| | | |
| | | /** |
| | | * Return a multipoint geometry given a multipoint WKT fragment. |
| | | * |
| | | * @param {String} str A WKT fragment representing the multipoint. |
| | | * @return {Point} A multipoint feature. |
| | | * @private |
| | | */ |
| | | multipoint: function multipoint(str) { |
| | | var this$1 = this; |
| | | |
| | | if (str === undefined) { |
| | | return []; |
| | | } |
| | | |
| | | var point; |
| | | var points = str.trim().split(","); |
| | | var components = []; |
| | | for (var i = 0, len = points.length; i < len; ++i) { |
| | | point = points[i].replace(regExes.trimParens, "$1"); |
| | | components.push(parse$1.point(point)); |
| | | } |
| | | return components; |
| | | }, |
| | | |
| | | /** |
| | | * Return a linestring geometry given a linestring WKT fragment. |
| | | * |
| | | * @param {String} str A WKT fragment representing the linestring. |
| | | * @return {LineString} A linestring geometry. |
| | | * @private |
| | | */ |
| | | linestring: function linestring(str) { |
| | | if (str === undefined) { |
| | | return []; |
| | | } |
| | | |
| | | var points = str.trim().split(","); |
| | | var components = []; |
| | | var coords; |
| | | for (var i = 0, len = points.length; i < len; ++i) { |
| | | coords = points[i].trim().split(regExes.spaces); |
| | | components.push([ |
| | | Number.parseFloat(coords[0]), |
| | | Number.parseFloat(coords[1]), |
| | | ]); |
| | | } |
| | | return components; |
| | | }, |
| | | |
| | | /** |
| | | * Return a linearring geometry given a linearring WKT fragment. |
| | | * |
| | | * @param {String} str A WKT fragment representing the linearring. |
| | | * @return {LinearRing} A linearring geometry. |
| | | * @private |
| | | */ |
| | | linearring: function linearring(str) { |
| | | if (str === undefined) { |
| | | return []; |
| | | } |
| | | |
| | | var points = str.trim().split(","); |
| | | var components = []; |
| | | var coords; |
| | | for (var i = 0, len = points.length; i < len; ++i) { |
| | | coords = points[i].trim().split(regExes.spaces); |
| | | components.push([ |
| | | Number.parseFloat(coords[0]), |
| | | Number.parseFloat(coords[1]), |
| | | ]); |
| | | } |
| | | return components; |
| | | }, |
| | | |
| | | /** |
| | | * Return a multilinestring geometry given a multilinestring WKT fragment. |
| | | * |
| | | * @param {String} str A WKT fragment representing the multilinestring. |
| | | * @return {MultiLineString} A multilinestring geometry. |
| | | * @private |
| | | */ |
| | | multilinestring: function multilinestring(str) { |
| | | var this$1 = this; |
| | | |
| | | if (str === undefined) { |
| | | return []; |
| | | } |
| | | |
| | | var line; |
| | | var lines = str.trim().split(regExes.parenComma); |
| | | var components = []; |
| | | for (var i = 0, len = lines.length; i < len; ++i) { |
| | | line = lines[i].replace(regExes.trimParens, "$1"); |
| | | components.push(parse$1.linestring(line)); |
| | | } |
| | | return components; |
| | | }, |
| | | |
| | | /** |
| | | * Return a polygon geometry given a polygon WKT fragment. |
| | | * |
| | | * @param {String} str A WKT fragment representing the polygon. |
| | | * @return {Polygon} A polygon geometry. |
| | | * @private |
| | | */ |
| | | polygon: function polygon(str) { |
| | | var this$1 = this; |
| | | |
| | | if (str === undefined) { |
| | | return []; |
| | | } |
| | | |
| | | var ring, linestring, linearring; |
| | | var rings = str.trim().split(regExes.parenComma); |
| | | var shell; |
| | | var holes = []; |
| | | //for (var i = 0, len = rings.length; i < len; ++i) { |
| | | ring = rings[0].replace(regExes.trimParens, "$1"); |
| | | linestring = ring; |
| | | //} |
| | | return linestring; |
| | | }, |
| | | |
| | | /** |
| | | * Return a multipolygon geometry given a multipolygon WKT fragment. |
| | | * |
| | | * @param {String} str A WKT fragment representing the multipolygon. |
| | | * @return {MultiPolygon} A multipolygon geometry. |
| | | * @private |
| | | */ |
| | | multipolygon: function multipolygon(str) { |
| | | var this$1 = this; |
| | | |
| | | if (str === undefined) { |
| | | return []; |
| | | } |
| | | |
| | | var polygon; |
| | | var polygons = str.trim().split(regExes.doubleParenComma); |
| | | var components = []; |
| | | for (var i = 0, len = polygons.length; i < len; ++i) { |
| | | polygon = polygons[i].replace(regExes.trimParens, "$1"); |
| | | components.push(parse$1.polygon(polygon)); |
| | | } |
| | | return components; |
| | | }, |
| | | }; |
| | | |
| | | var geometry, type, str; |
| | | wkt = wkt.replace(/[\n\r]/g, " "); |
| | | var matches = regExes.typeStr.exec(wkt); |
| | | if (wkt.search("EMPTY") !== -1) { |
| | | matches = regExes.emptyTypeStr.exec(wkt); |
| | | matches[2] = undefined; |
| | | } |
| | | if (matches) { |
| | | type = matches[1].toLowerCase(); |
| | | str = matches[2]; |
| | | if (parse$1[type]) { |
| | | geometry = parse$1[type].apply(this, [str]); |
| | | } |
| | | } |
| | | |
| | | if (geometry === undefined) { |
| | | throw new Error("Could not parse WKT " + wkt); |
| | | } |
| | | |
| | | return geometry; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |