Skip to content

M
mars3d
Commit 307bc198 by wanghao
Options

同步代码 v3.5.13

parent bf6b5278
正在显示 包含 944 行增加 和 290 行删除
public/lib/mars3d/mars3d.css
/** /**
* Mars3D三维可视化平台 mars3d * Mars3D三维可视化平台 mars3d
* *
* 版本信息：v3.5.12 * 版本信息：v3.5.13
* 编译日期：2023-06-19 10:10:19 * 编译日期：2023-06-26 22:26:47
* 版权所有：Copyright by 火星科技 http://mars3d.cn * 版权所有：Copyright by 火星科技 http://mars3d.cn
* 使用单位：免费公开版 ，2023-03-17 * 使用单位：免费公开版 ，2023-03-17
*/ */
...@@ -364,6 +364,7 @@ ...@@ -364,6 +364,7 @@
line-height: 40px; line-height: 40px;
padding: 2px; padding: 2px;
border: 1px solid lightgrey; border: 1px solid lightgrey;
z-index: 99999;
} }
.mars3d-slider .slider-splitter:hover { .mars3d-slider .slider-splitter:hover {
cursor: ew-resize; cursor: ew-resize;
......
public/lib/mars3d/mars3d.d.ts
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
/** /**
* Mars3D三维可视化平台 mars3d * Mars3D三维可视化平台 mars3d
* *
* 版本信息：v3.5.12 * 版本信息：v3.5.13
* 编译日期：2023-06-19 10:10:19 * 编译日期：2023-06-26 22:26:47
* 版权所有：Copyright by 火星科技 http://mars3d.cn * 版权所有：Copyright by 火星科技 http://mars3d.cn
* 使用单位：免费公开版 ，2023-03-17 * 使用单位：免费公开版 ，2023-03-17
*/ */
...@@ -6139,6 +6139,72 @@ declare class Route extends BasePointPrimitive { ...@@ -6139,6 +6139,72 @@ declare class Route extends BasePointPrimitive {
}): Promise<any>; }): Promise<any>;
} }
/**
* 天际线体 矢量对象 <br>
* 说明：自动计算当前相机所视区域的天际线闭合区域
* @param options - 参数对象，包括以下：
* @param options.style - 样式信息
* @param [options.attr] - 附件的属性信息，可以任意附加属性，导出geojson或json时会自动处理导出。
* @param [options.appearance] - [cesium原生]用于渲染图元的外观。
* @param [options.attributes] - [cesium原生]每个实例的属性。
* @param [options.depthFailAppearance] - 当深度测试失败时，用于为该图元着色的外观。
* @param [options.vertexCacheOptimize = false] - 当true，几何顶点优化前和后顶点着色缓存。
* @param [options.interleave = false] - 当true时，几何顶点属性被交叉，这可以略微提高渲染性能，但会增加加载时间。
* @param [options.compressVertices = true] - 当true时，几何顶点被压缩，这将节省内存。提升效率。
* @param [options.releaseGeometryInstances = true] - 当true时，图元不保留对输入geometryInstances的引用以节省内存。
* @param [options.allowPicking = true] - 当true时，每个几何图形实例只能通过{@link Scene#pick}进行挑选。当false时，保存GPU内存。
* @param [options.cull = true] - 当true时，渲染器会根据图元的边界体积来剔除它们的截锥和地平线。设置为false，如果你手动剔除图元，可以获得较小的性能提升。
* @param [options.asynchronous = true] - 确定该图元是异步创建还是阻塞创建，直到就绪。
* @param [options.debugShowBoundingVolume = false] - 仅供调试。确定该图元命令的边界球是否显示。
* @param [options.debugShowShadowVolume = false] - 仅供调试。贴地时，确定是否绘制了图元中每个几何图形的阴影体积。必须是true创建卷之前要释放几何图形或选项。releaseGeometryInstance必须是false。
* @param [options.popup] - 绑定的popup弹窗值，也可以bindPopup方法绑定
* @param [options.popupOptions] - popup弹窗时的配置参数，也支持如pointerEvents等{@link Popup}构造参数
* @param [options.tooltip] - 绑定的tooltip弹窗值，也可以bindTooltip方法绑
* @param [options.tooltipOptions] - tooltip弹窗时的配置参数，也支持如pointerEvents等{@link Tooltip}构造参数
* @param [options.contextmenuItems] - 当矢量数据支持右键菜单时，也可以bindContextMenu方法绑定
* @param [options.id = createGuid()] - 矢量数据id标识
* @param [options.name = ''] - 矢量数据名称
* @param [options.show = true] - 矢量数据是否显示
* @param [options.eventParent] - 指定的事件冒泡对象，默认为所加入的图层对象，false时不冒泡事件
* @param [options.allowDrillPick] - 是否允许鼠标穿透拾取
* @param [options.flyTo] - 加载完成数据后是否自动飞行定位到数据所在的区域。
* @param [options.flyToOptions] - 加载完成数据后是否自动飞行定位到数据所在的区域的对应 {@link BaseGraphic#flyTo}方法参数。
*/
declare class SkylineBody extends PolygonPrimitive {
constructor(options: {
style: PolygonPrimitive.StyleOptions | any;
attr?: any;
appearance?: Cesium.Appearance;
attributes?: Cesium.Appearance;
depthFailAppearance?: Cesium.Appearance;
vertexCacheOptimize?: boolean;
interleave?: boolean;
compressVertices?: boolean;
releaseGeometryInstances?: boolean;
allowPicking?: boolean;
cull?: boolean;
asynchronous?: boolean;
debugShowBoundingVolume?: boolean;
debugShowShadowVolume?: boolean;
popup?: string | any[] | ((...params: any[]) => any);
popupOptions?: Popup.StyleOptions | any;
tooltip?: string | any[] | ((...params: any[]) => any);
tooltipOptions?: Tooltip.StyleOptions | any;
contextmenuItems?: any;
id?: string | number;
name?: string;
show?: boolean;
eventParent?: BaseClass | boolean;
allowDrillPick?: boolean | ((...params: any[]) => any);
flyTo?: boolean;
flyToOptions?: any;
});
/**
* 相机位置坐标 （笛卡尔坐标）, 赋值时可以传入LatLngPoint对象
*/
position: Cesium.Cartesian3 | LngLatPoint;
}
declare namespace Tetrahedron { declare namespace Tetrahedron {
/** /**
* 四面体（顶部正方形+倒立的三角椎体） 支持的样式信息 * 四面体（顶部正方形+倒立的三角椎体） 支持的样式信息
...@@ -25112,6 +25178,10 @@ declare class KeyboardRoam extends BaseControl { ...@@ -25112,6 +25178,10 @@ declare class KeyboardRoam extends BaseControl {
* 相机旋转的类型 * 相机旋转的类型
*/ */
static MoveType: MoveType; static MoveType: MoveType;
/**
* 设置对象的启用和禁用状态。
*/
enabled: boolean;
} }
/** /**
...@@ -32277,45 +32347,6 @@ declare class Skyline extends BaseThing { ...@@ -32277,45 +32347,6 @@ declare class Skyline extends BaseThing {
} }
/** /**
* 天际线体
* @param [options] - 参数对象，包括以下：
* @param [options.color = new Cesium.Color(1.0, 0.0, 0.0)] - 边际线颜色
* @param [options.width = 2] - 天际线宽度
* @param [options.id = createGuid()] - 对象的id标识
* @param [options.enabled = true] - 对象的启用状态
* @param [options.eventParent] - 指定的事件冒泡对象，默认为所加入的map对象，false时不冒泡事件
*/
declare class SkylineBody extends BaseThing {
constructor(options?: {
color?: Cesium.Color;
width?: number;
id?: string | number;
enabled?: boolean;
eventParent?: BaseClass | boolean;
});
/**
* 边际线颜色
*/
color: Cesium.Color;
/**
* 天际线宽度
*/
width: number;
/**
* 对象添加到地图前创建一些对象的钩子方法，
* 只会调用一次
* @returns 无
*/
_mountedHook(): void;
/**
* 销毁当前对象
* @param [noDel = false] - false:会自动delete释放所有属性，true：不delete绑定的变量
* @returns 无
*/
destroy(noDel?: boolean): void;
}
/**
* 地下模式类 * 地下模式类
* @param [options] - 参数对象，包括以下： * @param [options] - 参数对象，包括以下：
* @param [options.alpha = 0.5] - 透明度 0.0-1.0 * @param [options.alpha = 0.5] - 透明度 0.0-1.0
...@@ -35241,7 +35272,7 @@ declare namespace PointUtil { ...@@ -35241,7 +35272,7 @@ declare namespace PointUtil {
* 获取position的最终value值， * 获取position的最终value值，
* 因为cesium经常属性或绑定一层，通过该方法可以内部去判断是否有getValue或_value进行取最终value值。 * 因为cesium经常属性或绑定一层，通过该方法可以内部去判断是否有getValue或_value进行取最终value值。
* @param position - 各种位置属性对象 * @param position - 各种位置属性对象
* @param [time = Cesium.JulianDate.now()] - 指定的时间值 * @param [time = Cesium.JulianDate.now()] - 指定的时间值 ,如 map.clock.currentTime
* @returns 具体的Cartesian3对象坐标值 * @returns 具体的Cartesian3对象坐标值
*/ */
function getPositionValue(position: Cesium.Cartesian3 | Cesium.SampledPositionProperty | any, time?: Cesium.JulianDate): Cesium.Cartesian3; function getPositionValue(position: Cesium.Cartesian3 | Cesium.SampledPositionProperty | any, time?: Cesium.JulianDate): Cesium.Cartesian3;
public/lib/mars3d/mars3d.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/mars3d/plugins/space/mars3d-space.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/mars3d/plugins/tdt/mars3d-tdt.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/mars3d/plugins/wind/mars3d-wind.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/example/graphic/custom/fixedRoute-ground/map.js
...@@ -30,7 +30,10 @@ export function onMounted(mapInstance) { ...@@ -30,7 +30,10 @@ export function onMounted(mapInstance) {
graphicLayer = new mars3d.layer.GraphicLayer() graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer) map.addLayer(graphicLayer)
addGraphicLayer() // 加载完成在加载小车，否则地形未加载完成，小车会处于地下
map.on(mars3d.EventType.load, function (event) {
addGraphicLayer()
})
} }
/** /**
......
src/example/graphic/custom/route/index.tsx
...@@ -59,7 +59,7 @@ function UIComponent() { ...@@ -59,7 +59,7 @@ function UIComponent() {
}, },
onSelect: (record: any, selected: boolean) => { onSelect: (record: any, selected: boolean) => {
// 对车子进行的操作 // 对车子进行的操作
mapWork.onSelect(record, selected) mapWork.onSelect(record.key, selected)
} }
} }
......
src/example/graphic/space/conicSensor/map.js
...@@ -3,7 +3,6 @@ import * as mars3d from "mars3d" ...@@ -3,7 +3,6 @@ import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象 export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象 export let graphicLayer // 矢量图层对象
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并） // 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = { export const mapOptions = {
scene: { scene: {
...@@ -64,6 +63,7 @@ function addDemoGraphic1() { ...@@ -64,6 +63,7 @@ function addDemoGraphic1() {
// 测试连接线 // 测试连接线
const testLine = new mars3d.graphic.PolylineEntity({ const testLine = new mars3d.graphic.PolylineEntity({
id: "testLine",
positions: new Cesium.CallbackProperty(function (time) { positions: new Cesium.CallbackProperty(function (time) {
const localEnd = conicSensor?.rayPosition const localEnd = conicSensor?.rayPosition
if (!localEnd) { if (!localEnd) {
...@@ -101,8 +101,7 @@ function addDemoGraphic1() { ...@@ -101,8 +101,7 @@ function addDemoGraphic1() {
}) })
graphicLayer.addGraphic(conicSensor) graphicLayer.addGraphic(conicSensor)
conicSensor.on(mars3d.EventType.remove, function () {
conicSensor.on(mars3d.EventType.remove, function() {
graphicLayer.removeGraphic(testLine) graphicLayer.removeGraphic(testLine)
}) })
} }
......
src/example/graphic/space/getRayEarthPosition/index.tsx
import { MarsPannel, MarsButton, MarsGui, MarsCheckbox } from "@mars/components/MarsUI" import { MarsPannel, MarsButton, MarsGui, MarsCheckbox, $message } from "@mars/components/MarsUI"
import * as mapWork from "./map.js" import * as mapWork from "./map.js"
import { Space } from "antd" import { Space } from "antd"
import type { GuiItem } from "@mars/components/MarsUI" import type { GuiItem } from "@mars/components/MarsUI"
import { useEffect, useMemo, useState } from "react" import { useEffect, useMemo, useState } from "react"
import "./index.less" import "./index.less"
let showHideCone = false
function UIComponent() { function UIComponent() {
useEffect(() => { useEffect(() => {
mapWork.centerPoint(10) mapWork.centerPoint(10)
}) }, [])
const options: GuiItem[] = [ const options: GuiItem[] = [
{ {
...@@ -52,6 +53,11 @@ function UIComponent() { ...@@ -52,6 +53,11 @@ function UIComponent() {
extra: "当前值{angle1}", extra: "当前值{angle1}",
extraWidth: 90, extraWidth: 90,
change(angle) { change(angle) {
if (!showHideCone) {
$message("已自动打开视椎体")
showHideCone = true
mapWork.chkShowModelMatrix(true)
}
mapWork.angle(angle) mapWork.angle(angle)
} }
} }
...@@ -80,7 +86,13 @@ function UIComponent() { ...@@ -80,7 +86,13 @@ function UIComponent() {
<div className="f-mb"> <div className="f-mb">
<Space> <Space>
<span>视椎体状态:</span> <span>视椎体状态:</span>
<MarsCheckbox defaultChecked={false} onChange={(e) => mapWork.chkShowModelMatrix(e.target.checked)}> <MarsCheckbox
checked={showHideCone}
onChange={(e) => {
showHideCone = e.target.checked
mapWork.chkShowModelMatrix(e.target.checked)
}}
>
显示/隐藏 显示/隐藏
</MarsCheckbox> </MarsCheckbox>
<MarsButton onClick={() => mapWork.locate()}>定位至卫星</MarsButton> <MarsButton onClick={() => mapWork.locate()}>定位至卫星</MarsButton>
......
src/example/graphic/space/tle-getPoint/index.tsx
import { MarsButton, MarsCheckbox, MarsColor, MarsDatePicker, MarsPannel, MarsSlider, MarsTable } from "@mars/components/MarsUI" import { MarsButton, MarsCheckbox, MarsColor, MarsDatePicker, MarsPannel, MarsSlider, MarsTable } from "@mars/components/MarsUI"
import { Space } from "antd" import { Space } from "antd"
import moment from "moment" import moment from "moment"
import dayjs, { Dayjs } from "dayjs"
import { useMemo, useState } from "react" import { useMemo, useState } from "react"
import * as mapWork from "./map.js" import * as mapWork from "./map.js"
import "./index.less" import "./index.less"
let areaColor: any
let slideOpacity = 0.4 let slideOpacity = 0.4
let slideAngle = 10 let slideAngle = 10
function UIComponent() { function UIComponent() {
const [startTime, setStartTime] = useState(null) // 开始时间 const [startTime, setStartTime] = useState(null) // 开始时间
const [endTime, setEndTime] = useState(null) // 结束时间 const [endTime, setEndTime] = useState(null) // 结束时间
const [areaColor, setAreaColor] = useState("red") // 颜色
useMemo(() => { useMemo(() => {
mapWork.eventTarget.on("loadStatellite", (event: any) => { mapWork.eventTarget.on("loadStatellite", (event: any) => {
setStartTime(event.startTime) setStartTime(event.startTime)
...@@ -40,6 +41,7 @@ function UIComponent() { ...@@ -40,6 +41,7 @@ function UIComponent() {
// 颜色改变 // 颜色改变
const onChangeColor = (areaColor) => { const onChangeColor = (areaColor) => {
setAreaColor(areaColor)
mapWork.changeColorOpacity({ mapWork.changeColorOpacity({
areaColor: areaColor, areaColor: areaColor,
slideOpacity: slideOpacity slideOpacity: slideOpacity
......
src/example/graphic/video/material/map.js
...@@ -234,7 +234,7 @@ export function videoStop() { ...@@ -234,7 +234,7 @@ export function videoStop() {
*/ */
export function angleChange(value) { export function angleChange(value) {
videoGraphic?.setStyle({ videoGraphic?.setStyle({
rotationDegree: value stRotationDegree: value
}) })
} }
......
src/example/graphic/video/video-edit/CanvasEdit.js 0 → 100644
const parameter = {
fillStyle: "#8f8ffa40",
strokeStyle: "#0063ff",
radius: 4
}
class CanvasEdit {
constructor(canvas) {
this._canvas = canvas
this._points = []
canvas.oncontextmenu = function (ev) {
ev.preventDefault()
return false
}
this._ctx = canvas.getContext("2d")
this._canvas.addEventListener("mousedown", this.mousedownHandler.bind(this))
this._canvas.addEventListener("mouseup", () => {
this._pickIndex = undefined
})
this._canvas.addEventListener("mousemove", this.mousemoveHandler.bind(this))
this._draw = false
this._canEdit = false
this._pickIndex = undefined
this.uvList = [
[0, 1],
[1, 1],
[1, 0],
[0, 0]
]
}
// 开始绘制模式
draw() {
this.clear()
this._draw = true
this._pickIndex = undefined
}
// 清除点
clear() {
this._points = []
this.update()
}
// 开始编辑状态
edit(canEdit) {
console.log("canEdit", canEdit)
this._draw = false
this._canEdit = canEdit
}
// 通过UV坐标集合更新点
setPointsRorUvs(uvs) {
this._points = []
uvs.forEach((uv) => {
this._points.push({
x: uv[0] * this._canvas.width,
y: this._canvas.height - uv[1] * this._canvas.height
})
})
this.update()
}
mousemoveHandler(event) {
if (this._pickIndex !== undefined) {
this._points[this._pickIndex] = {
x: event.offsetX,
y: event.offsetY
}
this.update()
}
}
mousedownHandler(event) {
if (event.button === 0) {
if (this._draw) {
// 如果处于绘制状态则左键按下为绘制点
this._points.push({
x: event.offsetX,
y: event.offsetY
})
this.update()
} else if (!this._draw && this._canEdit) {
// 如果不处于绘制状态，则左键按下为编辑点
for (let i = 0; i < this._points.length; i++) {
const x = this._points[i].x - event.offsetX
const y = this._points[i].y - event.offsetY
const distance = Math.sqrt(x * x + y * y)
if (distance <= parameter.radius) {
this._pickIndex = i
break
}
}
}
}
}
update() {
this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height)
if (this._points.length > 0) {
this._ctx.fillStyle = parameter.fillStyle
this._ctx.strokeStyle = parameter.strokeStyle
// 绘制面和边界
this._ctx.beginPath()
this._ctx.moveTo(this._points[0].x, this._points[0].y)
for (let i = 1; i < this._points.length; i++) {
this._ctx.lineTo(this._points[i].x, this._points[i].y)
}
this._ctx.closePath()
this._ctx.stroke()
this._ctx.fill()
// 绘制节点
this._points.forEach((point) => {
this._ctx.beginPath()
this._ctx.arc(point.x, point.y, parameter.radius, 0, 2 * Math.PI)
this._ctx.stroke()
})
}
this.uvList = this.getUvForPoints()
console.log("uv集合:", this.getUvForPoints())
}
getUvForPoints() {
return this._points.map((p) => {
return [p.x / this._canvas.width, (this._canvas.height - p.y) / this._canvas.height]
})
}
}
src/example/graphic/video/video-edit/canvas.css 0 → 100644
.canvas-container {
width: 360px;
height: 202px;
margin: 0 auto;
margin-top: 10px;
background-color: transparent;
}
.video_test {
width: 360px;
height: 202px;
position: absolute;
}
.drawCanvas {
position: absolute;
left: -500;
z-index: 1000;
}
\ No newline at end of file
src/example/graphic/video/video-edit/index.tsx 0 → 100644
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([])
useEffect(() => {
if (uVList.length >= 3) {
mapWork.updateROI(uVList)
}
}, [uVList.length])
useEffect(() => {
const drawVideo = document.getElementById("drawVideo")
drawVideoCanvas = new canvasWork.CanvasEdit(drawVideo)
drawVideo.addEventListener("mousemove", () => {
setUVList(canvasWork.uvList)
})
}, [])
const [isDrawing, setIsDrawing] = useState(false)
function draw() {
if (isDrawing) {
// 处于绘制状态，将要停止绘制
drawVideoCanvas.edit(isEdit)
} else {
// 处于停止绘制状态，将要开始绘制
clear()
drawVideoCanvas.draw()
}
const newDrawing = !isDrawing
console.log("newDrawing", newDrawing)
setIsDrawing(newDrawing)
console.log("isDrawing", isDrawing)
}
function clear() {
drawVideoCanvas.clear()
mapWork.clearROI()
setUVList([])
}
const [isEdit, setIsEdit] = useState(true)
function chooseEdit(e: any) {
setIsEdit(e.target.checked)
drawVideoCanvas.edit(e.target.checked)
}
const [isChoosePoint, setIsChoosePoint] = useState(false)
function choosePoint(e: any) {
setIsChoosePoint(e.target.checked)
mapWork.choosePoint(e.target.checked)
}
return (
<MarsPannel visible={true} right="10" top="10">
<GraphicLayerState defaultCount={10} />
<div className="f-mb">
<Space>
<span className="mars-pannel-item-label">编辑Canvas:</span>
<MarsButton onClick={draw}>{isDrawing ? "停止绘制" : "开始绘制"}</MarsButton>
<MarsButton onClick={clear}>清除</MarsButton>
<MarsCheckbox checked={isEdit} onChange={chooseEdit}>
编辑点
</MarsCheckbox>
</Space>
</div>
<div className="f-mb">
<Space>
<span className="mars-pannel-item-label">编辑矢量面:</span>
<MarsCheckbox checked={isChoosePoint} onChange={choosePoint}>
编辑网格点
</MarsCheckbox>
</Space>
</div>
<div className="canvas-container">
<canvas className="drawCanvas" width="360" height="202" id="drawVideo">
不支持canvas
</canvas>
<video muted className="video_test" autoPlay loop width="360" height="202" id="videotest" src="//data.mars3d.cn/file/video/lukou.mp4"></video>
</div>
</MarsPannel>
)
}
export default UIComponent
src/example/graphic/video/video-edit/map.js 0 → 100644
import * as mars3d from "mars3d"
const Cesium = mars3d.Cesium
export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: { lat: 31.842839, lng: 117.204275, alt: 269.9, heading: 179, pitch: -77.7 }
}
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录首次创建的map
// 创建矢量数据图层
graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
// 在layer上绑定监听事件
graphicLayer.on(mars3d.EventType.click, function (event) {
console.log("监听layer，单击了矢量对象", event)
})
bindLayerPopup() // 在图层上绑定popup,对所有加到这个图层的矢量数据都生效
bindLayerContextMenu() // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
// 加一些演示数据
addDemoGraphic1(graphicLayer)
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
graphicLayer.remove()
graphicLayer = null
}
let videoPolygon
function addDemoGraphic1(graphicLayer) {
videoPolygon = new mars3d.graphic.VideoPrimitive({
positions: [
[117.204858, 31.842209, 45.6],
[117.204087, 31.842184, 43.6],
[117.204087, 31.842668, 43.6],
[117.204827, 31.842712, 43.6]
],
style: {
url: "//data.mars3d.cn/file/video/lukou.mp4",
opacity: 0.9,
distanceDisplayCondition_far: 5000
}
})
graphicLayer.addGraphic(videoPolygon)
}
// 生成演示数据(测试数据量)
export function addRandomGraphicByCount(count) {
graphicLayer.clear()
graphicLayer.enabledEvent = false // 关闭事件，大数据addGraphic时影响加载时间
const bbox = [116.984788, 31.625909, 117.484068, 32.021504]
const result = mars3d.PolyUtil.getGridPoints(bbox, count, 30)
console.log("生成的测试网格坐标", result)
for (let j = 0; j < result.points.length; ++j) {
const position = result.points[j]
const index = j + 1
const pt1 = mars3d.PointUtil.getPositionByDirectionAndLen(position, 45, result.radius)
const pt2 = mars3d.PointUtil.getPositionByDirectionAndLen(position, 90 + 45, result.radius)
const pt3 = mars3d.PointUtil.getPositionByDirectionAndLen(position, 180 + 45, result.radius)
const pt4 = mars3d.PointUtil.getPositionByDirectionAndLen(position, 270 + 45, result.radius)
const graphic = new mars3d.graphic.VideoPrimitive({
positions: [pt1, pt2, pt3, pt4],
style: {
url: "//data.mars3d.cn/file/video/lukou.mp4"
},
attr: { index: index }
})
graphicLayer.addGraphic(graphic)
}
graphicLayer.enabledEvent = true // 恢复事件
return result.points.length
}
export function updateROI(uvROI) {
if (!videoPolygon || videoPolygon.isDestroy) {
return
}
videoPolygon.rois = uvROI
}
export function clearROI() {
if (!videoPolygon || videoPolygon.isDestroy) {
return
}
videoPolygon.rois = undefined
}
export const choosePoint = (isChoosePoint) => {
if (!videoPolygon || videoPolygon.isDestroy) {
return
}
if (isChoosePoint) {
videoPolygon.startEditingGrid()
} else {
videoPolygon.stopEditingGrid()
}
}
// 开始绘制
export function startDrawGraphic() {
graphicLayer
.startDraw({
type: "videoPrimitive",
style: {
url: "//data.mars3d.cn/file/video/lukou.mp4",
opacity: 0.8
},
success: function (graphic) {
videoPolygon = graphic
}
})
.then((graphic) => {
videoPolygon = graphic
})
}
// 在图层绑定Popup弹窗
export function bindLayerPopup() {
graphicLayer.bindPopup(function (event) {
const attr = event.graphic.attr || {}
attr["类型"] = event.graphic.type
attr["来源"] = "我是layer上绑定的Popup"
attr["备注"] = "我支持鼠标交互"
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
})
}
// 绑定右键菜单
export function bindLayerContextMenu() {
graphicLayer.bindContextMenu([
{
text: "开始编辑对象",
icon: "fa fa-edit",
show: function (e) {
const graphic = e.graphic
if (!graphic || !graphic.hasEdit) {
return false
}
return !graphic.isEditing
},
callback: (e) => {
const graphic = e.graphic
if (!graphic) {
return false
}
if (graphic) {
graphicLayer.startEditing(graphic)
}
}
},
{
text: "停止编辑对象",
icon: "fa fa-edit",
show: function (e) {
const graphic = e.graphic
if (!graphic || !graphic.hasEdit) {
return false
}
return graphic.isEditing
},
callback: (e) => {
const graphic = e.graphic
if (!graphic) {
return false
}
if (graphic) {
graphic.stopEditing()
}
}
},
{
text: "开始编辑网格点",
icon: "fa fa-edit",
show: function (e) {
const graphic = e.graphic
if (!graphic) {
return false
}
return !graphic.isEditingGrid
},
callback: (e) => {
const graphic = e.graphic
if (!graphic) {
return false
}
if (graphic) {
graphic.startEditingGrid()
}
}
},
{
text: "停止编辑网格点",
icon: "fa fa-edit",
show: function (e) {
const graphic = e.graphic
if (!graphic) {
return false
}
return graphic.isEditingGrid
},
callback: (e) => {
const graphic = e.graphic
if (!graphic) {
return false
}
if (graphic) {
graphic.stopEditingGrid()
}
}
},
{
text: "删除对象",
icon: "fa fa-trash-o",
show: (event) => {
const graphic = event.graphic
if (!graphic || graphic.isDestroy) {
return false
} else {
return true
}
},
callback: (e) => {
const graphic = e.graphic
if (!graphic) {
return
}
const parent = graphic.parent // 右击是编辑点时
graphicLayer.removeGraphic(graphic)
if (parent) {
graphicLayer.removeGraphic(parent)
}
}
},
{
text: "计算周长",
icon: "fa fa-medium",
callback: (e) => {
const graphic = e.graphic
const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
globalAlert("该对象的周长为:" + strDis)
}
},
{
text: "计算面积",
icon: "fa fa-reorder",
callback: (e) => {
const graphic = e.graphic
const strArea = mars3d.MeasureUtil.formatArea(graphic.area)
globalAlert("该对象的面积为:" + strArea)
}
}
])
}
src/example/graphic/video/video2D-flv/map.js
...@@ -262,9 +262,9 @@ export function showFrustum(isCheckde) { ...@@ -262,9 +262,9 @@ export function showFrustum(isCheckde) {
} }
// 改变视频透明度 // 改变视频透明度
export function onChangeOpacity(value) { export function onChangeOpacity(opacity) {
if (video2D) { if (video2D) {
video2D.opacity = value video2D.setOpacity(opacity)
} }
} }
......
src/example/graphic/video/video2D/map.js
...@@ -89,7 +89,6 @@ function addDemoGraphic1() { ...@@ -89,7 +89,6 @@ function addDemoGraphic1() {
}) })
graphicLayer.addGraphic(video2D) graphicLayer.addGraphic(video2D)
// setTimeout(() => { // setTimeout(() => {
// video2D.setStyle({ // video2D.setStyle({
// url: "//data.mars3d.cn/file/video/lukou.mp4" // url: "//data.mars3d.cn/file/video/lukou.mp4"
...@@ -231,7 +230,7 @@ export function showFrustum(isCheckde) { ...@@ -231,7 +230,7 @@ export function showFrustum(isCheckde) {
// 修改视频的透明度 opacity 透明度数值 // 修改视频的透明度 opacity 透明度数值
export function onChangeOpacity(opacity) { export function onChangeOpacity(opacity) {
if (selectedView) { if (selectedView) {
selectedView.opacity = opacity selectedView.setOpacity(opacity)
} }
} }
......
src/example/graphic/video/video3D/map.js
...@@ -170,38 +170,48 @@ function addDemoGraphic2() { ...@@ -170,38 +170,48 @@ function addDemoGraphic2() {
} }
function addDemoGraphic3() { function addDemoGraphic3() {
const propertyFJ = getSampledPositionProperty([
[117.210592, 31.842438, 100],
[117.207898, 31.842374, 100],
[117.205376, 31.842337, 100],
[117.204489, 31.842824, 100]
])
const video3D = new mars3d.graphic.Video3D({ const video3D = new mars3d.graphic.Video3D({
position: [117.205457, 31.842984, 63.9], position: propertyFJ,
style: { style: {
url: "//data.mars3d.cn/file/video/menqian.mp4", url: "//data.mars3d.cn/file/video/menqian.mp4",
maskImage: "img/textures/video-mask.png", // 羽化视频四周，融合更美观 // maskImage: "img/textures/video-mask.png", // 羽化视频四周，融合更美观
angle: 46.3, angle: 20,
angle2: 15.5, angle2: 10,
heading: 178.5, heading: 178.5,
pitch: -90, pitch: -90,
showFrustum: true showFrustum: true
}, },
attr: { remark: "示例2" } attr: { remark: "示例3" }
}) })
graphicLayer.addGraphic(video3D) graphicLayer.addGraphic(video3D)
map.viewer.entities.add({ // map.on(mars3d.EventType.mouseMove, function (event) {
position: new Cesium.CallbackProperty(() => { // if (event.cartesian && video3D.isAdded) {
return video3D.position // video3D.position = mars3d.PointUtil.addPositionsHeight(event.cartesian, 10)
}, false), // }
point: { // })
pixelSize: 10 }
} // 计算演示的SampledPositionProperty轨迹
}) function getSampledPositionProperty(points) {
const property = new Cesium.SampledPositionProperty()
map.on(mars3d.EventType.mouseMove, function (event) { property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD
if (event.cartesian && video3D.isAdded) {
video3D.position = mars3d.PointUtil.addPositionsHeight(event.cartesian, 10) const start = map.clock.currentTime
} const positions = mars3d.LngLatArray.toCartesians(points)
}) for (let i = 0; i < positions.length; i++) {
const time = Cesium.JulianDate.addSeconds(start, i * 30, new Cesium.JulianDate())
const position = positions[i]
property.addSample(time, position)
}
return property
} }
export function onChangeAngle(value) { export function onChangeAngle(value) {
if (selectedView) { if (selectedView) {
......
src/example/map/fun/changeMouseModel/map.js
...@@ -43,3 +43,13 @@ export function shadingMaterials(val) { ...@@ -43,3 +43,13 @@ export function shadingMaterials(val) {
map.changeMouseModel(false) map.changeMouseModel(false)
} }
} }
// 解除ALT按键的操作
// const getInputAction_old = Cesium.ScreenSpaceEventHandler.prototype.getInputAction
// Cesium.ScreenSpaceEventHandler.prototype.getInputAction = function (type, modifier) {
// if (modifier === Cesium.KeyboardEventModifier.ALT) {
// modifier = undefined
// }
// return getInputAction_old.bind(this)(type, modifier)
// }
src/example/map/fun/expImage/index.tsx
...@@ -21,7 +21,6 @@ function UIComponent(props) { ...@@ -21,7 +21,6 @@ function UIComponent(props) {
> >
查看场景出图(弹窗) 查看场景出图(弹窗)
</MarsButton> </MarsButton>
<MarsButton <MarsButton
onClick={() => { onClick={() => {
mapWork.downLoad() mapWork.downLoad()
...@@ -29,7 +28,6 @@ function UIComponent(props) { ...@@ -29,7 +28,6 @@ function UIComponent(props) {
> >
下载场景出图 下载场景出图
</MarsButton> </MarsButton>
<MarsButton <MarsButton
onClick={() => { onClick={() => {
mapWork.downLoad2() mapWork.downLoad2()
...@@ -37,7 +35,6 @@ function UIComponent(props) { ...@@ -37,7 +35,6 @@ function UIComponent(props) {
> >
下载场景缩略图 下载场景缩略图
</MarsButton> </MarsButton>
<MarsButton <MarsButton
onClick={() => { onClick={() => {
mapWork.downLoadDiv() mapWork.downLoadDiv()
...@@ -45,6 +42,17 @@ function UIComponent(props) { ...@@ -45,6 +42,17 @@ function UIComponent(props) {
> >
下载场景出图(含DIV部分) 下载场景出图(含DIV部分)
</MarsButton> </MarsButton>
{imges.length ? <img className="f-mb" alt="截缩略图" src={imges} style={{ width: "100%", height: "100%" }} /> : ""}
<MarsButton
onClick={() => {
mapWork.showMapImg().then((image) => {
setImageValue(image)
})
}}
>
截缩略图
</MarsButton>
</Space> </Space>
</MarsPannel> </MarsPannel>
......
src/example/map/options/scene-center/index.tsx
import { MarsPannel, MarsButton, MarsCollapse, MarsCollapsePanel } from "@mars/components/MarsUI" import { MarsPannel, MarsButton, MarsCollapse, MarsCollapsePanel, MarsFormItem, MarsInput } from "@mars/components/MarsUI"
import { Row, Col, Space } from "antd" import { Row, Col, Space } from "antd"
import * as mapWork from "./map.js" import * as mapWork from "./map.js"
import "./index.less" import "./index.less"
import { useState } from "react"
// 创建地图 // 创建地图
const cameraData = [ const cameraData = [
...@@ -52,6 +53,27 @@ const cameraData = [ ...@@ -52,6 +53,27 @@ const cameraData = [
} }
] ]
function UIComponent() { function UIComponent() {
let obj
const [formObj, setFormObj] = useState({
lng: 0,
lat: 0,
alt: 0,
heading: 0,
pitch: 0,
roll: 0
})
setTimeout(() => {
obj = mapWork.map.getCameraView({ simplify: false })
setFormObj(obj)
mapWork.map.on("cameraChanged", function (event) {
obj = mapWork.map.getCameraView({ simplify: false })
setFormObj(obj)
})
}, 500)
return ( return (
<MarsPannel visible={true} top={10} right={10} width={310}> <MarsPannel visible={true} top={10} right={10} width={310}>
<MarsCollapse defaultActiveKey={["1", "2"]}> <MarsCollapse defaultActiveKey={["1", "2"]}>
...@@ -72,6 +94,36 @@ function UIComponent() { ...@@ -72,6 +94,36 @@ function UIComponent() {
</MarsButton> </MarsButton>
) )
})} })}
<MarsFormItem label="经度值">
<MarsInput
value={formObj.lng}
></MarsInput>
</MarsFormItem>
<MarsFormItem label="纬度值">
<MarsInput
value={formObj.lat}
></MarsInput>
</MarsFormItem>
<MarsFormItem label="高度值">
<MarsInput
value={formObj.alt}
></MarsInput>
</MarsFormItem>
<MarsFormItem label="方向角">
<MarsInput
value={formObj.heading}
></MarsInput>
</MarsFormItem>
<MarsFormItem label="俯仰角">
<MarsInput
value={formObj.pitch}
></MarsInput>
</MarsFormItem>
<MarsFormItem label="翻滚角">
<MarsInput
value={formObj.roll}
></MarsInput>
</MarsFormItem>
</Space> </Space>
</MarsCollapsePanel> </MarsCollapsePanel>
</MarsCollapse> </MarsCollapse>
......
src/example/thing/tileset/tilesetPlanClip/index.tsx
...@@ -21,20 +21,6 @@ function UIComponent() { ...@@ -21,20 +21,6 @@ function UIComponent() {
}, },
{ {
type: "slider", type: "slider",
field: "normalVal",
label: "斜切偏移量:",
step: 0.1,
min: -10,
max: 10,
value: 0,
extra: "值：{normalVal}",
extraWidth: 80,
change(data) {
mapWork.rangeNormalZ(data)
}
},
{
type: "slider",
field: "rotationAngle1", field: "rotationAngle1",
label: "旋转角度1:", label: "旋转角度1:",
step: 0.1, step: 0.1,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论