zbcx_ckyc 1.0.0

package/src/plugins/zbcxCesium/coms/dataPreview/DataPreview.vue

@@ -0,0 +1,526 @@
+<style lang='scss' scoped>
+  #chart3d {width: 100%; height: 100%; position: relative; overflow: hidden;}
+  :deep(.cxe-zoom-controller) {top: 1rem; right: .45rem;}
+  :deep(.zoom-in) {line-height: normal;}
+  :deep(.refresh) {line-height: normal;}
+  :deep(.zoom-out) {line-height: normal;}
+  .legend2 {position: absolute; bottom: 0.1rem;right: 0.1rem;max-height: 2.5rem;z-index: 2;background-color: #fff;}
+  :deep(.legendBox) {
+    margin-left: 0.1rem;
+    img {width: 0.20rem; height: 0.20rem;}
+    p {font-size:0.12rem; margin-left: 0.1rem;}
+  }
+  .tool-style{top: 2% !important;z-index: 2;}
+  :deep(.cxe-compass){display: none!important}
+  :deep(.cxe-zoom-controller){display: none!important}
+  :deep(.cxe-location-bar) {left: 4rem}
+  :deep(.cxe-distance-legend){display: none;}
+  .dq-switch { position: absolute; right: 0.12rem;  top: 1.32rem; z-index: 1;}
+  .slider-alpha { position: absolute; right: 0.12rem; top: 0.9rem; background: rgba(255,255,255,0.5); width: 2.5rem; color: #000; z-index: 1; display: flex; align-items: center; justify-content: space-around;}
+  :deep(.el-slider) {width: 50%;}
+
+</style>
+
+<template>
+  <!-- 标签语义化：header、nav、main、article、aside、footer、section -->
+  <div id="chart3d" ref="map3d">
+    <slot></slot>
+    <el-switch v-if="!noShowTool" class="dq-switch" v-model="dqSwitch" active-text="地球" inactive-text=""/>
+
+    <div class="slider-alpha" v-if="!noShowTool">
+      <span class="demonstration">地图透明度设置</span>
+      <el-slider v-model="alpha" :max="1" :step="0.1" @change="setOpacity" />
+    </div>
+    
+    <!-- 图例 -->
+    <legend2  class="legend2" v-if="legendList_.length" :legendList="legendList_"></legend2>
+    <!-- 底图切换 -->
+    <BaseMap v-if="baseMapArr.length && showBaseMap" style="position:absolute;bottom: 2vh;right:1%" :baseMapArr="baseMapArr" @basemap-click='baseMapClick'></BaseMap>
+    <MapTool ref='map'
+      v-if="!noShowTool"
+      class="tool-style"
+      @drawPointFunc="drawPointFunc('Circle')"
+      @drawLineFunc="drawLineFunc('LineString')"
+      @drawLineFuncClosed="drawLineFuncClosed('Rectangle')"
+      @drawParamLine="drawParamLine"
+      @drawPolFunc="drawPolFunc('Polygon')"
+      @controlLayer="controlLayer"
+      @delVector="delVector"
+      @drawBq="drawBq"
+      @clearDrawBq="clearDrawBq"
+      @exportShp="exportShp"
+      @saveShp="saveShp"
+     >
+    </MapTool>
+  </div>
+</template>
+
+<script>
+
+/**
+* 组件 - 空间数据预览
+*
+* 调用说明:
+* @prop    {Array}       baseMapArr                                    底图数组
+* @prop    {Object}      defSceneCfg                                   三维场景默认配置
+* @prop    {boolean}     defSceneCfg.compass                           罗盘,默认true
+* @prop    {boolean}     defSceneCfg.stateBar                          状态栏,默认true
+* @prop    {boolean}     defSceneCfg.disLegend                         比例尺,默认true
+* @prop    {boolean}     defSceneCfg.zoomControl                       缩放,默认true
+* @prop    {boolean}     defSceneCfg.lightFollow                       是否开启灯光跟随，类似手电筒效果.默认false
+*
+* @prop    {Object}      services                                      图层数据属性，具体字段见cx_mapservice。
+* @prop    {Object}      services.url                                  资源url。
+* @prop    {Object}      services.maptype                              图层服务类型。
+* @prop    {Object}      services.layer                                layer。
+* @prop    {Object}      services.params                               附带参数。
+* @prop    {Object}      services.params.rectangle                     服务位置的矩形，格式：{"rectangle":{"south":34.334515220101366,"east":96.384783,"north":49.183097094455405,"west":73.501142}}
+* @prop    {Object}      services.params.tilingScheme                  切片方式，默认new GeographicTilingScheme()，参考https://cesium.com/learn/cesiumjs/ref-doc/TilingScheme.html#TilingScheme
+* @prop    {Object}      services.params.tileMatrixSetID               用于WMTS请求的TileMatrixSet的标识符。
+* @prop    {Object}      services.params.tileMatrixLabels              TileMatrix中用于WMTS请求的标识符列表，每个TileMatrix级别一个。
+* @prop    {Object}      services.params.center                        3dtiles设置中心点，格式：{"center":{"lng":119.18,"lat":34.57,"height":0}}。
+* @prop    {Object}      services.params.offset                        3dtiles平移，格式：{"offset":{"x":1000,"y":0,"z":0}}。
+* @prop    {Object}      services.params.rotate                        3dtiles旋转，格式：{"rotate":{"x":-90,"y":0,"z":0}}。
+* @prop    {Object}      services.params.scale                         3dtiles缩放，格式：{"scale":{"x":-90,"y":0,"z":0}}。
+
+* @prop    {Array}       legendList                                    数据图例
+* @prop    {String}      legendList.name                               图例名
+* @prop    {String}      legendList.url                                图例图片
+*
+* @prop    {Object}      opts                                          额外参数,shp、geojson数据加载时候需要额外样式和回调
+* @prop    {Object}      opts.style                                    样式，参考cxe和cesium的语法
+* @prop    {function}    opts.callback                                 回调函数
+* @event   event                                 		响应方法以及参数
+*
+* @slot    default                                  描述
+*
+*/
+
+/**
+* 修改记录:
+* 2023-9-4   张光辉      首次编写
+*/
+import MapTool from '@/plugins/app/com/MapTool.vue'
+import legend2 from '../legend/Legend.vue'
+import BaseMap from '../baseMapSwitch/BaseMap.vue'
+import PubCxe from '../../pub/PubCxe.js'
+import LoadModel from '../../pub/LoadModel'
+import LoadOgc from '../../pub/LoadOgc'
+import ReadShpFile from './ReadShpFile.js'
+import shpToGeoJson from '../../utils/ShpToGeoJson'
+import LoadGeojson from '../../pub/LoadGeojson.js'
+import MesureTool from '@/plugins/app/com/measure'
+import CesiumTool from '@/plugins/app/com/CesiumTool'
+
+const TYPE_GLTF = 'gltf'            // gltf模型,单体模型
+const TYPE_GLBS = 'glbs'            // glb模型
+const TYPE_TILES = '3dtiles'        // 3dtiles模型
+const TYPE_SHP = 'shp'              // shp
+const TYPE_WMS = 'wms'              // wms图层
+const TYPE_WMTS = 'wmts'            // WMTS图层
+const TYPE_GEOJSON = 'geojson'      // geojson
+const Point = 'Point', Polygon = 'Polygon', LineString = 'LineString', Rectangle = 'Rectangle', Circle = 'Circle'
+const Delete = 'Delete'
+export default
+{
+  mixins: [],
+  components: { BaseMap, legend2, MapTool },
+  props:
+  {
+    defSceneCfg: {
+      type: Object,
+      default: () => ({
+        compass: true,
+        stateBar: true,
+        disLegend: true,
+        zoomControl: true
+      })
+    },   // 基础控件
+    baseMapArr: { type: Array, default: () => [] },       // 底图数组
+    showBaseMap: { type: Boolean, default: true },        // 是否显示底图控件
+    legendList: { type: Array, default: () => [] },       // 图例数组
+    services: { type: Object, default: () => ({}) },      // 要预览的数据属性
+    opts: { type: Object, default: () => ({}) },           // 额外参数
+    noShowTool: {
+      type: Boolean,
+      default: () =>
+      {
+        return false
+      }
+    }
+  },
+  data()
+  {
+    return {
+      legendList_: this.legendList,
+      paramDraw: {
+        mode: 'vertical',
+        tipPlace: 'left',
+        subToolPlace: 'right',
+        toolWidth: 40,
+        showTextTip: true,
+        tools: [
+          [
+            {
+              name: LineString,
+              title: '线绘制',
+              namec: '线绘制',
+              grp: '',
+              plugin: '',
+              icon: 'cx-fi ic-huizhixian',
+              params: '',
+              children: []
+            },
+            {
+              name: Polygon,
+              title: '多边形绘制',
+              namec: '多边形绘制',
+              grp: '',
+              plugin: '',
+              icon: 'cx-fi ic-polygon',
+              params: '',
+              children: []
+            },
+            {
+              name: Rectangle,
+              title: '矩形绘制',
+              namec: '矩形绘制',
+              grp: '',
+              plugin: '',
+              icon: 'cx-fi ic-drawRectangle',
+              params: '',
+              children: []
+            },
+            {
+              name: Circle,
+              title: '圆形绘制',
+              namec: '圆形绘制',
+              grp: '',
+              plugin: '',
+              icon: 'cx-fi ic-drawcircle',
+              params: '',
+              children: []
+            }
+          ]
+        ]
+      },
+      layer: null,
+      dqSwitch: true,
+      alpha: 1
+    }
+  },
+
+  emits: ['created'],
+  // 计算属性，依赖其他数据数字计算
+  computed:
+  {},
+
+  // 属性监听，处理属性变化后有大量操作
+  watch:
+  {
+    legendList:
+    {
+      handler: function(newVal, oldVal)
+      {
+        this.legendList_ = newVal
+      },
+      deep: true
+    },
+    dqSwitch(value)
+    {
+      this.viewer.scene.globe.show = value            // 不显示地球
+      this.viewer.scene.skyAtmosphere.show = value
+      this.viewer.viewer.imageryLayers._layers.forEach(layer =>
+      {
+        layer.alpha = value ? 1 : 0
+      })
+      this.viewer.viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, value ? 0 : 1)
+    }
+  },
+
+  // 初始化组件，data中数据变量赋值
+  created()
+  {},
+
+  // 组件dom挂载成功
+  mounted()
+  {
+    this.init()
+  },
+
+  // 销毁前
+  beforeUnmount()
+  {},
+
+  // 按功能相关性组织函数块，函数名体现功能
+  methods:
+  {
+    init()
+    {
+      this.initEarth()
+    },
+
+    // 初始化地球
+    initEarth()
+    {
+      this.viewer = new window.cxe.Viewer('chart3d')
+      // 罗盘 true/false
+      this.viewer.compass.enable = this.defSceneCfg.compass
+      // 状态栏 true/false
+      this.viewer.stateBar.enable = this.defSceneCfg.stateBar
+      // 比例尺 true/false
+      this.viewer.disLegend.enable = this.defSceneCfg.disLegend
+      // 缩放
+      this.viewer.zoomControl.enable = this.defSceneCfg.zoomControl
+
+      this.viewer.scene.globe.showSkirts = false  // 去网格化
+      this.viewer.scene.globe.depthTestAgainstTerrain = true // 深度检测
+
+      // 是否开启灯光跟随，类似手电筒效果，监听相机位置改变光照。
+      if (!this.defSceneCfg.lightFollow)
+        this.lightFollow()
+      this.pubCxe = new PubCxe({ viewer: this.viewer })
+      this.pubCxe.loadBasemap(this.baseMapArr)
+
+      // 加载数据
+      this.loadData(this.services)
+
+      window.Viewer = this.viewer
+      this.$emit('created', this.viewer)
+      this.mesure = new MesureTool(this.viewer)
+      window.mesure = this.mesure
+      window.tool = new CesiumTool(this.viewer, [])
+    },
+    
+    // 设置光源位置，照亮视野范围
+    lightFollow()
+    {
+      let scene = this.viewer.scene
+      let flashlight = new Cesium.DirectionalLight({
+        direction: this.viewer.scene.camera.directionWC
+      })
+      scene.light = flashlight
+      scene.globe.dynamicAtmosphereLighting = false
+      this.viewer.scene.preRender.addEventListener(function(scene, time)
+      {
+        scene.light.direction = Cesium.Cartesian3.clone(scene.camera.directionWC, scene.light.direction)
+      })
+    },
+
+    // 加载数据
+    loadData(services)
+    {
+      switch (services.maptype)
+      {
+      case TYPE_GLTF:
+      case TYPE_GLBS:
+      case TYPE_TILES:
+        LoadModel.loadModel(this.viewer, services); break
+      case TYPE_WMS:
+      case TYPE_WMTS:
+        LoadOgc.loadOgc(this.viewer, services)
+        break
+      case TYPE_SHP:
+        this.loadShp(this.viewer, services, this.opts)
+        break
+      case TYPE_GEOJSON:
+        this.laodGeojson(this.viewer, services, this.opts)
+        break
+      }
+    },
+
+    loadShp(viewer, services, opts)
+    {
+      let res = ReadShpFile.parseUrl(services)
+      let promise = shpToGeoJson(res.shp, res.dbf)
+      promise.then(res =>
+      {
+        res.forEach(item =>
+        {
+          this.laodGeojson(viewer, { url: item }, opts)
+        })
+      })
+    },
+
+    async  laodGeojson(viewer, services, opts)
+    {
+      this.layer = await LoadGeojson.loadGeojson(viewer, { ...opts, ...services, url: services.url })
+    },
+    
+    removeLayer()
+    {
+      if (this.layer)
+        this.viewer.layers.removeLayer(this.layer)
+    },
+
+    // 点绘制
+    drawPointFunc(name)
+    {
+      const drawPoint = cx.array.get1(this.paramDraw.tools[0], { name })
+      this.toolClickDraws(drawPoint)
+    },
+    // 点线绘制
+    drawLineFunc(name)
+    {
+      const drawPoint = cx.array.get1(this.paramDraw.tools[0], { name })
+      this.toolClickDraws(drawPoint)
+    },
+    // 矩形绘制
+    drawLineFuncClosed(name)
+    {
+      const drawPoint = cx.array.get1(this.paramDraw.tools[0], { name })
+      this.toolClickDraws(drawPoint)
+    },
+    // 多边形绘制
+    drawPolFunc(name)
+    {
+      const drawPoint = cx.array.get1(this.paramDraw.tools[0], { name })
+      this.toolClickDraws(drawPoint)
+    },
+    // 清除
+    delVector()
+    {
+      this.clearDraw()
+    },
+
+    // 点击绘制
+    toolClickDraws(tool)
+    {
+      this.viewer.scene.globe.depthTestAgainstTerrain = true
+      this.coordinates = []
+      this.clearDraw()
+      this.nowDraw = tool
+      let params = this.setDrawParams(this.maxPos)
+      switch (tool.name)
+      {
+      case Point: this.draw = new cxe.DrawPoint(this.viewer, params); break
+      case LineString: this.draw = new cxe.DrawPolyline(this.viewer, params); break
+      case Polygon: this.draw = new cxe.DrawPolygon(this.viewer, params); break
+      case Rectangle: this.draw = new cxe.DrawRectangle(this.viewer, params); break
+      case Circle: this.draw = new cxe.DrawCircle(this.viewer, params); break
+      case Delete: this.clearDraw(); break
+      }
+      this.draw.start()
+    },
+
+    // 构造绘制参数
+    setDrawParams(maxPos)
+    {
+      this.drawLayer = new cxe.VectorLayer('layer')
+      let layer = this.drawLayer
+      this.viewer.layers.addLayer(layer)
+
+      let params = {
+        layer,
+        drawUpdate: this.drawUpdate,
+        drawFinish: this.drawFinish
+      }
+      if (maxPos)
+        params.maxPos = maxPos
+      return params
+    },
+
+    // 绘制完成的回调
+    drawFinish(args)
+    {
+      if (this.nowDraw.name === Point)
+        this.coordinates.push(args.graph.position._lng, args.graph.position._lat)
+      else if (this.nowDraw.name === LineString)
+      {
+        this.LineStringObj = args
+        setTimeout(() =>
+        {
+          this.drawLineString = true
+        }, 1)
+      }
+      else if (this.nowDraw.name === Circle)
+        this.getFullText(this.nowDraw.name, `${args.graph.center._lng},${args.graph.center._lat},${args.graph.radius}`)
+      else if (this.nowDraw.name === Rectangle)
+      {
+        let arr = []
+        args.graph.positions.forEach(item =>
+        {
+          arr.push([item._lng, item._lat])
+        })
+        arr = this.creatteRectangle({ x: arr[0][0], y: arr[0][1] }, { x: arr[1][0], y: arr[1][1] })
+        // 组织左下角，右上角点位
+        let val = `${arr[3][0]},${arr[3][1]},${arr[1][0]},${arr[1][1]}`
+        this.getFullText(this.nowDraw.name, val)
+      }
+      else
+      {
+        let arr = []
+        args.graph.positions.forEach(item =>
+        {
+          arr.push([item._lng, item._lat])
+        })
+        arr.push(arr[0])
+            
+        this.coordinates.push(arr)
+        this.getFullText(this.nowDraw.name, arr.toString())
+      }
+    },
+
+    // 清除绘制
+    clearDraw()
+    {
+      this.coordinates = []
+      if (this.draw)
+        this.draw.destroy()
+      if (this.LineStringObj)
+        this.LineStringObj = null
+      if (this.pickCoor)
+        this.pickCoor.sleep()
+      if (this.htmlLayer)
+        this.viewer.layers.removeLayer(this.htmlLayer)
+      if (this.drawLayer)
+        this.viewer.layers.removeLayer(this.drawLayer)
+      if (this.billboardLayer)
+        this.viewer.layers.removeLayer(this.billboardLayer)
+    },
+
+    drawBq()
+    {
+      this.$emit('drawBq')
+    },
+
+    clearDrawBq()
+    {
+      this.$emit('clearDrawBq')
+    },
+
+    exportShp()
+    {
+      this.$emit('exportShp')
+    },
+
+    saveShp()
+    {
+      this.$emit('saveShp')
+    },
+
+    // 设置透明度opacity
+    setOpacity(value)
+    {
+      // 如果地球透明 globe.translucency.enabled 要设置为true
+      if (value === 1)
+      {
+        window.Viewer.scene.globe.translucency.enabled = false
+        window.Viewer.scene.globe.baseColor = new Cesium.Color(1 / 255, 19 / 255, 70 / 255, 1)
+      }
+      
+      else
+      {
+        window.Viewer.scene.globe.translucency.enabled = true
+        window.Viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0)
+      }
+      
+      // 影像图层设置透明度
+      window.Viewer.imageryLayers._layers.forEach(layer =>
+      {
+        layer.alpha = value
+      })
+    }
+  }
+}
+</script>

package/src/plugins/zbcxCesium/coms/dataPreview/DataPreviewPlug.vue

@@ -0,0 +1,79 @@
+<style lang='scss' scoped>
+</style>
+
+<template>
+  <DataPreview :baseMapArr="baseMapArr" :defSceneCfg="defSceneCfg" :services="att" :legendList="legendList" :showBaseMap="showBaseMap"></DataPreview>
+</template>
+
+<script>
+
+/**
+* 插件 - 空间数据预览插件
+*
+* 调用说明:
+* @prop    {Object}    xxxxxx                      	描述参数
+*
+* @event   event                                 		响应方法以及参数
+*
+* @slot    default                                  描述
+*
+* 参数说明:
+* xxx参数
+* @param   {Object}    xxx						              描述参数
+*/
+
+/**
+* 修改记录:
+* 22-06-20   姓名      修改内容
+*/
+import DataPreview from './DataPreview.vue'
+export default
+{
+  mixins: [cx.mixin.IPlugBase],
+  components: { DataPreview },
+
+  data()
+  {
+    return {
+      baseMapArr: [],
+      defSceneCfg: {},
+      att: {},
+      legendList: [],
+      showBaseMap: null
+    }
+  },
+
+  // 计算属性，依赖其他数据数字计算
+  computed:
+  {},
+
+  // 属性监听，处理属性变化后有大量操作
+  watch:
+  {
+
+  },
+
+  // 初始化组件，data中数据变量赋值
+  created()
+  {
+    this.baseMapArr = this.params.baseMapArr
+    this.defSceneCfg = this.params.defSceneCfg || {}
+    this.att = this.params.att || {}
+    this.legendList = this.params.legendList
+    this.showBaseMap = this.params.showBaseMap
+  },
+
+  // 组件dom挂载成功
+  mounted()
+  {},
+
+  // 销毁前
+  beforeUnmount()
+  {},
+
+  // 按功能相关性组织函数块，函数名体现功能
+  methods:
+  {
+  }
+}
+</script>

package/src/plugins/zbcxCesium/coms/dataPreview/ReadShpFile.js

@@ -0,0 +1,42 @@
+class ReadShpFile
+{
+  /**
+   * 解析url字段,需要shp、dbf路径,支持两种方式，忽略大小写
+   * 1. { url: 'shp:xx/xx.shp;dbf:xx/xx.dbf' }   2. { shpUrl:'xx/.shp',dbfUrl:'xx/xx.dbf' }
+   * @param   {Object}    att               shp文件属性
+   * @returns {object}    shp, dbf路径
+   */
+  static parseUrl(att)
+  {
+    let shp, dbf
+    if (att.url)
+    {
+      let res = this.urlDb(att.url)
+      shp = res.shp
+      dbf = res.dbf
+    }
+    else if (att.shpUrl && att.dbfUrl)
+    {
+      shp = att.shpUrl
+      dbf = att.dbfUrl
+    }
+    return { shp, dbf }
+  }
+
+  // 方式1的参数
+  static urlDb(url, shp, dbf)
+  {
+    const shp_ = 'shp:', dbf_ = 'dbf:'
+    if (url.toLowerCase().includes(shp_) && url.toLowerCase().includes(dbf_))
+    {
+      let arr = url.split(';')
+      arr.forEach(item =>
+      {
+        if (item.toLowerCase().includes(shp_)) shp = item.split(':')[1]
+        if (item.toLowerCase().includes(dbf_)) dbf = item.split(':')[1]
+      })
+    }
+    return { shp, dbf }
+  }
+}
+export default ReadShpFile