|
|
@@ -1,676 +0,0 @@
|
|
|
-<!-- <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