zbcx_ckyc 1.0.0

package/src/plugins/app/com/CesiumTool.js

@@ -0,0 +1,730 @@
+
+/**
+ * cesium 工具类整理 基于cxe
+ * @class      CesiumTool
+ * @author     Guo KangLun
+ * @desc       兼容cesium原生方法
+ */
+class CesiumTool
+{
+  constructor(viewer, layers)
+  {
+    this.viewer = viewer
+    this.addLayer(layers)
+    // select 要素
+    this.pick = null
+    // 闪烁数组集合
+    this.blinkingBillboards = []
+  }
+
+  /**
+   * 地球配置项
+   */
+  setOptions(option)
+  {
+    this.viewer.setOptions(option)
+  }
+
+  /**
+   * 添加需要绘制的图层
+   * @param {Array} layers 实例化时传入的所有图层
+   */
+  addLayer(layers)
+  {
+    if (layers.includes('VectorLayer'))
+    {
+      // 矢量图层
+      this.layer = new cxe.VectorLayer('layer')
+      this.viewer.layers.addLayer(this.layer)
+    }
+    if (layers.includes('HtmlLayer'))
+    {
+      // 矢量图层
+      this.layer = new cxe.HtmlLayer('layer')
+      this.viewer.layers.addLayer(this.layer)
+    }
+    if (layers.includes('ClusterLayer'))
+    {
+      // 聚合图层 circle / cluster
+      this.clusterLayer = new cxe.ClusterLayer('layer', {
+        style: 'circle',
+        gradient: {
+          // 0.0001: Cesium.Color.WHITE,
+          0.001: Cesium.Color.fromCssColorString('#69ff77'),
+          0.01: Cesium.Color.fromCssColorString('#69ff77'),
+          0.1: Cesium.Color.fromCssColorString('#69ff77')
+        }
+      })
+      this.viewer.layers.addLayer(this.clusterLayer)
+    }
+    if (layers.includes('TilesetLayer'))
+    {
+      // 3dtiles瓦片图层
+      this.tile = new cxe.TilesetLayer('3dtiles')
+      this.viewer.layers.addLayer(this.tile)
+    }
+  }
+
+  /**
+   * 要素绘制
+   * @param {Array}   coors       坐标数组
+   * @param {Number}  type        绘制类型 【1点】【2线】【3面】【6广告牌】
+   * @param {Boolean} clearable   默认清空绘制
+   * @param {Object}  opts        其他参数
+   */
+  addVector(coors, type, clearable = true, flytoLayer = true, opts = {})
+  {
+    if (clearable)
+      this.clear()
+    this.draw(coors, type, opts)
+    if (flytoLayer)
+      this.flyTo(this.layer)
+    if (!this.pick)
+      this.pickVector()
+  }
+
+  draw(coors, type, opts)
+  {
+    if (type === 1)
+      this.addPoint(coors, opts)
+    else if (type === 2)
+      this.addLine(coors, opts)
+    else if (type === 3)
+      this.addPol(coors, opts)
+    else if (type === 6)
+      this.addBillboard(coors, opts)
+  }
+
+  /**
+   * 添加聚合图层
+   */
+  addCluster(coors, clear = true, flytoLayer = true)
+  {
+    if (clear)
+      this.clear()
+    this.clusterLayer.attr = { name: '聚合图层' }
+    let boards = []
+    coors.forEach(item =>
+    {
+      let { lng, lat, alt, img = 'tpyx/cxe_demo/examples/images/icon/camera.png', size = [48, 48] } = item
+      let pol = new cxe.Billboard({ lng, lat, alt }, img)
+      pol.size = size
+      pol.att = item
+      boards.push(pol)
+    })
+    this.clusterLayer.addOverlays(boards)
+    if (flytoLayer)
+      this.flyTo(this.clusterLayer)
+    if (!this.pick)
+      this.pickVector()
+  }
+
+  /**
+   * 3dtiles 加载
+   */
+  addTile(obj)
+  {
+    const { url, name } = obj
+    // this.clear()
+    // let tileUrl = 'svr/uploadfile/static/model/5108021广元市供排水有限公司上西水厂水源地/ph_geomodel_D13A0913-29F0-4781-AED7-1F8450B0D7E1.json'
+    let tileset = new cxe.Tileset(url)
+    tileset.attr = { name }
+    this.tile.addOverlay(tileset)
+    this.viewer.flyTo(tileset)
+    // if (!this.pick)
+    //   this.pickVector()
+  }
+
+  /**
+   * 批量添加点要素
+   * @param {*} coors 坐标数组
+   */
+  addPoint(coors, opts)
+  {
+    let points = []
+    coors.forEach(coor =>
+    {
+      let { lng, lat, style = {} } = coor
+      let point = new cxe.Point({ lng, lat })
+      point.setStyle({ pixelSize: 12, color: Cesium.Color.BLUE, outlineColor: Cesium.Color.BLUE, outlineWidth: 2, ...style })
+      // 业务属性
+      point.att = coor
+      if (opts.layerflag)
+        point.att.layerflag = opts.layerflag
+      points.push(point)
+    })
+    this.layer.addOverlays(points)
+  }
+
+  /**
+   * 单个添加点要素   线面等其他要素同样支持单个添加，实际可同步到批量添加里
+   * @param {*} obj
+   */
+  addPointOne(obj)
+  {
+    let { lng, lat, style = {} } = obj
+    let point = new cxe.Point({ lng, lat })
+    point.setStyle({ pixelSize: 10, color: Cesium.Color.RED, outlineColor: Cesium.Color.BLUE, outlineWidth: 1, ...style })
+    point.att = { name: 'gkl' }
+    this.layer.addOverlay(point)
+  }
+
+  /**
+   * 批量添加线要素
+   * @param {Array}  coors          坐标数组
+   * @param {String} jwd            坐标串，如： -75, 35; -125, 35
+   * @param {Object} style          扩展样式
+   * @param {Number} lineWidth      线宽
+   * @param {String} lineColor      线色
+   * @param {String} lineType       线型， solid：实线；dashed: 虚线
+   */
+  addLine(coors, opts)
+  {
+    let polylines = []
+    coors.forEach(item =>
+    {
+      let { jwd, style = {}, lineWidth = 4, lineColor = 'rgb(0, 0, 255)', lineType = 'solid' } = item
+      let polyline = new cxe.Polyline(jwd)
+      polyline.setStyle({
+        width: lineWidth,
+        material: lineType === 'solid'
+          ? Cesium.Color.fromCssColorString(lineColor)
+          : new Cesium.PolylineDashMaterialProperty({
+            color: Cesium.Color.fromCssColorString(lineColor)
+          }),
+        clampToGround: true,
+        ...style
+      })
+      polyline.att = item
+      if (opts.layerflag)
+        polyline.att.layerflag = opts.layerflag
+      polylines.push(polyline)
+    })
+    this.layer.addOverlays(polylines)
+  }
+
+  /**
+   * 添加面要素
+   * @param {*} coors 坐标数组
+   */
+  addPol(coors, opts)
+  {
+    let polygons = []
+    coors.forEach(item =>
+    {
+      let { jwd, style = {}, fillColor = 'rgb(0, 0, 255)', outline = true, outlineWidth = 10, outlineColor = Cesium.Color.BLACK } = item
+      let pol = new cxe.Polygon(jwd)
+      pol.setStyle({ material: Cesium.Color.fromCssColorString(fillColor), outline, outlineWidth, outlineColor, ...style })
+      pol.att = item
+      if (pol.layerflag)
+        pol.att.layerflag = opts.layerflag
+      // this.layer.addOverlay(pol)
+      polygons.push(pol)
+    })
+    this.layer.addOverlays(polygons)
+  }
+
+  /**
+   * 空洞
+   * @desc cxe 添加空洞有点问题，改用原生
+   * @more http://cesium.xin/cesium/cn/Documentation1.72/PolygonGraphics.html#.ConstructorOptions
+   */
+  addHole(coors)
+  {
+    this.layer.clear()
+    let { holes, pol } = coors
+    holes = holes.map(item => ({ positions: Cesium.Cartesian3.fromDegreesArray(item) }))
+    let positions = Cesium.Cartesian3.fromDegreesArray(pol)
+    let entity = this.viewer.entities.add({
+      polygon: { hierarchy: { positions, holes }, material: Cesium.Color.fromCssColorString('rgb(166, 193, 238, .5)') }
+    })
+    this.viewer.flyTo(entity)
+  }
+
+  /**
+   * 绘制注记
+   * @param {*} coors 坐标数组
+   */
+  addLabel(coors, opts = { })
+  {
+    coors.forEach(item =>
+    {
+      let { lng, lat, label = '', labelSize = '16px', labelcolor = '#fff', pixelOffset = { x: 0, y: -30 } } = item
+      let pol = new cxe.Label({ lng, lat }, label)
+      pol.setStyle({ fillColor: Cesium.Color.fromCssColorString(labelcolor), font: labelSize, pixelOffset, heightReference: 1 })
+      pol.att = item
+      if (opts.layerflag)
+        pol.att.layerflag = opts.layerflag
+      this.layer.addOverlay(pol)
+    })
+  }
+
+  /**
+   * 添加广告牌
+   * @param {Array}     coors     坐标数组
+   * @param {String}    img       图标地址
+   * @param {String}    imgColor  图片颜色，默认图片建议白色
+   */
+  addBillboard(coors, opts)
+  {
+    let boards = []
+    coors.forEach(item =>
+    {
+      // 经测试 png 可以修改颜色
+      let { lng, lat, alt, img = 'static/img/svg/test.png', size = [36, 36], imgColor = 'rgb(255, 0, 0)', rotation = Cesium.Math.toRadians(90) } = item
+      let pol = new cxe.Billboard({ lng, lat, alt }, img)
+      pol.size = size
+      pol.att = item
+      if (item.imgColor)
+        pol.setStyle({ color: Cesium.Color.fromCssColorString(imgColor), heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, alignedAxis: Cesium.Cartesian3.UNIT_Z })
+      else
+        pol.setStyle({ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND })
+      if (opts.layerflag)
+        pol.att.layerflag = opts.layerflag
+
+      // 不要旋转广告牌
+      if (opts.pictop)
+        pol.setStyle({ rotation: Cesium.Math.toRadians(0) })
+
+      boards.push(pol)
+    })
+    this.layer.addOverlays(boards)
+  }
+
+  /**
+   * 广告牌闪烁效果
+   * @param {*} overlay 广告牌overlay
+   * @returns
+   */
+  createOnTick(overlay)
+  {
+    let alpha = 1.0
+    let fading = true
+    return function(clock)
+    {
+      if (fading)
+      {
+        alpha -= 0.05
+        if (alpha <= 0.0)
+        {
+          alpha = 0.0
+          fading = false
+        }
+      }
+      else
+      {
+        alpha += 0.05
+        if (alpha >= 1.0)
+        {
+          alpha = 1.0
+          fading = true
+        }
+      }
+      overlay.setStyle({ color: new Cesium.Color(1.0, 1.0, 1.0, alpha), heightReference: 1 })
+    }
+  }
+
+  /**
+   * 经纬度转度分秒
+   * @param {*} decimal 34.56789
+   * @returns 34° 34' 4.40"
+   */
+  decimalToDMS(decimal)
+  {
+    const degrees = Math.floor(decimal) // 度
+    const minutesFloat = (decimal - degrees) * 60
+    const minutes = Math.floor(minutesFloat) // 分
+    const seconds = (minutesFloat - minutes) * 60 // 秒
+
+    return `${degrees}° ${minutes}' ${seconds.toFixed(2)}"`
+  }
+
+  addBlinking(overlay)
+  {
+    this.clearBlinking()
+    let onTick = this.createOnTick(overlay)
+    this.viewer.clock.onTick.addEventListener(onTick)
+    this.blinkingBillboards.push({
+      billboard: overlay,
+      onTick: onTick
+    })
+  }
+
+  clearBlinking()
+  {
+    this.blinkingBillboards.forEach(item =>
+    {
+      this.viewer.clock.onTick.removeEventListener(item.onTick)
+      item.billboard.setStyle({ color: new Cesium.Color(1.0, 1.0, 1.0, 1.0), heightReference: 1 })
+    })
+    this.blinkingBillboards = [] // 清空数组
+  }
+
+  /**
+   * 添加HTML
+   * @param {*} coors 坐标数组
+   */
+  addHtml(coors)
+  {
+    let boards = []
+    coors.forEach(item =>
+    {
+      let { lng, lat } = item
+      let pol = new cxe.DynamicHtml({ lng, lat }, `<i class="iconfont ic-tuceng" style="font-size: 25px; color: red; background-color: transparent; border: none"></i>`)
+      // let pol = new cxe.DynamicHtml({ lng, lat }, `<div style="background:rgba(123,234,122,0.5)">测试</div>`)
+      pol.att = item
+      boards.push(pol)
+    })
+    this.layer.addOverlays(boards)
+  }
+
+  /**
+   * 选择要素
+   */
+  pickVector()
+  {
+    this.pick && this.pick.sleep()
+    this.pick = new cxe.Select(this.viewer, {
+      selected: pick =>
+      {
+        if (pick.overlay)
+          console.log()
+      }
+    })
+    this.pick.start()
+  }
+
+  /**
+   * 获取所有要素
+   * @returns array
+   */
+  allOverlays()
+  {
+    // return this.viewer.layers.getLayers()[0].getOverlays()
+    return this.layer.getOverlays()
+  }
+
+  allTiles()
+  {
+    // return this.viewer.layers.getLayers()[0].getOverlays()
+    return this.tile.getOverlays()
+  }
+
+  /**
+   * 通过业务id获取要素
+   * @param {*} id  业务id
+   * @returns       获取的要素
+   */
+  getOverlayById(id)
+  {
+    // return this.viewer.layers.getLayers()[0].getOverlayById(id)
+    return this.layer.getOverlayById(id)
+  }
+
+  /**
+   * 通过属性获取要素
+   * @param    {*} name         属性名
+   * @param    {*} value        属性值
+   * @returns  {Array}          获取的要素
+   */
+  getOverlayByAtt(name, value)
+  {
+    return this.layer.getOverlaysByAtt(name, value)
+  }
+
+  /**
+   * 删除要素
+   * @param {*} overlay 要素
+   */
+  removeVector(overlay)
+  {
+    this.layer.removeOverlay(overlay)
+  }
+
+  /**
+   * 遍历要素
+   */
+  eachOverlay()
+  {
+    this.layer.eachOverlay(item =>
+    {
+      console.log('do something')
+    })
+  }
+
+  /**
+   * 清空图层
+   */
+  clear()
+  {
+    if (this.layer)
+      this.layer.clear()
+    if (this.clusterLayer)
+      this.clusterLayer.clear()
+    if (this.tile)
+      this.tile.clear()
+  }
+
+  clearTiels()
+  {
+    if (this.tile)
+      this.tile.clear()
+  }
+
+  /**
+   * 清空影像图层
+   */
+  clearImageLayer()
+  {
+    this.viewer.imageryLayers.removeAll()
+  }
+
+  /**
+   * 飞向目标图层
+   * @param {*} layer     目标图层
+   * @param {*} duration  飞行时间  单位：秒
+   */
+  flyTo(layer, duration)
+  {
+    this.zoomTo(layer)
+  }
+
+  /**
+   * 缩放到目标位置
+   * @param {*} layer 目标图层
+   */
+  zoomTo(layer)
+  {
+    this.viewer.zoomTo(layer)
+  }
+
+  /**
+   * 缩放到具体位置
+   * @param {Object} position            位置信息 (lng:必填,lat:必填,alt:必填,heading:0,pitch:-90,roll:0)
+   * @param {Option} completeCallback    缩放完成后的回调
+   */
+  zoomToPos(position, completeCallback)
+  {
+    let { lng, lat, alt } = position
+    this.viewer.zoomToPos({ lng, lat, alt }, completeCallback)
+  }
+
+  /**
+   * 缩放到所有要素中心点
+   */
+  zoomToAllOverlaysCenter(alt = 1400)
+  {
+    let [allLon, allLat, positions] = [[], [], []]
+    this.allOverlays().forEach(i =>
+    {
+      if (i.type === 'polyline')
+      {
+        i.att.jwd.split(';').forEach(j =>
+        {
+          let [lon, lat] = j.split(',')
+          allLon.push(lon * 1)
+          allLat.push(lat * 1)
+          positions.push({ longitude: lon * 1, latitude: lat * 1 })
+        }
+        )
+      }
+      else if (i.type === 'billboard')
+      {
+        let { lng, lat } = i.att
+        allLon.push(lng * 1)
+        allLat.push(lat * 1)
+        positions.push({ longitude: lng * 1, latitude: lat * 1 })
+      }
+    }
+    )
+    let maxlon = Math.max.apply(null, allLon.filter(i => i))
+    let minlon = Math.min.apply(null, allLon.filter(i => i))
+    let maxlat = Math.max.apply(null, allLat.filter(i => i))
+    let minlat = Math.min.apply(null, allLat.filter(i => i))
+    let centerX = (maxlon + minlon) / 2
+    let centerY = (maxlat + minlat) / 2
+    this.zoomToPos({ lng: centerX, lat: centerY, alt: this.getSuitableHeight(positions) })
+  }
+
+  getSuitableHeight(positions)
+  {
+    let arr = positions.filter(i => i.longitude && i.latitude)
+    return this.setCameraForPositions(this.viewer, arr)
+  }
+
+  setCameraForPositions(viewer, positions)
+  {
+    // 将经纬度数组转换为 Cesium.Cartesian3 坐标数组
+    const cartesianPositions = positions.map(function(position)
+    {
+      return Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude)
+    })
+    
+    // 计算经纬度外包矩形
+    const rectangle = Cesium.Rectangle.fromCartesianArray(cartesianPositions)
+    
+    // 计算包围盒的对角线长度（在笛卡尔坐标系中）
+    const northWest = Cesium.Cartesian3.fromRadians(rectangle.west, rectangle.north)
+    const southEast = Cesium.Cartesian3.fromRadians(rectangle.east, rectangle.south)
+    const diagonal = Cesium.Cartesian3.distance(northWest, southEast)
+    
+    // 设置一个高度因子，确保相机可以看到所有点
+    const heightFactor = 3 // 根据需求调整
+    const cameraHeight = diagonal * heightFactor
+    return cameraHeight
+  }
+
+  /**
+   * 飞到具体位置
+   * @param {Object} position            位置信息 (lng:必填,lat:必填,alt:必填,heading:0,pitch:-90,roll:0)
+   * @param {Option} completeCallback    飞完之后触发的回调
+   * @param {Option} duration            飞行时间 单位：秒
+   */
+  flyToPos(position, completeCallback, duration)
+  {
+    let { lng, lat, alt } = position
+    this.viewer.flyToPos({ lng, lat, alt }, completeCallback, duration)
+  }
+
+
+  /**
+   * 设置相机高度
+   */
+  setCameraHeight(height)
+  {
+    let eye = this.viewer.camera.positionCartographic
+    this.viewer.camera.setView({ destination: Cesium.Cartesian3.fromRadians(eye.longitude, eye.latitude, height ?? eye.height) })
+  }
+
+  /**
+   * 获取相机当前高度
+   */
+  getCurrentHeight()
+  {
+    return this.viewer.camera.positionCartographic.height
+  }
+
+  /**
+   * 弧度转经纬度
+   */
+  radToLonLat()
+  {
+    let eye = this.viewer.camera.positionCartographic
+    let lng = Cesium.Math.toDegrees(eye.longitude)
+    let lat = Cesium.Math.toDegrees(eye.latitude)
+    let height = eye.height
+    return { lng, lat, height }
+  }
+
+  /**
+   * 屏幕坐标转经纬度
+   */
+  cartesian2ToLonLat(Cartesian2)
+  {
+    // 屏幕坐标转为世界坐标
+    let cartesian = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(Cartesian2), this.viewer.scene)
+    // 世界坐标转换为弧度
+    let ellipsoid = this.viewer.scene.globe.ellipsoid
+    let cartographic = ellipsoid.cartesianToCartographic(cartesian)
+    // 弧度转换为经纬度
+    let lon = Cesium.Math.toDegrees(cartographic.longitude)
+    let lat = Cesium.Math.toDegrees(cartographic.latitude)
+    return { lon, lat }
+  }
+
+  /**
+   * 垂直视角
+   */
+  verticalView()
+  {
+    let { lon, lat } = this.screenCenterLonLat()
+    this.viewer.flyToPos({ lng: lon, lat: lat, alt: this.getCurrentHeight() }, () =>
+    {}, 0)
+  }
+
+  /**
+   * 判断当前视角是否为垂直视角
+   * @returns true false
+   */
+  isVerticalView()
+  {
+    // 获取相机的pitch角度
+    let pitch = Cesium.Math.toDegrees(this.viewer.camera.pitch)
+    
+    // 检查pitch是否接近-90度
+    return Math.abs(pitch + 90) < 1 // 允许一些误差
+  }
+
+  /**
+   * 屏幕中心点坐标
+   * @returns { lon, lat }
+   */
+  screenCenterLonLat()
+  {
+    let centerResult = this.viewer.camera.pickEllipsoid(
+      new Cesium.Cartesian2(
+        this.viewer.canvas.clientWidth / 2,
+        this.viewer.canvas.clientHeight / 2
+      )
+    )
+    // 24-11-01 zgh  如果取不到中心位置，则用相机位置
+    if (!centerResult)
+      centerResult = this.viewer.camera.position
+    let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult)
+    let lon = (curPosition.longitude * 180) / Math.PI
+    let lat = (curPosition.latitude * 180) / Math.PI
+    return { lon, lat }
+  }
+
+  /**
+   * 加载在线地形
+   */
+  loadTerrian()
+  {
+    let terrainLayer = new cxe.TerrainLayer('t_xyz', {
+      url: 'hbsdxqp'
+    })
+    this.viewer.layers.addTerrain(terrainLayer)
+  }
+
+  /**
+   * 清除地形
+   */
+  clearTreeian()
+  {
+    let terrainLayer = new cxe.TerrainLayer('t_none', {})
+    this.viewer.layers.addTerrain(terrainLayer)
+  }
+
+  /**
+ * 计算点、线、面的中心点经纬度
+ * @param {GeoJSON.Feature} feature - 点、线或面的 GeoJSON 要素
+ * @returns {Array<number>} - 中心点的经纬度数组，格式为 [经度, 纬度]
+ */
+  getCentroidCoordinates(feature)
+  {
+    let centroidFeature
+    if (feature.type === 'Point')
+      centroidFeature = feature
+    else
+      centroidFeature = turf.centroid(feature)
+    return centroidFeature.geometry.coordinates
+  }
+
+  /**
+ * cxe 绘制 线、面 需要的坐标格式
+ * @param {Array} coor 坐标数组   [[112, 33], [112, 34], [113, 33]]
+ * @returns '112, 33; 112, 34; 113, 33'
+ */
+  getCxeCoor(coor)
+  {
+    let jwd = ''
+    coor.forEach(i =>
+    {
+      jwd += i.join(',') + ';'
+    })
+    return jwd
+  }
+}
+
+export default CesiumTool