|
|
@@ -0,0 +1,676 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <i class="cesiumbtn" :class="store.state.viewer_flag ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
|
|
|
+ @click="bigViewerChange"></i>
|
|
|
+ <div v-show="store.state.viewer_flag" class="viewer">
|
|
|
+ <div class="bg">
|
|
|
+
|
|
|
+ <div class="bg_left"></div>
|
|
|
+ <div class="bg_right"></div>
|
|
|
+ <div class="bg_bottom"></div>
|
|
|
+ </div>
|
|
|
+ <datePicker @dateChange="dateChange"></datePicker>
|
|
|
+ <ser-center></ser-center>
|
|
|
+ <GKZB ref="gkzb_ref" />
|
|
|
+ <BJXM />
|
|
|
+ <TDSC />
|
|
|
+ <HYSY ref="hysy_ref" />
|
|
|
+ <TDSY />
|
|
|
+ <GDBH ref="gdbh_ref" />
|
|
|
+ <STXF ref="stxf_ref" />
|
|
|
+ <WPJG ref="wpjg_ref" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+import serCenter from './cockpitNew1/serCenter';
|
|
|
+import GKZB from './cockpitNew1/gkzb';
|
|
|
+import TDSC from './cockpitNew1/tdsc';
|
|
|
+import HYSY from './cockpitNew1/hysy';
|
|
|
+import TDSY from './cockpitNew1/tdsy';
|
|
|
+import BJXM from './cockpitNew1/bjxm';
|
|
|
+import GDBH from './cockpitNew1/gdbh';
|
|
|
+import STXF from './cockpitNew1/stxf';
|
|
|
+import WPJG from './cockpitNew1/wpjg';
|
|
|
+import datePicker from './cockpitNew1/datePicker.vue';
|
|
|
+import xzqh from "../../static/data/460200_full.json";
|
|
|
+import hyqy from "../../static/data/460200_hyqy.json";
|
|
|
+
|
|
|
+import SerCenter from './cockpitNew1/serCenter.vue';
|
|
|
+
|
|
|
+import { cockpitInfo } from '@/api/cockpit'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { serCenter, GKZB, BJXM, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, SerCenter },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ params: {
|
|
|
+ beginTime: '',
|
|
|
+ endTime: '',
|
|
|
+ id: 4602,
|
|
|
+ },
|
|
|
+ flag: true,
|
|
|
+ xzqh_color_click: "rgba(46, 177, 251, 0.6)",
|
|
|
+ xzqh_color: "rgba(10, 95, 152, 0.5)",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ bigViewerChange() {
|
|
|
+ store.setViewerFlagb(!store.state.viewer_flag);
|
|
|
+ store.setToolBarShow(!store.state.viewer_flag);
|
|
|
+ // store.setToolBarShow(true);
|
|
|
+
|
|
|
+ },
|
|
|
+ switch() {
|
|
|
+ this.flag = !this.flag;
|
|
|
+ },
|
|
|
+ setDatas() {
|
|
|
+ this.$refs.gdbh_ref.setData({ id: this.params.id });
|
|
|
+ this.$refs.stxf_ref.setData({ id: this.params.id });
|
|
|
+ this.$refs.wpjg_ref.setData(this.params);
|
|
|
+ },
|
|
|
+ dateChange(date) {
|
|
|
+ this.params.beginTime = date[0]
|
|
|
+ this.params.endTime = date[1]
|
|
|
+ this.setDatas()
|
|
|
+ },
|
|
|
+ async hysyq(address) {
|
|
|
+ // 选中xzqh查询
|
|
|
+ let obj = {
|
|
|
+ beginTime: store.state.cockpit_date[0],
|
|
|
+ endTime: store.state.cockpit_date[1],
|
|
|
+ jscType: 'jsc_hysyq_ztsh',
|
|
|
+ id: address
|
|
|
+ };
|
|
|
+ let data = await cockpitInfo(obj);
|
|
|
+
|
|
|
+ let obg_text = {
|
|
|
+ xzqhdm_number: data.data[0].xzqhdm_number,
|
|
|
+ zhmj: data.data[0].zhmj == undefined ? 0 : data.data[0].zhmj,
|
|
|
+
|
|
|
+ }
|
|
|
+ obg_text.zhmj == null ? 0 : obg_text.zhmj;
|
|
|
+ store.setCockpitHysyText(obg_text);
|
|
|
+
|
|
|
+ // 图表数据
|
|
|
+ let obj_echart = {
|
|
|
+ beginTime: store.state.cockpit_date[0],
|
|
|
+ endTime: store.state.cockpit_date[1],
|
|
|
+ jscType: 'jsc_hysyq_yelx',
|
|
|
+ id: address
|
|
|
+ };
|
|
|
+ let data_echart = await cockpitInfo(obj_echart);
|
|
|
+
|
|
|
+ let obg_echart = {
|
|
|
+ x: data_echart.data.map(item => item.yhlx_name),
|
|
|
+ bar: data_echart.data.map(item => item.zhmj)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ obg_echart.x.length == 0 ? obg_echart.x = ['渔业基础设施用海', '开放式养殖用海', '旅游基础设施用海', '浴场用海',
|
|
|
+ '游乐场用海'] : obg_echart.x = obg_echart.x;
|
|
|
+
|
|
|
+ obg_echart.bar.length == 0 ? obg_echart.bar = [0, 0, 0, 0, 0,] : obg_echart.bar = obg_echart.bar;
|
|
|
+
|
|
|
+ store.setCockpitHysyEchart(obg_echart);
|
|
|
+
|
|
|
+
|
|
|
+ this.$refs.hysy_ref["getRenKou"]();
|
|
|
+
|
|
|
+ // getRenKou();
|
|
|
+
|
|
|
+ },
|
|
|
+ hysyq_xzqh() {
|
|
|
+ const that = this;
|
|
|
+ that.$refs.hysy_ref["label_data"]();
|
|
|
+ that.$refs.hysy_ref["echart_data"]();
|
|
|
+ },
|
|
|
+ async gkzb_xzqh(address) {
|
|
|
+ let obj = {
|
|
|
+ // beginTime: store.state.cockpit_date[0],
|
|
|
+ // endTime: store.state.cockpit_date[1],
|
|
|
+ jscType: 'jsc_gkzb_ztgu_stbh',
|
|
|
+ id: address
|
|
|
+ };
|
|
|
+ let data = await cockpitInfo(obj);
|
|
|
+
|
|
|
+ let obj_yjjbntmj = {
|
|
|
+ jscType: 'jsc_gdbh_ztgh_nt',
|
|
|
+ id: address
|
|
|
+ };
|
|
|
+ let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);
|
|
|
+ // 永久基本农田保护面积
|
|
|
+ // that.yjjbntmj = obj_yjjbntmj_data.data[0].yjjbntmj;
|
|
|
+
|
|
|
+
|
|
|
+ let obj_kfbjmj = {
|
|
|
+ jscType: 'jsc_gkzb_ztgh_kfbj',
|
|
|
+ id: address
|
|
|
+ };
|
|
|
+ let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);
|
|
|
+ // // 城市开发边界
|
|
|
+ // that.kfbjmj = obj_kfbjmj_data.data[0].kfbjmj;
|
|
|
+ // // 覆盖城镇开发边界
|
|
|
+ // that.bfb = obj_kfbjmj_data.data[0].bfb * 100;
|
|
|
+ store.setCockpitGkzb({
|
|
|
+ mj: data.data[0].mj,// 生态保护红线面积
|
|
|
+ ly_mj: data.data[0].ly_mj,// 路域生态保护红线
|
|
|
+ hy_mj: data.data[0].hy_mj,//近海岸面积
|
|
|
+ yjjbntmj: obj_yjjbntmj_data.data[0].yjjbntmj,// 永久基本农田保护面积
|
|
|
+ kfbjmj: obj_kfbjmj_data.data[0].kfbjmj,// 城市开发边界
|
|
|
+ bfb: obj_kfbjmj_data.data[0].bfb * 100,// 覆盖城镇开发边界
|
|
|
+ ghdkmj: obj_kfbjmj_data.data[0].ghdkmj//已入库管控范围
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ async gkzb() {
|
|
|
+ const that = this;
|
|
|
+ that.$refs.gkzb_ref["initData"]();
|
|
|
+ },
|
|
|
+ async pick_xzqh() {
|
|
|
+ const that = this;
|
|
|
+ const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
+ handler.setInputAction(async event => {
|
|
|
+ let pickObj = viewer.scene.pick(event.position);
|
|
|
+ var position = viewer.scene.pickPosition(event.position);
|
|
|
+
|
|
|
+ if (!position)//点击到地球之外
|
|
|
+ return false;
|
|
|
+ var cartographic = Cesium.Cartographic.fromCartesian(position);
|
|
|
+
|
|
|
+
|
|
|
+ let longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
+ let latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
+ let height = cartographic.height;
|
|
|
+ let heading = viewer.scene.camera.heading;
|
|
|
+ let pitch = viewer.scene.camera.pitch;
|
|
|
+ // that.addSceneFun()
|
|
|
+ // console.log(longitude, latitude, height);
|
|
|
+
|
|
|
+ // if (!pickObj)//未获取实体
|
|
|
+ // return false;
|
|
|
+
|
|
|
+
|
|
|
+ if (!position) {
|
|
|
+ position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (Cesium.defined(pickObj)) {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if (pickObj.id && pickObj.id instanceof Cesium.Entity) {//点击entity
|
|
|
+
|
|
|
+ if (pickObj.id.properties.hasProperty('name') && pickObj.id.properties.name.getValue() != "海洋区域") {
|
|
|
+ const name = pickObj.id.properties.name.getValue();
|
|
|
+ const address = pickObj.id.properties.adcode.getValue();
|
|
|
+ const center = pickObj.id.properties.centroid.getValue();
|
|
|
+ store.state.regional_information = {
|
|
|
+ id: address,
|
|
|
+ name: name,
|
|
|
+ }
|
|
|
+ // pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click);
|
|
|
+ // pickObj.id.polygon.extrudedHeight = 850;
|
|
|
+
|
|
|
+ viewer.entities.values.forEach((res) => {
|
|
|
+ // 恢复其他状态
|
|
|
+
|
|
|
+ if (res.properties.name._value != name) {
|
|
|
+ res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
|
|
|
+ // res.polygon.extrudedHeight = 450;
|
|
|
+
|
|
|
+ // 选中状态
|
|
|
+ } else {
|
|
|
+ res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click)
|
|
|
+ // res.polygon.extrudedHeight = 850;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ that.params.id = address
|
|
|
+ that.setDatas()
|
|
|
+ // 驾驶舱海域使用权
|
|
|
+ that.hysyq(address);
|
|
|
+ // 驾驶舱土地收储
|
|
|
+ that.tdsc_xzqh(address);
|
|
|
+ // 管控指标
|
|
|
+ that.gkzb_xzqh(address);
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ // 暂时点击周围数据显示三亚市
|
|
|
+ // 清除所有xzqh状态
|
|
|
+ viewer.entities.values.forEach((res) => {
|
|
|
+
|
|
|
+ // console.log(res.properties.name._value, "其他的");
|
|
|
+ // console.log(res);
|
|
|
+ res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
|
|
|
+ // res.polygon.extrudedHeight = 450;
|
|
|
+
|
|
|
+ })
|
|
|
+ // 海域使用
|
|
|
+ that.hysyq_xzqh();
|
|
|
+ // 土地收储
|
|
|
+ that.tdsc();
|
|
|
+ // 管控指标
|
|
|
+ that.gkzb();
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ tdsc() {
|
|
|
+ const that = this;
|
|
|
+ that.store.setCockpitTdsc(true);
|
|
|
+
|
|
|
+ },
|
|
|
+ tdsc_xzqh() {
|
|
|
+ const that = this;
|
|
|
+ that.store.setCockpitTdsc(false);
|
|
|
+ },
|
|
|
+ colorFun(color) {
|
|
|
+ const fs = `czm_material czm_getMaterial(czm_materialInput materialInput)
|
|
|
+
|
|
|
+ {
|
|
|
+ czm_material material = czm_getDefaultMaterial(materialInput);
|
|
|
+ vec2 st = materialInput.st;
|
|
|
+ float dis = distance(st,vec2(0.5));
|
|
|
+ material.diffuse = color.rgb;
|
|
|
+ material.alpha = clamp( dis * 2.0, 0.1, 0.5);
|
|
|
+ return material;
|
|
|
+ }
|
|
|
+ `
|
|
|
+
|
|
|
+ const material = new Cesium.Material({
|
|
|
+ fabric: {
|
|
|
+ uniforms: {
|
|
|
+ color: color
|
|
|
+ },
|
|
|
+ source: fs,
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const aper = new Cesium.MaterialAppearance({
|
|
|
+ material,
|
|
|
+ source: fs,
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ return aper;
|
|
|
+ },
|
|
|
+ init_xzqh() {
|
|
|
+ const that = this;
|
|
|
+ xzqh.features.forEach((res) => {
|
|
|
+
|
|
|
+ let obj = {
|
|
|
+ 'type': "cockpit",
|
|
|
+ 'name': res.properties.name,
|
|
|
+ 'centroid': res.properties.centroid,
|
|
|
+ 'adcode': res.properties.adcode,
|
|
|
+ }
|
|
|
+ res.geometry.coordinates.forEach((item) => {
|
|
|
+
|
|
|
+ const twoDArray = item[0];
|
|
|
+ const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
+
|
|
|
+ viewer.entities.add({
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(obj.centroid[0], res.properties.centroid[1], 5000),
|
|
|
+ text: obj.name,
|
|
|
+ label: {
|
|
|
+ scale: 1.5,
|
|
|
+ font: "bolder 16px sans-serif",
|
|
|
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
+ text: res.properties.name,//图标名称
|
|
|
+ fillColor: Cesium.Color.fromCssColorString("#ffffff"),
|
|
|
+ pixelOffset: new Cesium.Cartesian2(5, -15),
|
|
|
+ zIndex: 3,
|
|
|
+ // 设置远近裁条件
|
|
|
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ },
|
|
|
+ billboard: {
|
|
|
+ // 图像地址，URI或Canvas的属性
|
|
|
+ image: "./static/images/overview/htq-f.png",
|
|
|
+ height: 60,
|
|
|
+ // 宽度（以像素为单位）
|
|
|
+ width: 150,
|
|
|
+ // 相对于坐标的垂直位置
|
|
|
+ // verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
|
+ // // 相对于坐标的水平位置
|
|
|
+ // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
+ scale: 1.0,
|
|
|
+ zIndex: 2,
|
|
|
+ // 设置远近裁条件
|
|
|
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ properties: obj,
|
|
|
+ polygon: {
|
|
|
+ zIndex: 1,
|
|
|
+ hierarchy: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
|
|
|
+ },
|
|
|
+ // outline: false,
|
|
|
+ material: Cesium.Color.fromCssColorString(that.xzqh_color),
|
|
|
+ height: 100,
|
|
|
+ extrudedHeight: res.properties.extrudedHeight,
|
|
|
+ outline: true,
|
|
|
+ // outlineColor : Cesium.Color.BLACK
|
|
|
+ outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
|
|
|
+ // 设置远近裁条件
|
|
|
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ // let polygon = new Cesium.GeometryInstance({
|
|
|
+ // geometry: new Cesium.PolygonGeometry({
|
|
|
+ // polygonHierarchy: new Cesium.PolygonHierarchy(
|
|
|
+ // Cesium.Cartesian3.fromDegreesArray(oneDArray)
|
|
|
+ // ),
|
|
|
+ // height: 100,
|
|
|
+ // extrudedHeight: res.properties.extrudedHeight,
|
|
|
+
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+
|
|
|
+ // let addPolygonGeometry = new Cesium.Primitive({
|
|
|
+ // geometryInstances: polygon,
|
|
|
+ // appearance: that.colorFun(Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.1)"))
|
|
|
+
|
|
|
+ // })
|
|
|
+
|
|
|
+ // viewer.scene.primitives.add(addPolygonGeometry)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // init_xzqh() {
|
|
|
+ // const that = this;
|
|
|
+ // xzqh.features.forEach((res) => {
|
|
|
+
|
|
|
+ // let obj = {
|
|
|
+ // 'type': "cockpit",
|
|
|
+ // 'name': res.properties.name,
|
|
|
+ // 'centroid': res.properties.centroid,
|
|
|
+ // 'adcode': res.properties.adcode,
|
|
|
+ // }
|
|
|
+ // res.geometry.coordinates.forEach((item) => {
|
|
|
+
|
|
|
+ // const twoDArray = item[0];
|
|
|
+ // const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
+
|
|
|
+ // viewer.entities.add({
|
|
|
+ // position: Cesium.Cartesian3.fromDegrees(obj.centroid[0], res.properties.centroid[1], 5000),
|
|
|
+ // text: obj.name,
|
|
|
+ // label: {
|
|
|
+ // scale: 1.5,
|
|
|
+ // font: "bolder 16px sans-serif",
|
|
|
+ // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
+ // text: res.properties.name,//图标名称
|
|
|
+ // fillColor: Cesium.Color.fromCssColorString("#ffffff"),
|
|
|
+ // pixelOffset: new Cesium.Cartesian2(5, -15),
|
|
|
+ // zIndex: 3,
|
|
|
+ // // 设置远近裁条件
|
|
|
+ // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ // },
|
|
|
+ // billboard: {
|
|
|
+ // // 图像地址，URI或Canvas的属性
|
|
|
+ // image: "./static/images/overview/htq-f.png",
|
|
|
+ // height: 60,
|
|
|
+ // // 宽度（以像素为单位）
|
|
|
+ // width: 150,
|
|
|
+ // // 相对于坐标的垂直位置
|
|
|
+ // // verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
|
+ // // // 相对于坐标的水平位置
|
|
|
+ // // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
+ // scale: 1.0,
|
|
|
+ // zIndex: 2,
|
|
|
+ // // 设置远近裁条件
|
|
|
+ // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ // show: true
|
|
|
+ // },
|
|
|
+ // properties: obj,
|
|
|
+ // polygon: {
|
|
|
+ // zIndex: 1,
|
|
|
+ // hierarchy: {
|
|
|
+ // positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
|
|
|
+ // },
|
|
|
+ // // outline: false,
|
|
|
+ // material: that.colorFun(Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.75)")),
|
|
|
+ // height: 100,
|
|
|
+ // extrudedHeight: res.properties.extrudedHeight,
|
|
|
+ // outline: true,
|
|
|
+ // // outlineColor : Cesium.Color.BLACK
|
|
|
+ // outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
|
|
|
+ // // 设置远近裁条件
|
|
|
+ // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+ // })
|
|
|
+
|
|
|
+
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ init_hyqy() {
|
|
|
+ const that = this;
|
|
|
+
|
|
|
+
|
|
|
+ // hierarchy: {
|
|
|
+ // positions: Cesium.Cartesian3.fromDegreesArray([
|
|
|
+ // 125.9, 35.7,
|
|
|
+ // 110.20, 34.55,
|
|
|
+ // 120.20, 50.55
|
|
|
+ // ]),
|
|
|
+ // // holes: [{
|
|
|
+ // // positions: Cesium.Cartesian3.fromDegreesArray([
|
|
|
+ // // 119, 32,
|
|
|
+ // // 115, 34,
|
|
|
+ // // 119, 40
|
|
|
+ // // ])
|
|
|
+ // // }]
|
|
|
+ // },
|
|
|
+
|
|
|
+ hyqy.features.forEach((res) => {
|
|
|
+
|
|
|
+ const twoDArray = res.geometry.coordinates[0];
|
|
|
+ const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
+
|
|
|
+ viewer.entities.add({
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
|
|
|
+ text: res.properties.name,
|
|
|
+ label: {
|
|
|
+ scale: 1.5,
|
|
|
+ font: "bolder 16px sans-serif",
|
|
|
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
+ text: res.properties.name,//图标名称
|
|
|
+ fillColor: Cesium.Color.fromCssColorString("#ffffff"),
|
|
|
+ pixelOffset: new Cesium.Cartesian2(5, -15),
|
|
|
+ zIndex: 3,
|
|
|
+ // 设置远近裁条件
|
|
|
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ },
|
|
|
+ billboard: {
|
|
|
+ // 图像地址，URI或Canvas的属性
|
|
|
+ image: "./static/images/overview/htq-f.png",
|
|
|
+ height: 60,
|
|
|
+ // 宽度（以像素为单位）
|
|
|
+ width: 150,
|
|
|
+ // 相对于坐标的垂直位置
|
|
|
+ // verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
|
+ // // 相对于坐标的水平位置
|
|
|
+ // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
+ scale: 1.0,
|
|
|
+ zIndex: 2,
|
|
|
+ // 设置远近裁条件
|
|
|
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ properties: {
|
|
|
+ 'type': "cockpit",
|
|
|
+ 'name': res.properties.name,
|
|
|
+ 'centroid': res.properties.centroid,
|
|
|
+ 'adcode': res.properties.adcode,
|
|
|
+ },
|
|
|
+ polygon: {
|
|
|
+ zIndex: 1,
|
|
|
+ hierarchy: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
|
|
|
+ },
|
|
|
+ // outline: false,
|
|
|
+ material: Cesium.Color.fromCssColorString(that.xzqh_color),
|
|
|
+
|
|
|
+ height: 300,
|
|
|
+ extrudedHeight: 350,
|
|
|
+ outline: true,
|
|
|
+ // outlineColor : Cesium.Color.BLACK
|
|
|
+ outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
|
|
|
+ // 设置远近裁条件
|
|
|
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addSceneFun() {
|
|
|
+ var pitch = viewer.camera.pitch;
|
|
|
+ //获取当前视角的heading
|
|
|
+ var heading = viewer.camera.heading;
|
|
|
+ //获取当前视角的postion（位置）
|
|
|
+ var position = viewer.camera.position;
|
|
|
+ var x = position.x;
|
|
|
+ var y = position.y;
|
|
|
+ var z = position.z;
|
|
|
+ var testPitch = pitch;
|
|
|
+ var testHeading = heading;
|
|
|
+ // console.log("获取当前视角x,y,z", position.x, position.y, position.z, "pitch", pitch, "heading", heading);
|
|
|
+
|
|
|
+ var obj = {
|
|
|
+ "x": x,
|
|
|
+ "y": y,
|
|
|
+ "z": z,
|
|
|
+ "pitch": pitch,
|
|
|
+ "heading": heading,
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(obj, "asd");
|
|
|
+
|
|
|
+ },
|
|
|
+ flatten3DArray(arr) {
|
|
|
+ let stack = [...arr]; // 初始化栈，并将数组元素压入栈中
|
|
|
+ let result = []; // 用于存储结果的一维数组
|
|
|
+
|
|
|
+ while (stack.length > 0) {
|
|
|
+ let current = stack.pop(); // 弹出栈顶元素
|
|
|
+ if (Array.isArray(current)) {
|
|
|
+ // 如果当前元素是数组，则将其元素压入栈中（逆序）
|
|
|
+ for (let i = current.length - 1; i >= 0; i--) {
|
|
|
+ stack.push(current[i]);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果当前元素不是数组，则将其添加到结果数组中
|
|
|
+ result.push(current);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 注意：因为我们是逆序压入栈中的，所以结果数组的顺序与原始三维数组中的顺序相反
|
|
|
+ // 如果需要保持原始顺序，可以在压入栈时使用unshift代替push，但这样会降低性能
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
+ created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
+ async mounted() {
|
|
|
+
|
|
|
+ // let obj = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_yelx', id: '46' };
|
|
|
+ // let data = await cockpitInfo(obj);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // let obj1 = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_ztsh', id: '46' }
|
|
|
+ // let data1 = await cockpitInfo(obj1);
|
|
|
+
|
|
|
+ // console.log(data, "asda");
|
|
|
+ // console.log(data1, "asda");
|
|
|
+ // 三亚行政区划加载
|
|
|
+
|
|
|
+
|
|
|
+ this.$nextTick((res) => {
|
|
|
+ this.pick_xzqh();
|
|
|
+ this.init_xzqh();
|
|
|
+ this.init_hyqy();
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ }, //生命周期 - 挂在完成
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
+ destroy() { },//生命周期 - 销毁完成
|
|
|
+ activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
+ deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss" >
|
|
|
+.viewer {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .bg_left {
|
|
|
+ width: 21.6%;
|
|
|
+ height: calc(100% + 60px);
|
|
|
+ position: absolute;
|
|
|
+ top: -60px;
|
|
|
+ left: 0;
|
|
|
+ z-index: 100;
|
|
|
+ background: linear-gradient(to right, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg_right {
|
|
|
+ width: 21.6%;
|
|
|
+ height: calc(100% + 60px);
|
|
|
+ position: absolute;
|
|
|
+ top: -60px;
|
|
|
+ right: 0;
|
|
|
+ z-index: 100;
|
|
|
+ background: linear-gradient(to left, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg_bottom {
|
|
|
+ width: 100%; // 56.8%;
|
|
|
+ height: 30%;
|
|
|
+ position: absolute;
|
|
|
+ // left: 21.6%;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 100;
|
|
|
+ background: linear-gradient(to top, rgba(6, 37, 66, 0.5), rgba(26, 28, 53, 0));
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zpf