zbcx_ckyc 1.0.0

package/src/plugins/zbcxCesium/coms/GraDrawBarWgt.vue

@@ -0,0 +1,176 @@
+<style lang="scss" scoped>
+  .iconimg{margin-right: 0.05rem;}
+  
+</style>
+
+<template>
+  <div class="drawBarWgt">
+    <el-tooltip v-for="(item, index) in btnList" :key="index" effect="dark" :content="item.label" placement="top-start">
+      <el-button :size="size" @click="drawGeom(item)">
+        <img :src="item.icon" class="iconimg">
+        <span class="title">{{item.label}}</span>
+      </el-button>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+/**
+ * 组件：绘制图形
+ * 参数说明
+ * @prop    {String}      viewKey         全局变量viewer的key，默认为window.Viewer
+ */
+
+/**
+ * 修改记录:
+ * 2023-03-7 张光辉      增加prop;绘制类型改为常量；drawFinish抽出为方法.
+ */
+
+import * as turf from '@turf/turf'
+
+const Point = 'Point', Polygon = 'Polygon', LineString = 'LineString', Rectangle = 'Rectangle', Circle = 'Circle'
+const Delete = 'Delete'
+export default
+{
+  mixins: [cx.mixin.IFormBase],
+  props:
+  {
+    viewKey: { type: String, default: '' }
+  },
+  data()
+  {
+    return {
+      draw: null,
+      drawLayer: null,
+      nowDraw: null,
+      btnList: [
+        { label: '点', type: Point, geometryType: Point, icon: 'static/img/tool/点.png' },
+        { label: '线', type: LineString, geometryType: LineString, icon: 'static/img/tool/线.png' },
+        { label: '多边形', type: Polygon, geometryType: Polygon, icon: 'static/img/tool/多边形.png' },
+        { label: '拉框', type: Rectangle, geometryType: Polygon, icon: 'static/img/tool/矩形.png' },
+        { label: '画圆', type: Circle, geometryType: Polygon, icon: 'static/img/tool/圆形.png' },
+        { label: '删除', type: Delete, icon: 'static/img/tool/清空.png' }
+      ]
+    }
+  },
+  beforeUnmount()
+  {
+    this.clearDraw()
+  },
+  created()
+  {
+    this.$_viewer = window[this.viewKey] || window.Viewer
+    this.$_viewer.scene.globe.depthTestAgainstTerrain = true
+  },
+  mounted()
+  {
+    this.coordinates = []
+  },
+  methods:
+  {
+    // 图形绘制
+    drawGeom(item)
+    {
+      this.nowDraw = item
+      this.clearDraw()
+      let params = this.setDrawParams(this.maxPos)
+
+      switch (this.nowDraw.type)
+      {
+      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.type === Point)
+        this.coordinates.push(args.graph.position._lng, args.graph.position._lat)
+      else if (this.nowDraw.type === Circle)
+      {
+        let centerPoint = [args.graph.center._lng, args.graph.center._lat]
+        let circle = turf.circle(centerPoint, args.graph.radius, { steps: 5000, units: 'meters', properties: { foo: 'bar' } })
+        this.coordinates.push(circle.geometry.coordinates[0])
+      }
+      else
+      {
+        let arr = []
+        args.graph.positions.forEach(item =>
+        {
+          arr.push([item._lng, item._lat])
+        })
+        if (this.nowDraw.type === Rectangle)
+          arr = this.creatteRectangle({ x: arr[0][0], y: arr[0][1] }, { x: arr[1][0], y: arr[1][1] })
+        else if (this.nowDraw.type === Polygon)
+          arr.push(arr[0])
+            
+        this.coordinates.push(arr)
+      }
+      this.setGeoJson()
+    },
+
+    // 绘制更新的回调：{graph, event, success}
+    drawUpdate(args)
+    {},
+
+    // 创建矩形坐标
+    creatteRectangle(startPosition, endPosition)
+    {
+      let maxx = Math.max(endPosition.x, startPosition.x)
+      let minx = Math.min(endPosition.x, startPosition.x)
+      let maxy = Math.max(endPosition.y, startPosition.y)
+      let miny = Math.min(endPosition.y, startPosition.y)
+      let p1 = { x: minx, y: maxy }
+      let p2 = { x: maxx, y: maxy }
+      let p3 = { x: maxx, y: miny }
+      let p4 = { x: minx, y: miny }
+      return [[p1.x, p1.y], [p2.x, p2.y], [p3.x, p3.y], [p4.x, p4.y], [p1.x, p1.y]]
+    },
+
+    // 构造 GeoJSON 对象
+    setGeoJson()
+    {
+      let geometry =
+      {
+        type: this.nowDraw.geometryType,
+        coordinates: this.coordinates
+      }
+      this.$emit('drawFinish', geometry)
+    },
+
+    // 清除绘制
+    clearDraw()
+    {
+      this.coordinates = []
+      if (this.draw)
+        this.draw.destroy()
+      if (this.drawLayer)
+        this.$_viewer.layers.removeLayer(this.drawLayer)
+      this.$emit('clearDraw')
+    }
+  }
+}
+</script>

package/src/plugins/zbcxCesium/coms/baseMapSwitch/BaseMap.scss

@@ -0,0 +1,42 @@
+$base-map-width: 1rem;
+$base-map-height: 0.98rem;
+$base-map-text-hover-bg: rgba(30, 181, 252, 0.9);
+.base-map{
+  --time: 0.5s;
+  z-index: 3;
+  width: $base-map-width; 
+  height: $base-map-height;
+  padding: 0.15%;
+  border: 0.01rem solid var(--cx-color-border-normal);
+  background-color: var(--cx-color-bg-normal);
+  overflow: hidden;
+  transition: width var(--time) ease-in-out;
+}
+// hover-width变量的值来源于行内style。
+.base-map:hover{
+  width: var(--hover-width);
+  display: flex;align-items:center;justify-content: space-around;
+  .img-box{margin: auto;}
+}
+.img-box{
+  position: relative;
+  width:$base-map-width;
+  height:$base-map-height;
+  display: inline-block;
+  margin: 0 0 0.1rem 0; 
+  cursor: pointer; 
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  .text{background-color: rgba(46,46,46,0.7)}
+}
+.img-box:hover{
+  .text{background-color: $base-map-text-hover-bg}
+}
+.text{
+  position: absolute;
+  bottom: 0;
+  width: $base-map-width;
+  color: var(--cx-color-tint-text);
+  text-align: center;
+}
+

package/src/plugins/zbcxCesium/coms/baseMapSwitch/BaseMap.vue

@@ -0,0 +1,59 @@
+<style lang='scss' scoped>
+@use "./BaseMap.scss";
+
+</style>
+
+<template>
+  <div class="base-map" :style="{'--hover-width': getHoverWidth}">
+    <div
+     class="img-box"
+     :style="{ backgroundImage: `url(${item.backgroundImage})`}"
+     v-for="(item,index) in baseMapArr" :key="index"
+     @click="onClick(item)">
+      <el-checkbox v-model="item.checked" :checked="item.checked" style="height:auto"></el-checkbox>
+      <div class="text">{{item.namec}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+* 组件: 底图切换
+* 参数说明:
+* @prop  {Array}            baseMapArr               图层切换数组
+* @prop  {String}           [item.name]              图层名称
+* @prop  {color}            [item.backgroundImage]   背景图片
+**/
+/**
+ * 修改记录
+ * 2022-05-6      唐朝辉      首次编写
+ * 2022-05-24     张光辉      修改样式，动态计算hover事件的宽度。
+ */
+export default {
+  props: {
+    baseMapArr: { type: Array, default: _ => [] }
+  },
+  data()
+  {
+    return {
+    }
+  },
+  // 计算属性，依赖其他数据数字计算
+  computed:
+  {
+    getHoverWidth()
+    {
+      let len = this.baseMapArr.length
+      return len + len * 0.05 + 0.3 + 'rem'
+    }
+  },
+  methods:
+  {
+    onClick(item)
+    {
+      item.checked = !item.checked
+      this.$emit('basemap-click', item)
+    }
+  }
+}
+</script>