Skip to content

M
mars3d
Commit e6dcdb04 by wanghao
Options

同步代码 v3.5.4

parent 2a8b26d5
正在显示 包含 1259 行增加 和 66 行删除
public/config/config.json
......@@ -155,14 +155,6 @@
"layer": "Aerial"
},
{
"pid": 10,
"name": "OSM地图(暂不可用)",
"type": "xyz",
"icon": "/img/basemaps/osm.png",
"url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
"subdomains": "abc"
},
{
"id": 2017,
"pid": 10,
"name": "暗色底图",
......@@ -233,6 +225,16 @@
"icon": "/img/basemaps/offline.png",
"type": "image",
"url": "//data.mars3d.cn/file/img/world/world.jpg"
},
{
"id": 2023,
"pid": 10,
"name": "无底图",
"icon": "/img/basemaps/null.png",
"type": "grid",
"color": "#ffffff",
"alpha": 0.03,
"cells": 2
}
],
"layers": [
......@@ -1081,7 +1083,7 @@
"center": { "lat": 34.215516, "lng": 108.960251, "alt": 834, "heading": 4, "pitch": -48 },
"flat": {
"enabled":true,
"flatHeight": 420
"editHeight": 420
},
"flyTo": false,
"show": false
......
public/config/example.json
......@@ -161,22 +161,18 @@
"main": "thing/terrain/terrainPlanClip",
"hasPannel": true
},
{
"name": "地形压平",
"thumbnail": "thing-terrain-terrainFlat.jpg",
"main": "thing/terrain/terrainFlat",
"hasPannel": true,
"new": true
"hasPannel": true
},
{
"name": "地形抬升",
"thumbnail": "thing-terrain-terrainUp.jpg",
"main": "thing/terrain/terrainUp",
"hasPannel": true,
"new": true
"hasPannel": true
},
{
"name": "等高线",
"thumbnail": "thing-terrain-contourLine.jpg",
......@@ -666,15 +662,13 @@
"hasPannel": true,
"resources": ["HuxingLayer.js"]
},
{
"name": "SHP转GeoJson加载",
"thumbnail": "layerg-geojson-shp2json.jpg",
"main": "layer-graphic/geojson/shp2json",
"hasPannel": true,
"libs": ["mars3d", "shpGeojson"],
"resources": ["Shp2JsonLayer.js"],
"new": true
"resources": ["Shp2JsonLayer.js"]
},
{
"name": "KML/KMZ转GeoJson加载",
......@@ -1112,8 +1106,7 @@
"name": "双面渲染平面",
"thumbnail": "graphic-primitive-doubleSidedPlane.jpg",
"main": "graphic/primitive/doubleSidedPlane",
"hasPannel": true,
"new": true
"hasPannel": true
},
{
"name": "Box 盒子",
......@@ -1270,8 +1263,7 @@
"name": "厚度墙 Demo",
"thumbnail": "graphic-primitive-thickWall.jpg",
"main": "graphic/primitive/thickWall",
"hasPannel": true,
"new": true
"hasPannel": true
},
{
"name": "Rectangle 矩形",
......@@ -1295,8 +1287,7 @@
"name": "反射水面",
"thumbnail": "graphic-primitive-reflectionWater.jpg",
"main": "graphic/primitive/reflectionWater",
"hasPannel": true,
"new": true
"hasPannel": true
},
{
"name": "井",
......@@ -1518,6 +1509,11 @@
"main": "graphic/custom/route-tileset"
},
{
"name": "AIS动态目标",
"thumbnail": "graphic-custom-route-ais.jpg",
"main": "graphic/custom/route-ais"
},
{
"name": "FixedRoute 历史轨迹路线",
"thumbnail": "graphic-custom-fixedRoute.jpg",
"main": "graphic/custom/fixedRoute",
......@@ -1558,8 +1554,7 @@
{
"name": "无人机航拍",
"thumbnail": "graphic-custom-fixedRoute-shoot.jpg",
"main": "graphic/custom/fixedRoute-shoot",
"new": true
"main": "graphic/custom/fixedRoute-shoot"
},
{
"name": "飞机路线",
......@@ -1791,6 +1786,14 @@
"main": "graphic/space/tle-getPoint",
"hasPannel": true,
"libs": ["mars3d", "mars3d-space"]
},
{
"name": "卫星推演",
"thumbnail": "graphic-space-deduce.jpg",
"main": "graphic/space/deduce",
"hasPannel": true,
"libs": ["mars3d", "mars3d-space"],
"resources": ["map.css"]
}
]
},
......@@ -1814,6 +1817,12 @@
"resources": ["/temp/css/UnidreamLED.css"]
},
{
"name": "行政区",
"thumbnail": "graphic-apply-quyu.jpg",
"main": "graphic/apply/quyu",
"resources": ["map.css"]
},
{
"name": "行政区突出展示",
"thumbnail": "graphic-apply-district.jpg",
"main": "graphic/apply/district",
......@@ -1826,11 +1835,6 @@
"resources": ["district2.css"]
},
{
"name": "红蓝对抗演习",
"thumbnail": "graphic-apply-exercise.jpg",
"main": "graphic/apply/exercise"
},
{
"name": "台风轨迹",
"thumbnail": "graphic-apply-typhoon.jpg",
"main": "graphic/apply/typhoon",
......@@ -1847,6 +1851,26 @@
"thumbnail": "graphic-apply-digitalCity.jpg",
"main": "graphic/apply/digitalCity",
"resources": ["city.css"]
},
{
"name": "红蓝对抗演习",
"thumbnail": "graphic-apply-exercise.jpg",
"main": "graphic/apply/exercise"
},
{
"name": "飞机巡航",
"thumbnail": "graphic-apply-cruise.jpg",
"main": "graphic/apply/cruise",
"hasPannel": true,
"resources": ["map.css"]
},
{
"name": "海洋应急",
"thumbnail": "graphic-apply-seaRescue.jpg",
"main": "graphic/apply/seaRescue",
"hasPannel": true,
"libs": ["mars3d", "mars3d-space", "mars3d-heatmap"],
"resources": ["/temp/css/divGraphic.css"]
}
]
},
......@@ -2184,7 +2208,12 @@
"main": "thing/tileset/tilesetClip",
"hasPannel": true
},
{
"name": "模型淹没分析",
"thumbnail": "thing-tileset-tilesetFlood.jpg",
"main": "thing/tileset/tilesetFlood",
"hasPannel": true
},
{
"name": "限高分析",
"thumbnail": "thing-tileset-limitHeight.jpg",
......@@ -2489,8 +2518,7 @@
"name": "方量分析(体积)-离屏渲染方式",
"thumbnail": "thing-analysis-measure-volume-depth.jpg",
"main": "thing/analysis/measure-volume-depth",
"hasPannel": true,
"new": true
"hasPannel": true
},
{
"name": "通视分析",
......
public/lib/Cesium/Cesium.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/Cesium/Workers/cesiumWorkerBootstrapper.js
/**
* @license
* Cesium - https://github.com/CesiumGS/cesium
* Version 1.104
* Version 1.104.2
*
* Copyright 2011-2022 Cesium Contributors
*
......
public/lib/Cesium/Workers/package.js
/**
* @license
* Cesium - https://github.com/CesiumGS/cesium
* Version 1.104
* Version 1.104.2
*
* Copyright 2011-2022 Cesium Contributors
*
......
public/lib/Cesium/Workers/transferTypedArrayTest.js
/**
* @license
* Cesium - https://github.com/CesiumGS/cesium
* Version 1.104
* Version 1.104.2
*
* Copyright 2011-2022 Cesium Contributors
*
......
public/lib/Cesium/index.cjs
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/Cesium/index.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/includeLibs.js
......@@ -136,6 +136,6 @@ window.configLibs = {
three: ["three/three.js"],
'hls': ["video/hls/hls.js"],
'flv': ["video/flv/flv.min.js"],
tween: ["tween/Tween.js"]
}
public/lib/mars3d/mars3d.css
/**
* Mars3D三维可视化平台 mars3d
*
* 版本信息：v3.5.3
* 编译日期：2023-04-18 09:45:21
* 版本信息：v3.5.4
* 编译日期：2023-04-24 10:58:26
* 版权所有：Copyright by 火星科技 http://mars3d.cn
* 使用单位：免费公开版 ，2023-03-17
*/
......
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/wind/mars3d-wind.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/tween/README.md 0 → 100644
#turf GIS地图空间分析库
github地址：https://github.com/tweenjs/tween.js
src/example/graphic/apply/cruise/index.tsx 0 → 100644
import { MarsButton, MarsPannel } from "@mars/components/MarsUI"
import { useState } from "react"
import { Space } from "antd"
import * as mapWork from "./map.js"
function UIComponent() {
const [isStart, setIsStart] = useState(false)
const [isPause, setIsPause] = useState(false)
const startPlay = () => {
mapWork.circleFixedRoute.start() // 启动漫游
mapWork.attackFixedRoute.start() // 启动漫游
udpateState()
}
const pausePlay = () => {
mapWork.circleFixedRoute.pause()
mapWork.attackFixedRoute.pause()
udpateState()
}
const proceedPlay = () => {
mapWork.circleFixedRoute.proceed()
mapWork.attackFixedRoute.proceed()
udpateState()
}
const stopPlay = () => {
mapWork.stopPlay(true)
}
mapWork.eventTarget.on("changeFixedRoute", udpateState)
function udpateState() {
setTimeout(() => {
setIsStart(mapWork.circleFixedRoute.isStart)
setIsPause(mapWork.circleFixedRoute.isPause)
}, 100)
}
return (
<MarsPannel visible={true} right={10} top={10}>
<Space>
{!isStart ? <MarsButton onClick={startPlay}>开始</MarsButton> : ""}
{isStart && !isPause ? <MarsButton onClick={pausePlay}>暂停</MarsButton> : ""}
{isStart && isPause ? <MarsButton onClick={proceedPlay}>继续</MarsButton> : ""}
{isStart ? <MarsButton onClick={stopPlay}>停止</MarsButton> : ""}
</Space>
</MarsPannel>
)
}
export default UIComponent
src/example/graphic/apply/cruise/map.css 0 → 100644
.mars-city {
position: relative;
left: 0;
}
.mars-city .arrow {
position: absolute;
bottom: 0;
left: 0;
width: 45px;
height: 2px;
transform: rotate(-45deg) translate(5px, -15px);
background-color: #28bbf0;
}
.mars-city-desc {
width: 400px;
max-height: 223px;
overflow: auto;
padding: 5px 10px;
cursor: default;
opacity: 0.96;
border: 1px solid #2592fc;
box-shadow: 0px 2px 21px 0px rgba(33, 34, 39, 0.55);
box-sizing: border-box;
background: rgb(14 14 14 / 68%);
position: relative;
top: -28px;
left: 30px;
}
.mars-city-desc_title {
position: relative;
padding-bottom: 5px;
text-align: center;
margin-bottom: 7px;
}
.mars-city-desc_title::after {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background-color: #2592fc;
}
.mars-city-desc_content {
text-indent: 2em;
letter-spacing: 3px;
padding-bottom: 10px;
max-width: 400px;
}
.mars-city-desc_content p {
margin: 0;
}
\ No newline at end of file
src/example/graphic/apply/quyu/map.css 0 → 100644
.mars-four-color {
width: 86px;
position: relative;
top: -68px;
left: -37px;
cursor: pointer;
}
.mars-four-color .four-color_bg {
position: absolute;
}
.mars-four-color .four-color_name {
width: 100%;
position: absolute;
top: 8px;
text-align: center;
}
.mars3d-animation {
animation: cameraMove 1s linear infinite alternate;
-webkit-animation: cameraMove 1s linear infinite alternate;
}
@keyframes cameraMove {
from {
top: -100px;
}
to {
top: -68px;
}
}
@-webkit-keyframes cameraMove {
from {
top: -100px;
}
to {
top: -68px;
}
}
\ No newline at end of file
src/example/graphic/apply/quyu/map.js 0 → 100644
import * as mars3d from "mars3d"
export let map
let graphicLayer
let terrainClip
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并)
export const mapOptions = {
scene: {
center: { lat: 30.773023, lng: 116.473055, alt: 133111.3, heading: 40.4, pitch: -47.9 },
orderIndependentTranslucency: false,
contextOptions: { webgl: { alpha: true } }, // 允许透明，只能Map初始化传入 [关键代码]
showMoon: false,
showSkyBox: false,
showSkyAtmosphere: false,
fog: false,
globe: {
baseColor: "rgba(0,0,0,0)",
showGroundAtmosphere: false,
enableLighting: false
}
},
control: {
baseLayerPicker: true
},
terrain: { show: false }
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
map.basemap = 2017
map.container.style.backgroundImage = "url(/img/tietu/backGroundImg.jpg)"
map.container.style.backgroundRepeat = "no-repeat"
map.container.style.backgroundSize = "100% 100%"
// 添加矢量图层
graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
// graphicLayer 图层下的所有矢量数据都会触发该事件
graphicLayer.on(mars3d.EventType.click, (event) => {
const attr = event.graphic?.attr
if (attr) {
globalMsg(attr.name + ":" + attr.adcode)
}
})
terrainClip = new mars3d.thing.TerrainClip({
image: false,
splitNum: 80 // 井边界插值数
})
map.addThing(terrainClip)
addArea()
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
}
// 添加安徽省底图和墙
function addArea() {
// 成都某市边界线墙
const citySide = new mars3d.layer.GeoJsonLayer({
url: "http://data.mars3d.cn/file/geojson/areas/340100.json",
chinaCRS: mars3d.ChinaCRS.GCJ02, // 标识数据坐标，内部会纠偏
// format: simplifyGeoJSON, // 用于自定义处理geojson - 简化坐标(边界闪光有毛刺，可进行简化)
// 自定义解析数据
onCreateGraphic: function (options) {
terrainClip.addArea(options.positions)
terrainClip.clipOutSide = true
const polylineGraphic = new mars3d.graphic.PolylineEntity({
positions: options.positions,
style: {
width: 10,
color: "#b3e0ff",
depthFail: false,
materialType: mars3d.MaterialType.PolylineGlow,
materialOptions: {
color: "#b3e0ff",
glowPower: 0.3,
taperPower: 1.0
}
}
})
citySide.addGraphic(polylineGraphic)
const wall = new mars3d.graphic.WallPrimitive({
positions: options.positions,
style: {
setHeight: -20000,
diffHeight: 20000, // 墙高
width: 10,
materialType: mars3d.MaterialType.Image2,
materialOptions: {
image: "./img/textures/fence-top.png",
color: "#0b88e3"
}
}
})
citySide.addGraphic(wall)
}
})
map.addLayer(citySide)
const areaSide = new mars3d.layer.GeoJsonLayer({
url: "http://data.mars3d.cn/file/geojson/areas/340100_full.json",
// format: simplifyGeoJSON, // 用于自定义处理geojson - 简化坐标(边界闪光有毛刺，可进行简化)
// 自定义解析数据
onCreateGraphic: function (options) {
const attr = options.attr // 属性信息
const graphic = new mars3d.graphic.PolylinePrimitive({
positions: options.positions,
style: {
color: "rgba(255,255,255,0.3)",
depthFail: true,
width: 2
},
attr: attr
})
areaSide.addGraphic(graphic)
addCenterGraphi(attr)
}
})
map.addLayer(areaSide)
}
function addCenterGraphi(attr) {
const circleGraphic = new mars3d.graphic.CircleEntity({
position: new mars3d.LngLatPoint(attr.centroid[0], attr.centroid[1], 100),
style: {
radius: 5000,
materialType: mars3d.MaterialType.CircleWave,
materialOptions: {
color: "#0b88e3",
count: 2,
speed: 10
}
},
attr
})
graphicLayer.addGraphic(circleGraphic)
const divGraphic = new mars3d.graphic.DivGraphic({
position: attr.centroid,
style: {
html: `<div class="mars-four-color mars3d-animation">
<img src="${getImage()}" class="four-color_bg"></img>
<div class="four-color_name">${attr.name}</div>
</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.CENTER,
clampToGround: true
},
attr
})
graphicLayer.addGraphic(divGraphic)
}
// 简化geojson的坐标
function simplifyGeoJSON(geojson) {
try {
geojson = turf.simplify(geojson, { tolerance: 0.009, highQuality: true, mutate: true })
} catch (e) {
//
}
return geojson
}
// 根据随机数字取图片
function getImage() {
const num = Math.floor(Math.random() * 5)
switch (num) {
case 1:
return "/img/icon/map-title-y.png"
case 2:
return "/img/icon/map-title-h.png"
case 3:
return "/img/icon/map-title-o.png"
case 4:
return "/img/icon/map-title-r.png"
default:
return "/img/icon/map-title-b.png"
}
}
src/example/graphic/apply/seaRescue/index.tsx 0 → 100644
import { MarsButton, MarsPannel, MarsTree, MarsIcon } from "@mars/components/MarsUI"
import { useMemo, useState } from "react"
import { Space } from "antd"
import * as mapWork from "./map.js"
const treeData: any[] = [
{
title: "发送信号",
key: "01",
times: 4,
widget() {
mapWork.firstStep()
}
},
{
title: "传送信号",
key: "02",
times: 4,
widget() {
mapWork.secondStep()
}
},
{
title: "下达指令",
key: "03",
times: 4,
widget() {
mapWork.thirdStep()
}
},
{
title: "准备出发",
key: "04",
times: 4,
widget() {
mapWork.forthStep()
}
},
{
title: "出发",
key: "05",
times: 6,
widget() {
mapWork.fifthStep()
}
},
{
title: "处理泄露",
key: "06",
times: 4,
widget() {
mapWork.sixthStep()
}
},
{
title: "完成营救",
key: "07",
times: 4,
widget() {
mapWork.seventhStep()
}
}
]
let interval: any
let timer: any // 定时器
let currentIndex = 0
const animations: any[] = []
function UIComponent() {
const [totalTimes, setTotalTimes] = useState<string>() // 总时长
const [currentWork, setCurrentWork] = useState<string>()
const [selectedKeys, setSelectedKeys] = useState<any>()
let [counter, setCounter] = useState<any>()
const [isPlay, setIsPlay] = useState(false)
const [isPause, setIsPause] = useState(false)
useMemo(() => {
let i = 0
let time = 0
treeData.forEach((item) => {
const animationItem = item
animationItem.index = i
time += item.times
i++
animations.push(animationItem)
})
setTotalTimes(`${Math.floor(time / 60)}分${time % 60}秒`)
}, [])
function play() {
setIsPlay(true)
setIsPause(false)
start()
}
function pause() {
clearTimeout(timer)
currentIndex--
setIsPause(true)
}
function stop() {
setIsPlay(false)
setIsPause(false)
if (timer) {
clearTimeout(timer)
}
if (interval) {
clearInterval(interval)
}
setCounter(0)
currentIndex = 0
timer = null
interval = null
setCurrentWork("")
mapWork.stop()
}
const startBegin = (item: any) => {
currentIndex = item.index
play()
}
const start = () => {
if (timer) {
clearTimeout(timer)
}
if (interval) {
clearInterval(interval)
}
if (currentIndex < animations.length) {
const animate = animations[currentIndex]
setSelectedKeys([animate.key])
setCurrentWork(`${animate.title}(${animate.times}秒)`)
setCounter(animate.times)
countOn()
animate.widget()
currentIndex++
timer = setTimeout(() => {
start()
}, animate.times * 1000)
} else {
stop()
}
}
const countOn = () => {
interval = setInterval(() => {
counter--
setCounter(counter)
if (counter <= 0) {
clearInterval(interval)
}
}, 1000)
}
// 自定义渲染节点
const renderNode = (node: any) => {
return (
<>
{node.times ? (
<span>
{node.title} ({node.times}秒)
</span>
) : (
<span>{node.title}</span>
)}
</>
)
}
return (
<MarsPannel visible={true} right={10} top={10} width={200}>
<Space>
{(!isPlay || isPause) ? <MarsButton onClick={play}>
<Space>
<MarsIcon icon="handle-triangle" className="icon-vertical-a"></MarsIcon>
<span>{isPause ? "继续" : "开始"}</span>
</Space>
</MarsButton> : ""}
{(isPlay && !isPause) ? <MarsButton onClick={pause}>
<Space>
<MarsIcon icon="pause-one" className="icon-vertical-a"></MarsIcon>
<span>暂停</span>
</Space>
</MarsButton> : ""}
{isPlay ? <MarsButton onClick={stop}>
<Space>
<MarsIcon icon="power" className="icon-vertical-a"></MarsIcon>
<span>停止</span>
</Space>
</MarsButton> : ""}
</Space>
<MarsTree treeData={treeData} defaultExpandAll checkable={false} selectedKeys={selectedKeys} titleRender={renderNode} onSelect={startBegin}> </MarsTree>
{
isPlay ? (
<>
<h3 className="f-mb show-time">总时长：{totalTimes}</h3>
<h3 className="f-mb show-time">当前: {currentWork}&nbsp;{counter}秒</h3>
</>
) : ""
}
</MarsPannel>
)
}
export default UIComponent
src/example/graphic/apply/seaRescue/map.css 0 → 100644
.show-time {
color: #fff;
}
\ No newline at end of file
src/example/graphic/custom/route-ais/map.js 0 → 100644
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
fxaa: true,
center: { lat: 32.576038, lng: 118.586631, alt: 2296055.4, heading: 357.1, pitch: -88.5 }
}
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
// 创建矢量数据图层
graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
// 在layer上绑定监听事件
graphicLayer.on(mars3d.EventType.click, function (event) {
console.log("监听layer，单击了矢量对象", event)
})
bindLayerPopup() // 在图层上绑定popup,对所有加到这个图层的矢量数据都生效
bindLayerContextMenu() // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/apidemo/ais.json" }).then(function (json) {
const arr = []
for (let i = 0; i < json.points.length; i++) {
const item = json.points[i]
if (item.lon < 90 || item.lon > 160 || item.lat < 0 || item.lat > 50) {
continue
}
arr.push(item)
}
console.log("加载AIS数据", arr)
addDemoGraphics(arr)
})
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
}
export function addDemoGraphics(points) {
for (let i = 0; i < points.length; i++) {
const item = points[i]
const graphic = new mars3d.graphic.Route({
point: {
color: "#ff0000",
pixelSize: 5,
distanceDisplayCondition: true,
distanceDisplayCondition_far: Number.MAX_VALUE,
distanceDisplayCondition_near: 100000
},
model: {
url: "//data.mars3d.cn/gltf/mars/ship/ship09.glb",
minimumPixelSize: 40,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 100000
},
attr: item
})
graphicLayer.addGraphic(graphic)
const point = new mars3d.LngLatPoint(item.lon, item.lat)
graphic.addDynamicPosition(point, 0)
}
// 定时更新动态位置（setInterval为演示）
const interval = 3
changePosition(interval)
setInterval(() => {
changePosition(interval)
}, interval * 1000)
}
let offset = 0
// 改变位置
function changePosition(time) {
offset += 0.02
graphicLayer.eachGraphic((graphic) => {
if (graphic.isPrivate) {
return
}
const item = graphic.attr
const point = new mars3d.LngLatPoint(item.lon + offset, item.lat + offset)
graphic.addDynamicPosition(point, time)
})
}
// 在图层绑定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-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)
}
}
}
])
}
export function clearGraphic() {
graphicLayer.clear(true)
}
src/example/graphic/entity/billboard-clustering/map.js
......@@ -20,6 +20,56 @@ export const mapOptions = {
export function onMounted(mapInstance) {
map = mapInstance // 记录map
// addGeojosnLayer()
addBusinessLayer()
}
function addGeojosnLayer() {
graphicLayer = new mars3d.layer.GeoJsonLayer({
name: "体育设施点",
popup: "all",
clustering: {
enabled: true,
pixelRange: 20,
clampToGround: false
},
center: { lat: 31.639275, lng: 117.388877, alt: 52574.8, heading: 339.3, pitch: -65 },
flyTo: true
})
map.addLayer(graphicLayer)
mars3d.Util.fetchJson({
url: "//data.mars3d.cn/file/geojson/hfty-point.json"
}).then((res) => {
const points = []
for (let i = 0; i < res.features.length; i++) {
const item = res.features[i]
const p = new mars3d.graphic.LabelEntity({
position: item.geometry.coordinates,
style: {
show: true,
text: "测试",
font_size: 14,
fill: true,
color: "#fcfa36",
font_family: "楷体",
font_weight: "bold",
outline: true,
outlineColor: "rgba(0,0,0,0.8)",
outlineWidth: 3,
background: true,
backgroundColor: "#009476",
visibleDepth: false
}
})
points.push(p)
}
graphicLayer.addGraphic(points)
})
}
function addBusinessLayer() {
// 创建矢量数据图层（业务数据图层）
graphicLayer = new mars3d.layer.BusineDataLayer({
url: "//data.mars3d.cn/file/apidemo/mudi.json",
......@@ -27,6 +77,19 @@ export function onMounted(mapInstance) {
lngColumn: "lng",
latColumn: "lat",
altColumn: "z",
// 自定义创建对象，可替代symbol、
// onCreateGraphic: function (e) {
// const graphic = new mars3d.graphic.BillboardEntity({
// position: e.position,
// style: {
// image: "img/marker/lace-blue.png",
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
// },
// attr: e.attr
// })
// graphicLayer.addGraphic(graphic)
// },
symbol: {
type: "billboard", // 对应是 mars3d.graphic.BillboardEntity
styleOptions: {
......
src/example/graphic/space/deduce/index.tsx 0 → 100644
import { MarsButton, MarsPannel, MarsTree } from "@mars/components/MarsUI"
import { useMemo, useState } from "react"
import { Space } from "antd"
import * as mapWork from "./map.js"
const treeNodes: any[] = [
{
title: "卫星推演",
key: 1,
children: [
{
title: "初始化场景",
key: "01-01",
message: "正在初始化推演场景",
times: 2,
widget() {
mapWork.initScene()
}
},
{
title: "需求受理",
key: "01-02",
times: 8,
message: "中国资源卫星应用中心接收到需求，开始受理需求",
widget() {
mapWork.acceptance()
}
},
{
title: "任务编排",
key: "01-03",
times: 7,
message: "中国资源卫星应用中心正在对任务进行编排",
widget() {
mapWork.task()
}
},
{
title: "任务上注",
key: "01-04",
times: 10,
message: "中国资源卫星应用中心正在对任务进行上注处理",
widget() {
mapWork.startTask()
}
},
{
title: "卫星观测",
key: "01-05",
message: "通过卫星观测,返回观测数据",
times: 15,
widget() {
mapWork.satelliteLook()
}
},
{
title: "数据接收",
key: "01-06",
times: 10,
message: "接收到卫星返回的观测数据",
widget() {
mapWork.sendDataAction()
}
},
{
title: "数据传输",
key: "01-07",
message: "开始传输数据",
times: 10,
widget() {
mapWork.transferringData()
}
},
{
title: "产品生产",
key: "01-08",
message: "开始生产产品",
times: 5,
widget() {
mapWork.production()
}
},
{
title: "产品分发",
key: "01-09",
message: "对产品进行分发",
times: 5,
widget() {
mapWork.distribution()
}
}
]
}
]
let stopTimer: any
let timer: any // 定时器
let currentIndex = 0
let animations: any[] = []
function UIComponent() {
useMemo(() => {
let i = 0
let time = 0
treeNodes.forEach((item) => {
animations = animations.concat(
item.children.map((it: any) => {
time += it.times
it.index = i
i++
return it
})
)
})
}, [])
const [selectKey, setSelectKey] = useState<string>()
const [selectedKeys, setSelectKeys] = useState<any>()
const [isPlay, setIsPlay] = useState(false)
let [isPause, setIsPause] = useState(false)
// 开始推演
const startPlay = async () => {
setIsPlay(true)
if (timer) {
clearTimeout(timer) // 清除定时器
}
if (currentIndex < animations.length) {
const animate: any = animations[currentIndex]
setSelectKey(animate.key)
setSelectKeys([animate.key])
await animate.widget() // 执行map.js中的方法
currentIndex++
timer = setTimeout(() => {
startPlay()
}, animate.times * 1000)
if (currentIndex === 9) {
stopTimer = setTimeout(() => {
stopPlay()
}, 10000)
}
}
}
// 停止推演
const stopPlay = () => {
setIsPlay(false)
setIsPause(false)
mapWork.clearAll()
clearTimeout(timer)
clearTimeout(stopTimer)
setSelectKey("")
currentIndex = 0
}
// 暂停推演
const pausePlay = () => {
isPause = !isPause
setIsPause(isPause)
if (isPause) {
clearTimeout(timer)
clearTimeout(stopTimer)
} else {
startPlay()
}
}
const renderNode = (node: any) => {
return (
<>
{node.key === selectKey ? <span className="runing-item" style={{ background: "rgba(0, 138, 255, 0.5)" }}>{node.title} </span> : <span>{node.title}</span>
}
</>
)
}
return (
<MarsPannel visible={true} right={10} top={10}>
{
isPlay ? (
<Space>
<MarsButton onClick={stopPlay}>停止推演</MarsButton>
<MarsButton onClick={pausePlay}>{isPause ? "继续" : "暂停"}</MarsButton>
</Space>
) : (<MarsButton onClick={startPlay}>开始推演</MarsButton>)
}
<MarsTree treeData={treeNodes} defaultExpandAll checkable={false} selectedKeys={selectedKeys} titleRender={renderNode}>
</MarsTree>
</MarsPannel>
)
}
export default UIComponent
src/example/graphic/space/deduce/map.css 0 → 100644
.info {
position: absolute;
left: 100px;
bottom: 40px;
width: 170px;
height: 245px;
border: 1px solid #01FFFF;
box-shadow: 0px 4px 15px 1px rgba(2, 33, 59, 0.7);
border-radius: 0px;
background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
background-color: rgba(11, 38, 38, 0.6);
color: #fff;
}
.title {
padding-left: 10px;
height: 30px;
line-height: 30px;
font-size: 16px;
background: rgba(0, 156, 156, 0.1);
border: 1px solid rgba(1, 255, 255, 0.5);
box-shadow: inset 0px 0px 15px 0px rgba(1, 255, 255, 0.5);
}
.info h3 {
float: left;
width: 152px;
}
.info p {
font-size: 12px;
line-height: 18px;
}
src/example/layer-tileset/style/bim-floor/map.js
......@@ -76,6 +76,7 @@ export function show(num) {
// 说明：https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling
function showCengByStyle(ceng) {
tiles3dLayer.closeHighlight()
tiles3dLayer.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
......
src/example/layer-tileset/type/basis/map.js
......@@ -289,7 +289,32 @@ export function showJzwHefeiDemo() {
url: "//data.mars3d.cn/3dtiles/jzw-hefei/tileset.json",
maximumScreenSpaceError: 1,
maximumMemoryUsage: 1024,
marsJzwStyle: true, // 打开建筑物特效（内置Shader代码）
// marsJzwStyle: true, // 打开建筑物特效（内置Shader代码）
marsJzwStyle: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
{
vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
// 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
float _heightRange = 80.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
float _glowRange = 100.0; // 光环的移动范围(高度)
// 建筑基础色
float mars_height = (u_mars3d_jzw_upz ? position.z : position.y) - _baseHeight;
float mars_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
float mars_a12 = mars_height / _heightRange + sin(mars_a11) * 0.1;
material.diffuse = mix(material.diffuse, vec3(0.0, 0.0, 1.0), 0.5); // 颜色
material.diffuse *= vec3(mars_a12);// 渐变
// 动态光环
float time = fract(czm_frameNumber / 360.0);
time = abs(time - 0.5) * 2.0;
float mars_h = clamp(mars_height / _glowRange, 0.0, 1.0);
float mars_diff = step(0.005, abs(mars_h - time));
material.diffuse += material.diffuse * (1.0 - mars_diff);
} `,
popup: [
{ field: "objectid", name: "编号" },
{ field: "name", name: "名称" },
......
src/example/layer-tileset/type/bim-qiaoliang/map.js
......@@ -38,7 +38,7 @@ export function onMounted(mapInstance) {
maximumMemoryUsage: 2048,
dynamicScreenSpaceError: true,
cullWithChildrenBounds: false,
luminanceAtZenith: 0.6,
position: { lng: 117.096906, lat: 31.851564, alt: 45 },
rotation: { z: 17.5 },
......
src/example/map/fun/setCameraViewList/map.js
......@@ -37,6 +37,8 @@ export function onMounted(mapInstance) {
// 视角切换（分步执行）
map.setCameraViewList(viewPoints)
// showCameraRoute(viewPoints) // 显示相机点的位置方向和路线，便于对比查看
}
/**
......@@ -46,3 +48,63 @@ export function onMounted(mapInstance) {
export function onUnmounted() {
map = null
}
// 显示相机点的位置方向和路线，便于对比查看
function showCameraRoute(viewPoints) {
// 创建矢量数据图层
const graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
const points = []
for (let i = 0; i < viewPoints.length; i++) {
const item = viewPoints[i]
const position = Cesium.Cartesian3.fromDegrees(item.lng, item.lat, item.alt)
points.push(position)
// 文本
const graphic = new mars3d.graphic.LabelPrimitive({
position: position,
style: {
text: i,
font_size: 14
}
})
graphicLayer.addGraphic(graphic)
// 相机角度示意
const camera = new Cesium.Camera(map.scene)
camera.position = position
camera.frustum.aspectRatio = 1
camera.frustum.fov = Cesium.Math.toRadians(45)
camera.frustum.near = 0.01
camera.frustum.far = 1
camera.setView({
destination: position,
orientation: { heading: Cesium.Math.toRadians(item.heading), pitch: Cesium.Math.toRadians(item.pitch) }
})
const frustumPrimitive = new mars3d.graphic.FrustumPrimitive({
position: position,
camera: camera,
style: {
angle: 45,
distance: 2,
fill: false,
outline: true,
outlineColor: "#ffffff",
outlineOpacity: 1.0
}
})
graphicLayer.addGraphic(frustumPrimitive)
}
// 线
const graphicLine = new mars3d.graphic.PolylinePrimitive({
positions: points,
style: {
width: 1,
color: "rgba(200,200,200,0.3)"
}
})
graphicLayer.addGraphic(graphicLine)
}
src/example/map/property/skybox-nearground/map.js
......@@ -42,6 +42,19 @@ const lantianSkybox = new mars3d.GroundSkyBox({
export const mapOptions = {
scene: {
center: { lat: 31.830035, lng: 117.159801, alt: 409, heading: 41, pitch: 0 }
// scene: {
// skyBox: {
// type: "ground",
// sources: {
// positiveX: "img/skybox_near/lantian/Right.jpg",
// negativeX: "img/skybox_near/lantian/Left.jpg",
// positiveY: "img/skybox_near/lantian/Front.jpg",
// negativeY: "img/skybox_near/lantian/Back.jpg",
// positiveZ: "img/skybox_near/lantian/Up.jpg",
// negativeZ: "img/skybox_near/lantian/Down.jpg"
// }
// }
// }
}
}
......
src/example/thing/tileset/tilesetClip/map.js
......@@ -21,11 +21,7 @@ export function onMounted(mapInstance) {
map = mapInstance // 记录map
map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
globalNotify(
"已知问题提示",
`(1) 对3dtiles数据有要求，仅适用于无自带着色器的纹理格式模型。
(2) 目前不支持所有3dtile数据，请替换url进行自测`
)
globalNotify("已知问题提示", `(1) 目前不支持所有类型3dtile数据，请替换url进行自测`)
showTehDemo()
}
......@@ -97,6 +93,33 @@ export function showTehDemo() {
tilesetLayer.clip.on(mars3d.EventType.addItem, onAddClipArea)
}
export function showXianDemo() {
removeLayer()
tilesetLayer = new mars3d.layer.TilesetLayer({
name: "县城社区",
url: "//data.mars3d.cn/3dtiles/qx-shequ/tileset.json",
position: { alt: 11.5 },
maximumScreenSpaceError: 1,
maximumMemoryUsage: 1024,
skipLevelOfDetail: true,
preferLeaves: true,
dynamicScreenSpaceError: true,
cullWithChildrenBounds: false,
center: { lat: 28.440675, lng: 119.487735, alt: 639, heading: 269, pitch: -38 },
flyTo: true
})
map.addLayer(tilesetLayer)
// 会执行多次，重新加载一次完成后都会回调
// tilesetLayer.on(mars3d.EventType.allTilesLoaded, function (event) {
// console.log("触发allTilesLoaded事件", event)
// })
// tilesetLayer.clip是TilesetClip对象，因为与模型是1对1关系，已经内置进去
tilesetLayer.clip.on(mars3d.EventType.addItem, onAddClipArea)
}
function removeLayer() {
if (tilesetLayer) {
map.removeLayer(tilesetLayer, true)
......
src/example/thing/tileset/tilesetFlat/map.js
......@@ -23,11 +23,7 @@ export function onMounted(mapInstance) {
map = mapInstance // 记录map
map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
globalNotify(
"已知问题提示",
`(1) 对3dtiles数据有要求，仅适用于无自带着色器的纹理格式模型。
(2) 目前不支持所有3dtile数据，请替换url进行自测`
)
globalNotify("已知问题提示", `(1) 目前不支持所有类型3dtile数据，请替换url进行自测`)
// 创建矢量数据图层
lineLayer = new mars3d.layer.GraphicLayer()
......@@ -51,7 +47,7 @@ export function showDytDemo() {
tilesetLayer = new mars3d.layer.TilesetLayer({
name: "大雁塔",
url: "//data.mars3d.cn/3dtiles/qx-dyt/tileset.json",
position: { alt: -27 },
position: { lng: 108.963363, lat: 34.221298, alt: -27 },
maximumScreenSpaceError: 1,
maximumMemoryUsage: 1024,
......@@ -60,14 +56,14 @@ export function showDytDemo() {
area: [
{
positions: [
[108.959062, 34.220134, 397.3],
[108.959802, 34.220147, 397.6],
[108.959779, 34.219506, 398.7],
[108.959106, 34.21953, 398.1]
[108.962938, 34.221141, 402.4],
[108.963847, 34.221141, 402.4],
[108.963847, 34.221868, 402.4],
[108.962938, 34.221868, 402.4]
]
}
],
flatHeight: 420
editHeight: 420 // 相对高度 (单位：米)，基于 压平/淹没区域 最低点高度的偏移量
},
flyTo: true
})
......@@ -85,6 +81,7 @@ export function showTehDemo() {
name: "合肥天鹅湖",
url: "//data.mars3d.cn/3dtiles/qx-teh/tileset.json",
position: { lng: 117.218434, lat: 31.81807, alt: 163 },
editHeight: -130.0, // 相对高度 (单位：米)，基于 压平/淹没区域 最低点高度的偏移量
maximumScreenSpaceError: 16,
maximumMemoryUsage: 1024,
dynamicScreenSpaceError: true,
......
src/example/thing/tileset/tilesetFlood/map.js
......@@ -22,8 +22,7 @@ export function onMounted(mapInstance) {
globalNotify(
"已知问题提示",
`(1) 对3dtiles数据有要求，仅适用于无自带着色器的纹理格式模型。
(2) 目前不支持所有3dtile数据，请替换url进行自测`
`(1) 目前不支持所有类型3dtile数据，请替换url进行自测`
)
showDytDemo()
......@@ -47,6 +46,7 @@ export function showDytDemo() {
position: { alt: -27 },
maximumScreenSpaceError: 1,
maximumMemoryUsage: 1024,
editHeight: 420, // 相对高度 (单位：米)，基于 压平/淹没区域 最低点高度的偏移量
flyTo: true
})
map.addLayer(tilesetLayer)
......@@ -74,6 +74,7 @@ export function showTehDemo() {
type: "3dtiles",
url: "//data.mars3d.cn/3dtiles/qx-teh/tileset.json",
position: { lng: 117.218434, lat: 31.81807, alt: 163 },
editHeight: -130.0, // 相对高度 (单位：米)，基于 压平/淹没区域 最低点高度的偏移量
maximumScreenSpaceError: 16,
maximumMemoryUsage: 1024,
dynamicScreenSpaceError: true,
......
src/example/thing/tileset/tilesetPlanClip-qx/map.js
......@@ -25,7 +25,7 @@ export function onMounted(mapInstance) {
preferLeaves: true,
dynamicScreenSpaceError: true,
cullWithChildrenBounds: false,
luminanceAtZenith: 0.6,
center: { lat: 28.440675, lng: 119.487735, alt: 639, heading: 269, pitch: -38 },
// 可传入TilesetPlanClip构造参数，下面是演示裁剪区域
......
src/example/thing/tileset/tilesetPlanClip/map.js
......@@ -29,8 +29,8 @@ export function onMounted(mapInstance) {
[117.251193, 31.843746, 47.7]
],
edgeColor: Cesium.Color.GREY,
edgeWidth: 2.0
// showPlane: true
edgeWidth: 2.0,
showPlane: true
},
flyTo: true
})
......@@ -142,11 +142,15 @@ export function clippingType(type) {
export function rangeDistance(value) {
tilesetLayer.planClip.distance = value
}
// 偏移量
export function rangeNormalZ(value) {
tilesetLayer.planClip.normalZ = value
export function rangeAngle1(value) {
tilesetLayer.planClip.angle1 = value
}
export function rangeAngle2(value) {
tilesetLayer.planClip.angle2 = value
}
export function clear() {
tilesetLayer.planClip.clear()
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论