同步代码 v3.5.14

public/config/example.json

@@ -1656,6 +1656,7 @@
             "name": "视频编辑",
             "thumbnail": "graphic-video-edit.jpg",
             "main": "graphic/video/video-edit",
+            "resources": ["CanvasEdit.js"],
             "hasPannel": true,
             "new": true
           }

public/lib/mars3d/mars3d.css

 /**
  * Mars3D三维可视化平台  mars3d
  *
- * 版本信息：v3.5.13
- * 编译日期：2023-06-26 22:26:47
+ * 版本信息：v3.5.14
+ * 编译日期：2023-07-03 18:40:07
  * 版权所有：Copyright by 火星科技  http://mars3d.cn
  * 使用单位：免费公开版 ，2023-03-17
  */

public/lib/mars3d/mars3d.d.ts

@@ -2,8 +2,8 @@
 /**
  * Mars3D三维可视化平台  mars3d
  *
- * 版本信息：v3.5.13
- * 编译日期：2023-06-26 22:26:47
+ * 版本信息：v3.5.14
+ * 编译日期：2023-07-03 18:40:07
  * 版权所有：Copyright by 火星科技  http://mars3d.cn
  * 使用单位：免费公开版 ，2023-03-17
  */
@@ -9327,6 +9327,12 @@ declare class EditTileset extends EditBase {
 }
 
 /**
+ * Video2D对象 标绘处理对应的编辑类
+ */
+declare class EditVideo2D extends EditBase {
+}
+
+/**
  * Wall对象 标绘处理对应的编辑类，
  */
 declare class EditWall extends EditPoly {
@@ -11770,6 +11776,10 @@ declare class Video2D extends PolygonEntity {
         flyToOptions?: any;
     });
     /**
+     * 编辑处理类
+     */
+    readonly EditClass: EditVideo2D;
+    /**
      * 位置坐标 （笛卡尔坐标）, 赋值时可以传入LatLngPoint对象
      */
     position: Cesium.Cartesian3 | LngLatPoint;
@@ -12573,7 +12583,8 @@ declare class Lune extends PolygonEntity {
 /**
  * 正多边形  Entity矢量数据
  * @param options - 参数对象，包括以下：
- * @param options.positions - 坐标位置
+ * @param options.position - 中心点坐标位置
+ * @param [options.positions] - 坐标位置
  * @param options.style - 样式信息,还包括：
  * @param [options.style.border = 3] - 边数量
  * @param options.style.radius - 区域的半径（单位：米）
@@ -12600,7 +12611,8 @@ declare class Lune extends PolygonEntity {
  */
 declare class Regular extends PolygonEntity {
     constructor(options: {
-        positions: LngLatPoint[] | Cesium.Cartesian3[] | Cesium.PositionProperty | any[];
+        position: LngLatPoint | Cesium.Cartesian3 | any[];
+        positions?: LngLatPoint[] | Cesium.Cartesian3[] | Cesium.PositionProperty | any[];
         style: {
             border?: number;
             radius: number;
@@ -12653,7 +12665,8 @@ declare class Regular extends PolygonEntity {
 /**
  * 扇形(3个点)  Entity矢量数据
  * @param options - 参数对象，包括以下：
- * @param options.positions - 坐标位置
+ * @param options.position - 中心点坐标位置
+ * @param [options.positions] - 坐标位置
  * @param options.style - 样式信息,还包括：
  * @param options.style.radius - 扇形区域的半径（单位：米）
  * @param options.style.startAngle - 扇形区域的开始角度(正东方向为0,顺时针到360度)
@@ -12681,7 +12694,8 @@ declare class Regular extends PolygonEntity {
  */
 declare class Sector extends PolygonEntity {
     constructor(options: {
-        positions: LngLatPoint[] | Cesium.Cartesian3[] | Cesium.PositionProperty | any[];
+        position: LngLatPoint | Cesium.Cartesian3 | any[];
+        positions?: LngLatPoint[] | Cesium.Cartesian3[] | Cesium.PositionProperty | any[];
         style: {
             radius: number;
             startAngle: number;
@@ -31522,6 +31536,7 @@ declare class QueryArcServer extends BaseClass {
      * @param [queryOptions.where] - 自定义的检索条件，与text二选一
      * @param [queryOptions.graphic] - 限定的搜索区域
      * @param [queryOptions.page = true] - 是否分页查询,false时不分页，一次性查询返回
+     * @param [queryOptions.parameters] - 其他参数，arcgis服务本身支持的参数均支持
      * @param [queryOptions.success] - 查询完成的回调方法
      * @param [queryOptions.error] - 查询失败的回调方法
      * @returns 查询完成的Promise,等价于success参数
@@ -31533,6 +31548,7 @@ declare class QueryArcServer extends BaseClass {
         where?: string;
         graphic?: BaseGraphic | any;
         page?: boolean;
+        parameters?: any;
         success?: (...params: any[]) => any;
         error?: (...params: any[]) => any;
     }): Promise<any>;
@@ -33205,6 +33221,7 @@ declare type getSlope_endItem = (event: {
  * @param [options.imageBottom] - 当显示开挖区域的井时，井底面贴图URL
  * @param [options.diffHeight] - 当显示开挖区域的井时，设置所有区域的挖掘深度（单位：米）
  * @param [options.splitNum = 30] - 当显示开挖区域的井时，井墙面每两点之间插值个数(概略值，有经纬网网格来插值)
+ * @param [options.dynamicView = true] - 是否监听事件，动态隐藏非视域内区域
  * @param [options.id = createGuid()] - 对象的id标识
  * @param [options.enabled = true] - 对象的启用状态
  * @param [options.eventParent] - 指定的事件冒泡对象，默认为所加入的map对象，false时不冒泡事件
@@ -33217,6 +33234,7 @@ declare class TerrainClip extends TerrainOldEditBase {
         imageBottom?: string;
         diffHeight?: number;
         splitNum?: number;
+        dynamicView?: boolean;
         id?: string | number;
         enabled?: boolean;
         eventParent?: BaseClass | boolean;

src/components/MarsSample/GraphicLayerState.tsx

@@ -241,7 +241,7 @@ export class GraphicLayerState extends Component<any, any> {
   constructor(props) {
     super(props)
     this.state = {
-      drawLabel1: props.drawLabel1 || "图上标绘",
+      drawLabel1: props.drawLabel1 || "标绘",
       drawLabel2: props.drawLabel2 || null,
       interaction: props.interaction === undefined ? true : props.interaction, // 是否可以鼠标拾取和交互
       enabledDraw: props.enabledDraw === undefined ? true : props.enabledDraw, // 是否可以绘制
@@ -369,7 +369,7 @@ export class GraphicLayerState extends Component<any, any> {
       const graphicLayer = getManagerLayer()
       this.initGraphicableData(graphicLayer)
 
-      graphicLayer.on(mars3d.EventType.addGraphic, (event: any) => {
+      graphicLayer.on(mars3d.EventType.drawCreated, (event: any) => {
         const item = event.graphic
         if (item.isPrivate) {
           return
@@ -546,7 +546,17 @@ export class GraphicLayerState extends Component<any, any> {
 
   // drawLabel2
   onClickStartDraw2() {
-    mapWork.startDrawGraphic2()
+    const graphic = mapWork.startDrawGraphic2()
+    graphicDataList.push({
+      key: graphic.id,
+      name: getGraphicName(graphic)
+    })
+    rowKeys.push(graphic.id)
+
+    this.setState({
+      graphicDataList: [...graphicDataList],
+      rowKeys: [...rowKeys]
+    })
   }
 
   // 是否编辑

src/example/graphic/apply/seaRescue/index.tsx

@@ -71,7 +71,7 @@ function UIComponent() {
   const [totalTimes, setTotalTimes] = useState<string>() // 总时长
   const [currentWork, setCurrentWork] = useState<string>()
   const [selectedKeys, setSelectedKeys] = useState<any>()
-  let [counter, setCounter] = useState<any>()
+  const [counter, setCounter] = useState<any>()
 
   const [isPlay, setIsPlay] = useState(false)
   const [isPause, setIsPause] = useState(false)
@@ -138,7 +138,7 @@ function UIComponent() {
       setSelectedKeys([animate.key])
       setCurrentWork(`${animate.title}(${animate.times}秒)`)
       setCounter(animate.times)
-      countOn()
+      countOn(animate.times)
       animate.widget()
       currentIndex++
       timer = setTimeout(() => {
@@ -149,11 +149,12 @@ function UIComponent() {
     }
   }
 
-  const countOn = () => {
+  const countOn = (time) => {
     interval = setInterval(() => {
-      counter--
-      setCounter(counter)
-      if (counter <= 0) {
+      time--
+      
+      setCounter(time)
+      if (time <= 0) {
         clearInterval(interval)
       }
     }, 1000)

src/example/graphic/custom/route/map.js

@@ -106,6 +106,11 @@ function showCarList(arr) {
     // car.flyToPoint({ radius: 1000 })
   })
 
+  // 点击编辑弹出框中的删除按钮时，删除表格数据
+  graphicLayer.on("removeGraphic", (e) => {
+    eventTarget.fire("removeCar", { id: e.graphic.options.id })
+  })
+
   let lastClickCar
 
   for (let i = 0; i < arr.length; i++) {

src/example/graphic/entity/billboard/map.js

@@ -202,6 +202,7 @@ function addDemoGraphic4(graphicLayer) {
 
   // graphic转json，clone一个对象
   const json = graphic.toJSON()
+  delete json.id // 防止id冲突，实际业务中根据需要修改
   console.log("转换后的json", json)
 
   json.position = [116.5, 31.0, 1000] // 新的坐标

src/example/graphic/space/camberRadar/index.tsx

@@ -17,9 +17,7 @@ const raderParsms = {
 }
 
 function UIComponent() {
-  useEffect(() => {
-    mapWork.addDemoGraphic1(raderParsms)
-  }, [])
+
 
   return (
     <MarsPannel visible={true} right={10} top={10}>

src/example/graphic/video/video-edit/CanvasEdit.js

@@ -4,7 +4,6 @@ const parameter = {
   radius: 4
 }
 
-
 class CanvasEdit {
   constructor(canvas) {
     this._canvas = canvas

src/example/graphic/video/video-edit/index.tsx

@@ -2,28 +2,51 @@ import { MarsCheckbox, MarsButton, MarsPannel } from "@mars/components/MarsUI"
 import "./canvas.css"
 import { Space } from "antd"
 import * as mapWork from "./map.js"
-import * as canvasWork from "./CanvasEdit.js"
 import { useState, useEffect } from "react"
 import { GraphicLayerState } from "@mars/components/MarsSample/GraphicLayerState"
 
 let drawVideoCanvas
 function UIComponent() {
   const [uVList, setUVList] = useState([])
+  let lastList = [
+    [0, 1],
+    [1, 1],
+    [1, 0],
+    [0, 0]
+  ]
 
   useEffect(() => {
     if (uVList.length >= 3) {
       mapWork.updateROI(uVList)
     }
-  }, [uVList.length])
+  }, [uVList])
 
   useEffect(() => {
     const drawVideo = document.getElementById("drawVideo")
-    drawVideoCanvas = new canvasWork.CanvasEdit(drawVideo)
+    drawVideoCanvas = mapWork.creatCanvas(drawVideo)
     drawVideo.addEventListener("mousemove", () => {
-      setUVList(canvasWork.uvList)
+      const list = drawVideoCanvas.uvList
+      if (list.length >= 3 && isSame(list, lastList)) {
+        setUVList(lastList.slice())
+      }
     })
   }, [])
 
+  function isSame(leftList, rightList) {
+    if (leftList.length !== rightList.length) {
+      lastList = leftList
+      return true
+    }
+    
+    for (let i = 0; i < leftList.length; i++) {
+      if (leftList[i][0] !== rightList[i][0] || leftList[i][1] !== rightList[i][1]) {
+        lastList = leftList
+        return true
+      } 
+    }
+    return false
+  }
+
   const [isDrawing, setIsDrawing] = useState(false)
   function draw() {
     if (isDrawing) {

src/example/graphic/video/video-edit/map.js

 import * as mars3d from "mars3d"
-const Cesium = mars3d.Cesium
+import { CanvasEdit } from "./CanvasEdit"
 
 export let map // mars3d.Map三维地图对象
 export let graphicLayer // 矢量图层对象
@@ -46,6 +46,10 @@ export function onUnmounted() {
   graphicLayer = null
 }
 
+export function creatCanvas(drawVideo) {
+  return new CanvasEdit(drawVideo)
+}
+
 let videoPolygon
 
 function addDemoGraphic1(graphicLayer) {

src/example/graphic/video/video2D-flv/map.js

@@ -41,6 +41,7 @@ export function onMounted(mapInstance) {
 
   // 2.在layer上绑定监听事件
   graphicLayer.on(mars3d.EventType.click, function (event) {
+    video2D = event.graphic
     console.log("监听layer，单击了矢量对象", event)
   })
 

src/example/graphic/video/video2D-hls/index.tsx

@@ -160,10 +160,11 @@ function UIComponent() {
 
   return (
     <>
-      <MarsPannel visible={true} right="10" top="10" width="420">
+      <MarsPannel visible={true} right="10" top="10" width="440">
         <GraphicLayerState
           defaultCount={10}
-          interaction={false}
+          interaction={true}
+          drawLabel2={"按当前相机"}
           customEditor={"video2D"}
           onStartEditor={(data: any) => {
             const graphic = mapWork.getGraphic(data.graphicId)

src/example/graphic/video/video2D-hls/map.js

@@ -214,6 +214,7 @@ export function startDrawGraphic2() {
     }
   })
   graphicLayer.addGraphic(video2D)
+  return video2D
 }
 
 export function playOrpause() {
@@ -265,7 +266,7 @@ export function showFrustum(isCheckde) {
 // 修改视频的透明度   opacity 透明度数值
 export function onChangeOpacity(opacity) {
   if (selectedView) {
-    selectedView.opacity = opacity
+    selectedView.setOpacity(opacity)
   }
 }
 

src/example/layer-graphic/draw/draw-model-list/map.js

@@ -8,7 +8,7 @@ export const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出
 // 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
 export const mapOptions = {
   scene: {
-    center: { lat: 31.516143, lng: 117.282937, alt: 46242, heading: 2, pitch: -49 }
+    center: { lat: 31.811646, lng: 117.22232, alt: 842.4, heading: 358.5, pitch: -45 }
   }
 }