zbcx_ckyc 1.0.0

package/src/plugins/zbcxCesium/coms/legend/Legend.vue

@@ -0,0 +1,78 @@
+<style lang='scss' scoped>
+// 1、定位：position, display, float, left, right, top, bottom, overflow, clear, z-index
+// 2、自身：width, height, padding, border, margin, background
+// 3、文字：font-family, font-size, font-style, font-weight, font-varient, color, letter-spacing, color, text-align
+// 4、文本：text-align, vertical-align, text-wrap, text-transform, text-indent, text-decoration, letter-spacing, word-spacing, white-space, text-overflow
+// 5、其他：content, box-shadow, border-radius, transform
+.legendBox{width:1.5rem;max-height: 5rem;display: flex;align-items: center;padding: 0.02rem;}
+header{text-align: center;font-size: 20px;font-weight: 700;color:#fff;}
+.legend{overflow:auto;max-height: 5rem;border-radius: .05rem;}
+::-webkit-scrollbar{width:0.04rem;height:0.04rem;}
+</style>
+
+<template>
+  <!-- 标签语义化：header、nav、main、article、aside、footer、section -->
+  <div class="legend">
+    <!-- <header>图例</header> -->
+    <div v-for="legend in legendList" :key="legend.name" class="legendBox">
+      <img :src="getSrc(legend)"/>
+      <p>{{legend.name}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * 组件名称: 图例组件
+ *
+ * 调用说明:
+ * @prop  {Array}           legendList                          图例数组
+ * @prop  {String}          legendList.name                     图例名
+ * @prop  {String}          legendList.url                      图例图片
+ */
+
+/**
+ * 维护历史:
+ * 2023-9-4  张光辉      首次编写
+ */
+
+export default
+{
+  mixins: [],
+  components: {},
+  props:
+  {
+    legendList: { type: Array, default: () => [] } // 图例数据
+  },
+  data()
+  {
+    return {
+      
+    }
+  },
+
+  computed:
+  {},
+
+  watch:
+  {},
+
+  created()
+  {
+  },
+
+  mounted()
+  {},
+
+  beforeUnmount()
+  {},
+
+  methods:
+  {
+    getSrc(legend)
+    {
+      return legend.url || legend.uri
+    }
+  }
+}
+</script>

package/src/plugins/zbcxCesium/coms/popup/index.js

@@ -0,0 +1,88 @@
+import { createApp } from 'vue'
+import Label from './index.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/dist/locale/zh-cn'
+
+// 动态构造组件
+function mountComponent(RootComponent, props)
+{
+  const app = createApp(RootComponent, props)
+
+  app.use(ElementPlus, { locale: zhCn })
+  const root = document.createElement('div')
+  document.body.appendChild(root)
+  return {
+    instance: app.mount(root),
+    unmount()
+    {
+      document.body.removeChild(root)
+    }
+  }
+}
+
+export default class Popup
+{
+  constructor(val)
+  {
+    this.viewer = val.viewer
+    this.position = val.position
+
+    this.vmInstance = mountComponent(Label, {
+      title: val.title,
+      formList: val.formList,
+      btnList: val.btnList
+    }) // 根据模板创建一个组件实例
+
+    this.vmInstance.instance.closeEvent = e =>
+    {
+      this.windowClose()
+    }
+
+    val.viewer._widgetContainer.appendChild(this.vmInstance.instance.$el) // 将字符串模板生成的内容添加到DOM上
+    this.addPostRender()
+  }
+     
+  // 添加场景事件
+  addPostRender()
+  {
+    this.viewer.scene.postRender.addEventListener(this.postRender, this)
+  }
+ 
+  // 场景渲染事件 实时更新窗口的位置 使其与笛卡尔坐标一致
+  postRender()
+  {
+    if (!this.vmInstance.instance.$el || !this.vmInstance.instance.$el.style) return
+    const canvasHeight = this.viewer.scene.canvas.height
+    const windowPosition = new Cesium.Cartesian2()
+    Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+      this.viewer.scene,
+      this.position,
+      windowPosition
+    )
+    this.vmInstance.instance.$el.style.bottom =
+       canvasHeight - windowPosition.y + 20 + 'px'
+    const elWidth = this.vmInstance.instance.$el.offsetWidth
+    this.vmInstance.instance.$el.style.left = windowPosition.x - elWidth / 2 + 'px'
+ 
+    const camerPosition = this.viewer.camera.position
+    let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height
+    height += this.viewer.scene.globe.ellipsoid.maximumRadius
+
+    if ((!(Cesium.Cartesian3.distance(camerPosition, this.position) > height)) && this.viewer.camera.positionCartographic.height < 50000000)
+      this.vmInstance.instance.$el.style.display = 'block'
+    else
+      this.vmInstance.instance.$el.style.display = 'none'
+  }
+
+  // 关闭
+  windowClose()
+  {
+    if (this.vmInstance)
+    {
+      this.vmInstance.instance.$el.remove()
+      this.vmInstance.unmount()
+    }
+    this.viewer.scene.postRender.removeEventListener(this.postRender, this) // 移除事件监听
+  }
+}

package/src/plugins/zbcxCesium/coms/popup/index.vue

@@ -0,0 +1,93 @@
+<style lang='scss' scoped>
+//滚动条样式
+::-webkit-scrollbar {width: 0.06rem;height: 0.05rem;border-radius: 0.15rem;-webkit-border-radius: 0.15rem;}
+::-webkit-scrollbar-track-piece {border: 1px solid gray;border-radius: 0.15rem;-webkit-border-radius: 0.15rem;}
+::-webkit-scrollbar-thumb:vertical {height: 0.05rem;background-color: gray; border-radius: 0.15rem;-webkit-border-radius: 0.15rem;}
+::-webkit-scrollbar-thumb:horizontal {width: 7px;background-color: gray;border-radius: 0.15rem;-webkit-border-radius: 0.15rem;}
+.cx-fi{margin-right:0.02rem;font-size: 0.18rem;}
+.container{position:absolute;width: 5rem;height: 2.5rem;background:#fff;
+  .head{display: flex;justify-content: space-between;width: 100%;height: 16%;align-items: center;color: #fff;font-size: 0.18rem;background: #f0f5ff;
+    .title{display: flex;flex-direction: column;justify-content: center;width: 50%;height: 100%;text-indent: 1em;background: url('./dialog-left-bg.png');background-size: 100% 100%;}
+    .el-icon{margin-right: 0.1rem;font-style: normal;cursor: pointer;}}}
+  .body{padding: 0.1rem 0.2rem;height: 58%;border-bottom: 2px solid #ddd;overflow: auto;}
+  .footer{display: flex;justify-content: space-around;padding: 0.05rem 0.8rem;height: 13%;font-size: 0.14rem;color: #6d6d6d;align-items: center;
+    div{cursor: pointer;}
+    img{vertical-align: middle;}}
+  .bottom-arrow{position: absolute;left: 50%;bottom: -20px;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 20px solid #fff;transform: translateX(-50%);}
+:deep(.el-form){display: flex;flex-wrap: wrap;justify-content: space-between;}
+:deep(.el-form--inline .el-form-item){margin-right: 0;}
+:deep(.el-form-item){margin-bottom: 0;width: 48%;}
+</style>
+
+<template>
+<div class="container">
+    <div class="head">
+      <div class="title">{{title}}</div>
+      <el-icon :size="16" color="#7b86a3" @click="closeClick">X</el-icon>
+    </div>
+    <div class="body">
+      <el-form :inline="true" label-width="1.1rem" label-position="right">
+        <el-form-item v-for="item in formList" :key="item.colname" :label="item.namec">
+          {{ item.value }}
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="footer">
+      <div v-for="(btn, index) in btnList" @click="btn.click" :key="index">
+        <span :class="btn.iconClass" :style="{color: btn.color}"></span>{{ btn.name }}
+      </div>
+    </div>
+    <div class="bottom-arrow"></div>
+</div>
+</template>
+
+<script>
+/**
+ * 组件名称: 气泡弹窗
+ * 研发时间: 2022.12.09
+ * 研发人员: 张浩
+ * 功能说明:
+ *
+ * 调用说明:
+ * @prop  {String}        tilte                  汽包框名字
+ * @prop  {Array}         formList               表单列表数据（格式：[{ value: '', namec: '孔编码:', colname: 'holecode' }]）
+ * @prop  {Array}         btnList                表单列表数据（格式：[{ name: '详细信息', iconClass: 'cx-fi ic-service', color: '#467cbe', click: this.lookDetail }]）
+ *
+ * 事件说明:
+ * @event 事件名             参数解构                        事件和参数说明
+ *
+ */
+
+/**
+ * 维护历史:
+ * 修改时间  人员      说明
+ */
+export default {
+  data()
+  {
+    return {
+    }
+  },
+  props: {
+    title: { type: String, default: '' },
+    formList: { type: Array, default: () => [] },
+    btnList: { type: Array, default: () => [] }
+  },
+  created()
+  {
+    
+  },
+  methods: {
+   
+    // 关闭属性查看弹窗
+    closeClick()
+    {
+      if (this.closeEvent)
+      {
+        delete window.popups
+        this.closeEvent()
+      }
+    }
+  }
+}
+</script>

package/src/plugins/zbcxCesium/pub/LoadGeojson.js

@@ -0,0 +1,44 @@
+
+class LoadGeojson
+{
+  /**
+   * 加载geojson
+   * @param {Object} viewer                 cesium.viewer
+   * @param {Object} params                 额外参数
+   * @param {String} params.id              图层唯一标识
+   * @param {String} params.style           图层默认样式，参考cxe
+   * @param {String} params.callback        回调函数，参数为layer
+   */
+  static async loadGeojson(viewer, params)
+  {
+    // let WebProj = new cxe.WebProj()
+    // Cesium.GeoJsonDataSource.crsNames[
+    //   'urn:ogc:def:crs:' + params.epsg
+    // ] = Cesium.GeoJsonDataSource.crsNames[params.epsg] = function(coordinates)
+    // {
+    //   const fromProj = params.epsg
+    //   const toProj = `EPSG:4326`
+    //   const x = coordinates[0]
+    //   const y = coordinates[1]
+    
+    //   const newCoordinates = WebProj.transform(fromProj, toProj, [x, y])
+    //   return Cesium.Cartesian3.fromDegrees(newCoordinates[0], newCoordinates[1], 500)
+    // }
+    // 添加点图层
+    if (params && params.url && params.url.crs)
+      delete params.url.crs
+    let id = params.id || Cesium.createGuid()
+    let layer = new cxe.GeoJsonLayer(id, params.url, params.style)
+    layer.setStyle({
+      name: id,
+      clampToGround: true
+    })
+    if (params.callback) params.callback(layer)
+    viewer.layers.addLayer(layer)
+    viewer.scene.globe.depthTestAgainstTerrain = false
+    if (!params.noFly)
+      viewer.flyTo(layer)
+    return layer
+  }
+}
+export default LoadGeojson

package/src/plugins/zbcxCesium/pub/LoadModel.js

@@ -0,0 +1,128 @@
+/**
+ * 类-加载模型，使用cxe
+ */
+
+const typeTileset = '3dtiles'
+const typeGltf = 'gltf'
+
+class LoadModel
+{
+  /**
+   * 加载模型
+   * @param     {Object}      modelInfo                   加载模型相关参数。
+   * @param     {Number}      modelInfo.maptype           模型格式：3dtiles/gltf。
+   * @param     {String}      modelInfo.url               模型的路径。
+   * @param     {Boolean}     show                        是否显示，默认true。
+   * @param     {String}      layerId                     tiles图的id,默认自动生成一个唯一id。
+   * @param     {Object}      extras                      附带属性。
+   */
+  static loadModel(Viewer, modelInfo = {}, node)
+  {
+    // 必须传模型的路径、类型
+    if (!modelInfo.url && !modelInfo.maptype)
+      return false
+    switch (modelInfo.maptype)
+    {
+    case typeTileset:
+      this.loadTileset(Viewer, modelInfo, node)
+      break
+    case typeGltf:
+      this.loadGltf(Viewer, modelInfo, node)
+      break
+    }
+  }
+
+  /**
+   * 加载3dtiles模型
+   * @param {Object} modelInfo 模型信息
+   */
+  static async loadTileset(Viewer, modelInfo, node)
+  {
+    let param = modelInfo.params
+    let tile = new cxe.TilesetLayer(modelInfo.name)
+    Viewer.layers.addLayer(tile)
+    tile.att = { ...modelInfo }
+    let tileset = new cxe.Tileset(modelInfo.url)
+    tile.addOverlay(tileset)
+    
+    let _Tileset = await tileset._delegate
+    this.tilesetTransform(_Tileset, param)
+    _Tileset.name = modelInfo.name
+    _Tileset.namec = modelInfo.namec
+    // cx.events.publish('tilesetLoad', { tileset, modelInfo, node })
+    
+    Viewer.flyTo(tileset)
+  }
+
+  /**
+   * 对3dtiles模型进行矩阵变换
+   * @param {Object} tileset
+   * @param {Object} param
+   */
+  static tilesetTransform(tileset, param)
+  {
+    let mat
+
+    // center中心点,格式：{"center":{"lng":119.18,"lat":34.57,"height":0}}，就做矩阵变换到目标中心点。
+    if (param && param.center)
+    {
+      let initialPosition = Cesium.Cartesian3.fromDegrees(param.center.lng, param.center.lat, param.center.height)  // 经纬度坐标转化为笛卡尔坐标
+      mat = Cesium.Transforms.eastNorthUpToFixedFrame(initialPosition)
+    }
+
+    // offset平移，格式为{"offset":{"x":1000,"y":0,"z":0}}
+    if (param && param.offset)
+    {
+      let offset = param.offset
+      let transition = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(offset.x, offset.y, offset.z))
+      if (!mat)
+        mat = tileset._root.transform
+      Cesium.Matrix4.multiply(mat, transition, mat)
+    }
+
+    // rotate旋转，格式为{"rotate":{"x":-90,"y":0,"z":0}}
+    if (param && param.rotate)
+    {
+      if (!mat)
+        mat = tileset._root.transform
+      let rotate = param.rotate
+      let rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotate.x)))  // 倾斜沿x轴翻转
+      Cesium.Matrix4.multiply(mat, rotationX, mat)
+      let rotationY = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(rotate.y)))  // 倾斜沿y轴翻转
+      Cesium.Matrix4.multiply(mat, rotationY, mat)
+      let rotationZ = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rotate.z)))  // 倾斜沿z轴翻转
+      Cesium.Matrix4.multiply(mat, rotationZ, mat)
+    }
+
+    // scale缩放，格式为{"scale":{"x":-90,"y":0,"z":0}}
+    if (param && param.scale)
+    {
+      if (!mat)
+        mat = tileset._root.transform
+      let scale = param.scale
+      let scalem = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(scale.x, scale.y, scale.z))
+      Cesium.Matrix4.multiply(param.root.transform, scalem, param.root.transform)
+    }
+
+    // 倾斜模型设置矩阵变化，放在正确位置
+    if (mat)
+      tileset._root.transform = mat
+  }
+
+  /**
+   * @todo  有待完善
+   * 加载GLtf模型
+   * @param {Object} modelInfo 模型信息
+   * @param {Object} modelInfo.center {lng: 109.16161601119238, lat: 18.355172379996702, alt: 0}
+   */
+  static loadGltf(Viewer, modelInfo)
+  {
+    let gltfLayer = new cxe.VectorLayer(typeGltf)
+    Viewer.layers.addLayer(gltfLayer)
+
+    let gltfModel = new cxe.Model(modelInfo.params.center, modelInfo.url)
+    gltfLayer.addOverlay(gltfModel)
+    Viewer.flyTo(gltfModel)
+  }
+}
+export default LoadModel

package/src/plugins/zbcxCesium/pub/LoadOgc.js

@@ -0,0 +1,226 @@
+/**
+ * 类-加载OGC服务，使用cxe
+ */
+import axios from 'axios'
+import X2js from 'x2js'
+const x2js = new X2js()
+const typeWms = 'wms'
+const typeWmts = 'wmts'
+class LoadOgc
+{
+  /**
+   * 加载ogc服务，根据maptype进行类型
+   * @param {Object} Viewer         viewer
+   * @param {Object} ogcData        服务信息
+   * @param {String} ogcData.url    服务地址
+   * @param {String} ogcData.maptype    服务类型
+   * @param {String} ogcData.url    服务地址
+   * @param {String} ogcData.url    服务地址
+   * @returns layer
+   */
+  static loadOgc(Viewer, ogcData)
+  {
+    let layer
+    switch (ogcData.maptype)
+    {
+    case typeWms:
+      layer = this.loadWms(ogcData)
+      break
+    case typeWmts:
+      layer = this.loadWmts(ogcData)
+      break
+    }
+
+    Viewer.layers.addImageryLayer(layer)
+    layer.att = ogcData
+    layer.att._bid = layer._bid
+    if (ogcData.params)
+      this.flyLayer(Viewer, ogcData)
+    else
+    {
+      switch (ogcData.maptype)
+      {
+      case typeWms:
+        layer = this.locateMapLayer(layer, Viewer)
+        break
+      }
+    }
+    return layer
+  }
+
+  // wms定位
+  static locateMapLayer(layerObj, viewer)
+  {
+    // 图层定位
+    this.getWmsGetCapabilities(layerObj._att.url).then(res =>
+    {
+      if (res.WFS_Capabilities.FeatureTypeList.FeatureType.length > 0)
+      {
+        res.WFS_Capabilities.FeatureTypeList.FeatureType.forEach(item =>
+        {
+          if (item.Name === layerObj._att.layer)
+          {
+            let poi = item.WGS84BoundingBox.LowerCorner.__text.split(' ')
+            let poi1 = item.WGS84BoundingBox.UpperCorner.__text.split(' ')
+            let point1 = Cesium.Cartesian3.fromDegrees(Number(poi[0]), Number(poi[1])) // New York
+            let point2 = Cesium.Cartesian3.fromDegrees(Number(poi1[0]), Number(poi1[1])) // San Francisco
+             
+            // 计算这两个点的包围盒（BoundingSphere）
+            let boundingSphere = Cesium.BoundingSphere.fromPoints([point1, point2])
+             
+            // 使用flyTo移动视角
+            viewer.camera.flyToBoundingSphere(boundingSphere, {
+              duration: 1.0 // 动画持续时间，单位秒
+            })
+          }
+        })
+      }
+      else
+      {
+        let dataLayer = res.WMS_Capabilities.Capability.Layer.Layer
+        if (dataLayer.Name === layerObj.layer)
+        {
+          let flyData = dataLayer.BoundingBox.find(items => items._CRS === 'CRS:84')
+          if (flyData)
+          {
+            viewer.camera.flyTo({
+              destination: new Cesium.Rectangle.fromDegrees(parseFloat(flyData._minx) - 0.0059, flyData._miny, flyData._maxx, flyData._maxy)
+            })
+          }
+        }
+      }
+    })
+  }
+
+  /**
+     * 获取有效的url地址，必须以'/WMSServer'结尾。
+     * @method
+     * @param   {String}    url     url地址
+     * @returns {String}    构造好的有效的url地址
+     */
+  static getUseUrl(url)
+  {
+    // 校验url是不是以'/WMSServer'结尾，不是的话拼接上
+    if (url.split('/').pop() === 'WMSServer')
+      return url.replace('/rest', '')
+    return `${url.replace('/rest', '')}`
+  }
+
+  /**
+     * 查询xml的能力文档
+     * @param {String}    url       wms的url
+     * @returns Promises
+     */
+  static getWmsGetCapabilities(url)
+  {
+    let str = '?request=GetCapabilities&service=WFS'
+    let _url = this.getUseUrl(url)
+    return new Promise((resolve, reject) =>
+    {
+      axios.get(_url + str).then(ret =>
+      {
+        if (ret.status === 200)
+          resolve(this.xmlToJson(ret.data))
+      }).catch(reject)
+    })
+  }
+
+  // xml文档解析成对象
+  static xmlToJson(xml)
+  {
+    let data = x2js.xml2js(xml)
+    return data
+  }
+
+  // 根据能力文档取到具体layer的信息
+  async getWmsLayerByXml(url, name, isWms)
+  {
+    let xmlData = await this.getWmsGetCapabilities(url)
+    if (isWms && isWms === 'wms')
+    {
+      let layer = Number(name) + 1
+      name = xmlData.WMS_Capabilities.Capability.Layer.Layer.length ? (xmlData.WMS_Capabilities.Capability.Layer.Layer.length - layer).toString() : '0'
+    }
+    return xmlData.WMS_Capabilities.Capability.Layer.Layer.length ? xmlData.WMS_Capabilities.Capability.Layer.Layer.find(layer => layer.Name === name) : xmlData.WMS_Capabilities.Capability.Layer.Layer
+  }
+
+
+  /**
+   * 加载wms服务
+   * @param {Object} wms    wms数据对象
+   * @returns layer.id
+   */
+  static loadWms(wms)
+  {
+    let opt = this.getOpts(wms)
+    opt.parameters = {
+      service: 'WMS',
+      format: wms.format,
+      transparent: true
+    }
+    let layer = new cxe.ImageryLayer(wms.maptype, opt)
+    return layer
+  }
+
+  /**
+   * 加载wmts服务
+   * @param {Object} wmts
+   * @returns layer.id
+   */
+  static loadWmts(wmts)
+  {
+    let opt = this.getOpts(wmts)
+    let layer = new cxe.ImageryLayer(typeWmts, opt)
+    return layer
+  }
+
+  /**
+   * 转换参数，根据数据库mapservice字段来构造cxe添加服务需要的参数
+   * @param {object} ogcData  转换服务参数
+   */
+  static getOpts(ogcData)
+  {
+    let opts = {
+      url: ogcData.url,
+      layer: ogcData.layer,
+      layers: ogcData.layer,
+      format: ogcData.format
+    }
+    if (ogcData.params)
+    {
+      let { style, rectangle, tilingScheme, tileMatrixSetID, tileMatrixLabels } = ogcData.params
+      if (style) opts.style = style
+      if (rectangle) opts.rectangle = this.getRectangle(ogcData.params.rectangle)
+      if (tilingScheme) opts.tilingScheme = tilingScheme
+      if (tileMatrixSetID) opts.tileMatrixSetID = tileMatrixSetID
+      if (tileMatrixLabels) opts.tileMatrixLabels = tileMatrixLabels
+    }
+    return opts
+  }
+
+  /**
+   * 定位图层
+   * @param {Object} Viewer viewer
+   * @param {Object} ogcData 服务参数对象 位置(west, south, east, north,都为经纬度)
+   */
+  static flyLayer(Viewer, ogcData)
+  {
+    let params
+    if (ogcData.params.rectangle) params = ogcData.params
+    else if (ogcData.params && typeof ogcData.params === 'string')
+      params = JSON.parse(ogcData.params)
+    if (params && params.rectangle)
+    {
+      let rectangle = this.getRectangle(params.rectangle)
+      Viewer.camera.flyTo({ destination: rectangle })
+    }
+  }
+
+  static getRectangle(rectangle)
+  {
+    let { west, south, east, north } = rectangle
+    let rectangle_ = Cesium.Rectangle.fromDegrees(west, south, east, north, new Cesium.Rectangle())
+    return rectangle_
+  }
+}
+export default LoadOgc