Skip to content

M
mars3d
Commit b29d79af by wanghao
Options

同步代码 v3.5.6

parent 4f52fa5a
正在显示 包含 995 行增加 和 75 行删除
public/config/config.json
......@@ -69,6 +69,14 @@
{
"id": 2021,
"pid": 10,
"name": "谷歌影像",
"icon": "/img/basemaps/google_img.png",
"type": "google",
"layer": "img_d",
"show": true
},
{
"pid": 10,
"name": "天地图影像",
"icon": "/img/basemaps/tdt_img.png",
"type": "group",
......@@ -76,7 +84,7 @@
{ "name": "底图", "type": "tdt", "layer": "img_d" },
{ "name": "注记", "type": "tdt", "layer": "img_z" }
],
"show": true
"show": false
},
{
"pid": 10,
......@@ -1082,7 +1090,7 @@
"maximumMemoryUsage": 1024,
"center": { "lat": 34.215516, "lng": 108.960251, "alt": 834, "heading": 4, "pitch": -48 },
"flat": {
"enabled":true,
"enabled": true,
"editHeight": 420
},
"flyTo": false,
......
public/config/example.json
......@@ -234,6 +234,12 @@
"hasPannel": true
},
{
"name": "谷歌",
"thumbnail": "layert-online-google.jpg",
"main": "layer-tile/online/google",
"hasPannel": true
},
{
"name": "微软Bing",
"thumbnail": "layert-online-bing.jpg",
"main": "layer-tile/online/bing",
......@@ -258,18 +264,6 @@
"hasPannel": true
},
{
"name": "谷歌【已被封】",
"thumbnail": "layert-online-google.jpg",
"main": "layer-tile/online/google",
"hasPannel": true
},
{
"name": "OSM【已被封】",
"thumbnail": "layert-online-osm.jpg",
"main": "layer-tile/online/osm",
"hasPannel": true
},
{
"name": "实时交通态势图",
"thumbnail": "layert-online-traffic-time.jpg",
"main": "layer-tile/online/traffic-time",
......@@ -2422,11 +2416,6 @@
"main": "graphic/entity/rectangle-cloud"
},
{
"name": "水面倒影 Demo",
"thumbnail": "effect-inverted.jpg",
"main": "effect/inverted"
},
{
"name": "对象描边",
"thumbnail": "effect-outlineEffect.jpg",
"main": "effect/outlineEffect"
......@@ -2944,10 +2933,27 @@
"icon": "fa-globe",
"children": [
{
"name": "存在问题的示例",
"name": "第三方原因的",
"details": "第三方服务、国家政策等原因造成的暂时不能用的功能",
"children": [
{
"name": "OSM【已被封】",
"thumbnail": "layert-online-osm.jpg",
"main": "layer-tile/online/osm",
"hasPannel": true
}
]
},
{
"name": "存在问题的",
"details": "当前存在问题的示例，有点鸡肋，仅供学习参考",
"children": [
{
"name": "水面倒影 Demo",
"thumbnail": "effect-inverted.jpg",
"main": "effect/inverted"
},
{
"name": "PBF矢量瓦片(OL渲染)",
"thumbnail": "layert-type-mvt.jpg",
"main": "layer-tile/type/pbf-ol",
......
public/lib/mars3d/mars3d.css
/**
* Mars3D三维可视化平台 mars3d
*
* 版本信息：v3.5.5
* 编译日期：2023-05-04 19:16:46
* 版本信息：v3.5.6
* 编译日期：2023-05-07 18:40:39
* 版权所有：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.
src/example/graphic/custom/fixedRoute/map.js
......@@ -90,6 +90,10 @@ function addRoamLines() {
scale: 1,
minimumPixelSize: 60
},
billboard: {
image: "img/icon/huojian.svg",
scale: 0.3
},
path: {
color: "#ffff00",
opacity: 0.5,
......
src/example/graphic/entity/polyline-curve/map.js
......@@ -128,6 +128,7 @@ function addDemoGraphic2(graphicLayer) {
],
style: {
width: 6,
sharpness: 0.95, // 曲线的弯曲程度
materialType: mars3d.MaterialType.PolylineOutline,
materialOptions: {
color: Cesium.Color.ORANGE,
......
src/example/graphic/video/video3D/map.js
......@@ -27,6 +27,8 @@ export const mapOptions = {
export function onMounted(mapInstance) {
map = mapInstance // 记录首次创建的map
globalNotify("操作提示：", `请鼠标单击地图任意处，浏览器安全机制需要鼠标操作才能自动开始播放视频。`)
// 添加参考三维模型
const tiles3dLayer = new mars3d.layer.TilesetLayer({
name: "合肥国家大学科技园",
......@@ -44,8 +46,7 @@ export function onMounted(mapInstance) {
// 加一些演示数据
addDemoGraphic1()
addDemoGraphic2()
globalNotify("操作提示：", `请鼠标单击地图任意处，浏览器安全机制需要鼠标操作才能自动开始播放视频。`)
addDemoGraphic3()
}
/**
......@@ -168,6 +169,40 @@ function addDemoGraphic2() {
graphicLayer.addGraphic(video3D)
}
function addDemoGraphic3() {
const video3D = new mars3d.graphic.Video3D({
position: [117.205457, 31.842984, 63.9],
style: {
url: "//data.mars3d.cn/file/video/menqian.mp4",
maskImage: "img/textures/video-mask.png", // 羽化视频四周，融合更美观
angle: 46.3,
angle2: 15.5,
heading: 178.5,
pitch: -90,
showFrustum: true
},
attr: { remark: "示例2" }
})
graphicLayer.addGraphic(video3D)
map.viewer.entities.add({
position: new Cesium.CallbackProperty(() => {
return video3D.position
}, false),
point: {
pixelSize: 10
}
})
map.on(mars3d.EventType.mouseMove, function (event) {
if (event.cartesian && video3D.isAdded) {
video3D.position = mars3d.PointUtil.addPositionsHeight(event.cartesian, 10)
}
})
}
export function onChangeAngle(value) {
if (selectedView) {
selectedView.angle = value
......
src/example/layer-graphic/draw/draw/map.js
......@@ -196,7 +196,13 @@ export function drawPolyline(clampToGround) {
width: 3,
clampToGround: clampToGround
}
// 外部自定义校验坐标，return false 时坐标无效，不参与绘制
// validDrawPosition: function (position, graphic) {
// const point = mars3d.LngLatPoint.fromCartesian(position)
// return (point.lng > 115 && point.lng < 117)
// }
})
// .then(() => {
// map.highlightEnabled = true
// map.popup.enabled = true
......
src/example/layer-graphic/wfs/gaodePOI/map.js
......@@ -33,6 +33,8 @@ export function onUnmounted() {
let geodePoiLayer
function GeodePoiLayer() {
// 高德错误代码：https://lbs.amap.com/api/webservice/guide/tools/info/
// 高德POI图层，演示大数据的分块加载
geodePoiLayer = new mars3d.layer.GeodePoiLayer({
minimumLevel: 13,
......
src/example/layer-tile/online/google/map.js
......@@ -10,19 +10,12 @@ export const mapOptions = {
// 方式1：在创建地球前的参数中配置
basemaps: [
{
name: "谷歌影像",
icon: "img/basemaps/google_img.png",
type: "xyz",
url: "https://boxa.earthol.com/map.jpg?lyrs=y&gl=cn&x={x}&y={y}&z={z}",
chinaCRS: mars3d.ChinaCRS.GCJ02,
show: true
},
{
name: "谷歌影像(WGS84)",
icon: "img/basemaps/google_img.png",
type: "google",
layer: "img_d",
chinaCRS: mars3d.ChinaCRS.WGS84
chinaCRS: mars3d.ChinaCRS.WGS84,
show: true
},
{
name: "谷歌影像",
......@@ -30,7 +23,7 @@ export const mapOptions = {
type: "group",
layers: [
{ name: "底图", type: "google", layer: "img_d", chinaCRS: mars3d.ChinaCRS.GCJ02 },
{ name: "注记", type: "google", layer: "img_d", chinaCRS: mars3d.ChinaCRS.GCJ02 }
{ name: "注记", type: "google", layer: "img_z", chinaCRS: mars3d.ChinaCRS.GCJ02 }
]
},
{
......
src/example/layer-tile/type/pbf-protomaps/index.tsx 0 → 100644
import { MarsPannel } from "@mars/components/MarsUI"
import { TileLayerState } from "@mars/components/MarsSample/TileLayerState"
function UIComponent() {
return (
<MarsPannel visible={true} right={10} top={10}>
<TileLayerState />
</MarsPannel>
)
}
export default UIComponent
src/example/layer-tile/type/pbf-protomaps/map.js 0 → 100644
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: { lat: 31.794987, lng: 117.22661, alt: 4142.1, heading: 356.4, pitch: -60.8 }
},
// 方式1：在创建地球前的参数中配置
layers: [
{
name: "矢量瓦片图层",
icon: "img/basemaps/osm.png",
type: "arcgis-pbf", // \lib\mars3d\thirdParty\pbf-protomaps\ArcGISPbfLayer.js 中定义的类型
url: "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
styleUrl: "https://jsapi.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db/resources/styles/root.json",
show: true
}
]
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
map.basemap = 2023
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
}
src/example/layer-tile/type/wms/map.js
......@@ -5,39 +5,40 @@ export let map // mars3d.Map三维地图对象
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: { lat: 19.171756, lng: 107.215418, alt: 9274074, heading: 0, pitch: -85 }
center: { lat: 31.816469, lng: 117.188323, alt: 6109.8, heading: 358.1, pitch: -64.6 }
},
// 方式1：在创建地球前的参数中配置
basemaps: [
{
name: "光污染图层",
icon: "img/basemaps/blackMarble.png",
type: "wms",
url: "//www.lightpollutionmap.info/geoserver/gwc/service/wms",
layers: "PostGIS:VIIRS_2019",
crs: "EPSG:3857",
parameters: {
transparent: true,
format: "image/png"
},
alpha: 0.6, // 透明度
proxy: "//server.mars3d.cn/proxy/", // 代理服务，解决跨域问题
show: true
},
{
// wms也可以换一种xyz的直接写法
name: "光污染图层(XYZ方式)",
icon: "img/basemaps/blackMarble.png",
type: "xyz",
url: "//www.lightpollutionmap.info/geoserver/gwc/service/wms?transparent=true&format=image%2Fpng&service=WMS&version=1.1.1&request=GetMap&styles=&layers=PostGIS%3AVIIRS_2019&bbox={westProjected},{southProjected},{eastProjected},{northProjected}&width={width}&height={height}&srs=EPSG%3A3857",
alpha: 0.6, // 透明度
proxy: "//server.mars3d.cn/proxy/" // 代理服务，解决跨域问题
},
// {
// name: "光污染图层",
// icon: "img/basemaps/blackMarble.png",
// type: "wms",
// url: "//www.lightpollutionmap.info/geoserver/gwc/service/wms",
// layers: "PostGIS:VIIRS_2019",
// crs: "EPSG:3857",
// parameters: {
// transparent: true,
// format: "image/png"
// },
// alpha: 0.6, // 透明度
// proxy: "//server.mars3d.cn/proxy/", // 代理服务，解决跨域问题
// show: true
// },
// {
// // wms也可以换一种xyz的直接写法
// name: "光污染图层(XYZ方式)",
// icon: "img/basemaps/blackMarble.png",
// type: "xyz",
// url: "//www.lightpollutionmap.info/geoserver/gwc/service/wms?transparent=true&format=image%2Fpng&service=WMS&version=1.1.1&request=GetMap&styles=&layers=PostGIS%3AVIIRS_2019&bbox={westProjected},{southProjected},{eastProjected},{northProjected}&width={width}&height={height}&srs=EPSG%3A3857",
// alpha: 0.6, // 透明度
// proxy: "//server.mars3d.cn/proxy/" // 代理服务，解决跨域问题
// },
{
name: "单张图片",
icon: "img/basemaps/offline.png",
type: "image",
url: "//data.mars3d.cn/file/img/world/world.jpg"
url: "//data.mars3d.cn/file/img/world/world.jpg",
show: true
}
]
}
......@@ -49,6 +50,8 @@ export const mapOptions = {
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录首次创建的map
addTileLayer()
}
/**
......@@ -88,7 +91,7 @@ export function addTileLayer() {
axisY: true
}
},
popup: "all",
popup: "all"
// popupOptions: {
// autoClose: false,
// closeOnClick: false,
......@@ -102,7 +105,7 @@ export function addTileLayer() {
// return false
// }
// },
flyTo: true
// flyTo: true
})
map.addLayer(tileLayer)
......@@ -113,6 +116,12 @@ export function addTileLayer() {
tileLayer.on(mars3d.EventType.click, function (event) {
console.log("单击了矢量数据，共" + event.features.length + "条", event)
})
setTimeout(() => {
map.mouseEvent.pickImageryLayerFeatures([117.169993, 31.842132, 214.6]).then((result) => {
console.log("手动模拟了单击，返回了：", result)
})
}, 6000)
}
export function addTileLayer2() {
......
src/example/layer-tileset/style/customShader/map.js
......@@ -136,6 +136,27 @@ export function setStyle3() {
material.diffuse = texture(u_mars3d_texture, vec2(mars3d_textureX, mars3d_textureY)).rgb;
}
}`
// fragmentShaderText: /* glsl 如果贴图方向不对，用下面这个 */ `
// void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
// vec3 positionMC = fsInput.attributes.positionMC;
// if (dot(vec3(0.0, 1.0, 0.0), v_mars3d_normalMC) > 0.95) {
// //处理楼顶:统一处理成深色。
// material.diffuse = vec3(0.079, 0.107, 0.111);
// } else {
// //处理四个侧面: 贴一样的图
// float mars3d_width = 100.0;
// float mars3d_height = 100.0;
// float mars3d_textureX = 0.0;
// float mars3d_dotXAxis = dot(vec3(0.0, 0.0, 1.0), v_mars3d_normalMC);
// if (mars3d_dotXAxis > 0.52 || mars3d_dotXAxis < -0.52) {
// mars3d_textureX = mod(positionMC.x, mars3d_width) / mars3d_width;
// } else {
// mars3d_textureX = mod(positionMC.z, mars3d_width) / mars3d_width;
// }
// float mars3d_textureY = mod(positionMC.y, mars3d_height) / mars3d_height;
// material.diffuse = texture(u_mars3d_texture, vec2(mars3d_textureX, mars3d_textureY)).rgb;
// }
// }`
})
tiles3dLayer.reload()
}
......
src/example/layer-tileset/type/jzw/map.js
......@@ -212,6 +212,27 @@ export function setStyle3() {
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput){
v_mars3d_normalMC = vsInput.attributes.normalMC;
}`,
// fragmentShaderText: /* glsl 如果贴图方向不对，用下面这个 */ `
// void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
// vec3 positionMC = fsInput.attributes.positionMC;
// if (dot(vec3(0.0, 0.0, 1.0), v_mars3d_normalMC) > 0.95) {
// //处理楼顶:统一处理成深色。
// material.diffuse = vec3(0.079, 0.107, 0.111);
// } else {
// //处理四个侧面: 贴一样的图
// float mars3d_width = 100.0;
// float mars3d_height = 100.0;
// float mars3d_textureX = 0.0;
// float mars3d_dotXAxis = dot(vec3(0.0, 1.0, 0.0), v_mars3d_normalMC);
// if (mars3d_dotXAxis > 0.52 || mars3d_dotXAxis < -0.52) {
// mars3d_textureX = mod(positionMC.x, mars3d_width) / mars3d_width;
// } else {
// mars3d_textureX = mod(positionMC.y, mars3d_width) / mars3d_width;
// }
// float mars3d_textureY = mod(positionMC.z, mars3d_height) / mars3d_height;
// material.diffuse = texture(u_mars3d_texture, vec2(mars3d_textureX, mars3d_textureY)).rgb;
// }
// }`
fragmentShaderText: /* glsl */ `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
vec3 positionMC = fsInput.attributes.positionMC;
......
src/example/map/other/transform/map.css
.mars3d-container {
transform-origin: center center;
transform: scale(2); /*演示功能*/
/*transform: matrix(0.5, 0, 0, 0.43, 3.41, 2.84);*/
}
src/example/thing/analysis/shadows/map.js
......@@ -78,6 +78,7 @@ export function startPlay(date, hours, minutes) {
const startDate = new Date(date + " 00:00:00")
const endDate = new Date(date + " 23:59:59")
shadows.multiplier = 1600
shadows.start(startDate, endDate, currentTime)
}
......@@ -95,3 +96,99 @@ export function setShadows(date, hours, minutes) {
return dateTime
}
export function clearArea() {
map.graphicLayer.clear()
shadows.clear()
}
export function drawArea(date) {
map.graphicLayer.clear()
map.graphicLayer.startDraw({
type: "polygon",
style: {
color: "#007be6",
opacity: 0.5,
clampToGround: true
},
success: function (graphic) {
// 绘制成功后回调
const positions = graphic.positionsShow
map.graphicLayer.clear()
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标
// 求最大、最小高度值
shadows.multiplier = 14400
shadows
.startRate({
startDate: new Date(date + " 08:00:00"),
endDate: new Date(date + " 18:00:00"),
positions: positions,
step: 3,
minHeight: 20
// maxHeight: 30 //可以多层
})
.then((result) => {
showRateResult(result)
})
}
})
}
function showRateResult(result) {
console.log("分析结果", result)
map.graphicLayer.clear()
result.positions.forEach((p, i) => {
const rate = p.rate * 100 // 阴影率，取值范围是0到1，0代表一直有光照，1代表一直无光照
const graphic = new mars3d.graphic.PointEntity({
position: p,
style: {
pixelSize: 10,
color: getColor(rate) // 计算颜色，色带颜色
},
popup: `阴影率: ${rate.toFixed(2)}%`
})
map.graphicLayer.addGraphic(graphic)
})
}
// 获取色带
function getImageData() {
const nWidth = 100
const canvas = document.createElement("canvas")
canvas.width = nWidth
canvas.height = nWidth
const ctx = canvas.getContext("2d")
ctx.beginPath()
/* 指定渐变区域 */
const grad = ctx.createLinearGradient(0, 0, nWidth, 0)
/* 指定几个颜色 */
grad.addColorStop(0.05, "rgb(0, 228, 0)") // green
grad.addColorStop(0.15, "rgb(256, 256, 0)") // yellow
grad.addColorStop(0.25, "rgb(256, 126, 0)") // orange
grad.addColorStop(0.35, "rgb(256, 0, 0)") // red
grad.addColorStop(0.5, "rgb(153, 0, 76)") // purple
grad.addColorStop(0.8, "rgb(126, 0, 35)") // maroon
/* 将这个渐变设置为fillStyle */
ctx.fillStyle = grad
/* 绘制矩形 */
ctx.rect(0, 0, nWidth, nWidth)
ctx.fill()
return ctx.getImageData(0, 0, nWidth, 1).data
}
const imgData = getImageData()
// 计算颜色，色带颜色
function getColor(rate) {
if (rate > 100) {
return "rgba(126,0,35,0.8)"
} else {
rate = Math.round(rate)
return `rgba(${imgData[rate * 4]},${imgData[rate * 4 + 1]},${imgData[rate * 4 + 2]},0.8)`
}
}
src/example/thing/analysis/underground/map.js
......@@ -6,8 +6,14 @@ let underground
export const mapOptions = {
scene: {
center: { lat: 31.840106, lng: 117.216768, alt: 554, heading: 0, pitch: -59 },
orderIndependentTranslucency: false,
contextOptions: { webgl: { alpha: true } }, // 允许透明，只能Map初始化传入 [关键代码]
showMoon: false,
showSkyBox: false,
showSkyAtmosphere: false,
fog: false,
globe: {
depthTestAgainstTerrain: true
depthTestAgainstTerrain: true // 开启深度检测
}
}
}
......@@ -20,6 +26,11 @@ export const mapOptions = {
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
map.container.style.backgroundColor = "#546a53" // 背景色
globalNotify("已知问题提示", `(1) 启用透明度后，放大层级底图瓦片衔接处有黑色缝隙 `)
addLayer()
}
......
src/example/thing/camera/tween/TweensRoaming.js 0 → 100644
/**
* 基于Tweens插值的自定义漫游
*/
class TweensRoaming extends mars3d.BaseThing {
constructor(options) {
super(options)
this._tweens = []
}
/**
* 漫游坐标列表
* @type {object[]}
* @readonly
*/
get points() {
return this.options.points
}
set points(value) {
this.options.points = value
}
/**
* 对象添加到地图上的创建钩子方法，
* 每次add时都会调用
* @return {void} 无
* @private
*/
_addedHook() {
//
}
/**
* 对象从地图上移除的创建钩子方法，
* 每次remove时都会调用
* @return {void} 无
* @private
*/
_removedHook() {
this.stop()
}
/**
* 开始漫游
*/
start() {
this._map.scene.camera.cancelFlight()
this.stop()
this._tweens = this._createTweens()
if (this._tweens.length === 0) {
return
}
this._oldShouldAnimate = this._map.clock.shouldAnimate
this._oldStartTime = this._map.clock.startTime.clone()
this._oldCurrentTime = this._map.clock.currentTime.clone()
this._oldClockRange = this._map.clock.clockRange
const currentTime = this._map.clock.currentTime.clone()
this._map.clock.startTime = currentTime
this._map.clock.clockRange = Cesium.ClockRange.UNBOUNDED
this._map.clock.shouldAnimate = true
const now = Cesium.JulianDate.toDate(currentTime)
const nowTimestamp = now.getTime()
this._tweens[0].start(nowTimestamp)
this._map.scene.screenSpaceCameraController.enableInputs = false
this._map.on(mars3d.EventType.preUpdate, this._map_preUpdateHandler, this)
}
/**
* 停止漫游
*/
stop() {
this._map.off(mars3d.EventType.preUpdate, this._map_preUpdateHandler, this)
if (this._tweens && this._tweens.length > 0) {
for (let index = 0; index < this._tweens.length; index++) {
const tween = this._tweens[index]
tween.stop()
}
this._tweens = []
}
this._restoreClockState()
}
/**
* 暂停漫游
*/
pause() {
this._map.clock.shouldAnimate = false
}
/**
* 恢复漫游
*/
resume() {
this._map.clock.shouldAnimate = true
}
_createTweens() {
const views = this.points
const m = views.length - 1
// eslint-disable-next-line @typescript-eslint/no-this-alias
const that = this
const tweens = []
for (let i = 0; i < m; i++) {
const i0 = i - 1 < 0 ? 0 : i - 1
const i1 = i
const i2 = i + 1 > m ? m : i + 1
const i3 = i + 2 > m ? m : i + 2
const startObject = {
lng: views[i0].lng,
lat: views[i0].lat,
alt: views[i0].alt,
heading: views[i0].heading,
pitch: views[i0].pitch
}
const stopObject = {
lng: [views[i1].lng, views[i2].lng, views[i3].lng],
lat: [views[i1].lat, views[i2].lat, views[i3].lat],
alt: [views[i1].alt, views[i2].alt, views[i3].alt],
heading: [views[i1].heading, views[i2].heading, views[i3].heading],
pitch: [views[i1].pitch, views[i2].pitch, views[i3].pitch]
}
const duration = Cesium.defaultValue(views[i1].duration, 3) * 1000
const delay = Cesium.defaultValue(views[i1].stop, 0) * 1000
// eslint-disable-next-line no-undef
const easingFunction = Cesium.defaultValue(views[i1].easingFunction, Tween.Easing.Linear.None)
// eslint-disable-next-line no-undef
const tween = new Tween.Tween(startObject)
.to(stopObject, duration)
.delay(delay)
.easing(easingFunction)
.interpolation(catmullRom)
.onUpdate(function (elapsed) {
if (!that._map.clock.shouldAnimate) {
return
}
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-this-alias
const roamingView = this
that._updateCamera(roamingView)
})
tween.onComplete(() => {
startObject.lng = views[i0].lng
startObject.lat = views[i0].lat
startObject.alt = views[i0].alt
startObject.heading = views[i0].heading
startObject.pitch = views[i0].pitch
stopObject.lng = [views[i1].lng, views[i2].lng, views[i3].lng]
stopObject.lat = [views[i1].lat, views[i2].lat, views[i3].lat]
stopObject.alt = [views[i1].alt, views[i2].alt, views[i3].alt]
stopObject.heading = [views[i1].heading, views[i2].heading, views[i3].heading]
stopObject.pitch = [views[i1].pitch, views[i2].pitch, views[i3].pitch]
if (i === m - 1) {
this._map.scene.screenSpaceCameraController.enableInputs = true
this._restoreClockState()
this.fire("finish")
}
})
tweens.push(tween)
}
for (let i = 0; i < tweens.length; i++) {
if (i === tweens.length - 1) {
tweens[i].chain()
break
}
tweens[i].chain(tweens[i + 1])
}
return tweens
}
_updateCamera(roamingView) {
const position = Cesium.Cartesian3.fromDegrees(roamingView.lng, roamingView.lat, roamingView.alt)
this._map.scene.camera.setView({
destination: position,
orientation: {
heading: Cesium.Math.toRadians(roamingView.heading ?? 0),
pitch: Cesium.Math.toRadians(roamingView.pitch ?? -90),
roll: Cesium.Math.toRadians(roamingView.roll ?? 0)
}
})
}
_map_preUpdateHandler(event) {
const now = Cesium.JulianDate.toDate(this._map.clock.currentTime).getTime()
// 调用了 camera.flyTo 时
if (this._map.scene.camera._currentFlight && this._tweens.length > 0) {
for (let index = 0; index < this._tweens.length; index++) {
const tween = this._tweens[index]
tween.stop()
}
this._tweens = []
return
}
// 漫游被暂停时
if (this._tweens.length === 0 || !this._map.clock.shouldAnimate) {
return
}
// eslint-disable-next-line no-undef
Tween.update(now)
}
_restoreClockState() {
if (!Cesium.defined(this._map.scene.camera._currentFlight)) {
this._map.scene.screenSpaceCameraController.enableInputs = true
}
if (Cesium.defined(this._oldShouldAnimate)) {
this._map.clock.shouldAnimate = this._oldShouldAnimate
}
if (Cesium.defined(this._oldStartTime)) {
this._map.clock.startTime = this._oldStartTime
}
if (Cesium.defined(this._oldCurrentTime)) {
this._map.clock.currentTime = this._oldCurrentTime
}
if (Cesium.defined(this._oldClockRange)) {
this._map.clock.clockRange = this._oldClockRange
}
}
}
function catmullRom(v, t, alpha = 0.5) {
let p0
let p1
let p2
let p3
const type = typeof v
if (type === "number") {
p0 = arguments[0]
p1 = arguments[1]
p2 = arguments[2]
p3 = arguments[3]
t = arguments[4]
alpha = arguments[5]
} else if (Object.prototype.toString.call(v) === "[object Array]") {
p0 = v[0]
p1 = v[1]
p2 = v[2]
p3 = v[3]
} else {
throw new Error("参数格式错误")
}
let dt0 = Math.pow(Math.abs(p0 - p1), alpha)
let dt1 = Math.pow(Math.abs(p1 - p2), alpha)
let dt2 = Math.pow(Math.abs(p2 - p3), alpha)
if (dt1 < 1e-4) {
dt1 = 1.0
}
if (dt0 < 1e-4) {
dt0 = dt1
}
if (dt2 < 1e-4) {
dt2 = dt1
}
let t0 = (p1 - p0) / dt0 - (p2 - p0) / (dt0 + dt1) + (p2 - p1) / dt1
let t1 = (p2 - p1) / dt1 - (p3 - p1) / (dt1 + dt2) + (p3 - p2) / dt2
t0 *= dt1
t1 *= dt1
const x0 = p1
const x1 = p2
const a0 = x0
const a1 = t0
const a2 = -3 * x0 + 3 * x1 - 2 * t0 - t1
const a3 = 2 * x0 - 2 * x1 + t0 + t1
const tt = t * t
const ttt = tt * t
return a0 + a1 * t + a2 * tt + a3 * ttt
}
src/example/thing/camera/tween/index.tsx 0 → 100644
import { MarsButton, MarsPannel, MarsIcon } from "@mars/components/MarsUI"
import { useMemo, useState } from "react"
import { Space } from "antd"
import * as mapWork from "./map.js"
function UIComponent() {
function resume() {
mapWork.resume()
}
function pause() {
mapWork.pause()
}
function stop() {
mapWork.stop()
}
const start = () => {
mapWork.start()
}
return (
<MarsPannel visible={true} right={10} top={10} width={360}>
<Space>
<MarsButton onClick={start}>
<Space>
<MarsIcon icon="handle-triangle" className="icon-vertical-a"></MarsIcon>
<span>开始</span>
</Space>
</MarsButton>
<MarsButton onClick={pause}>
<Space>
<MarsIcon icon="pause-one" className="icon-vertical-a"></MarsIcon>
<span>暂停</span>
</Space>
</MarsButton>
<MarsButton onClick={resume}>
<Space>
<MarsIcon icon="handle-triangle" className="icon-vertical-a"></MarsIcon>
<span>继续</span>
</Space>
</MarsButton>
<MarsButton onClick={stop}>
<Space>
<MarsIcon icon="power" className="icon-vertical-a"></MarsIcon>
<span>停止</span>
</Space>
</MarsButton>
</Space>
</MarsPannel>
)
}
export default UIComponent
src/example/thing/camera/tween/map.js 0 → 100644
import * as mars3d from "mars3d"
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: { lat: 22.740833, lng: 108.379371, alt: 88.7, heading: 41.6, pitch: -30.4 }
}
}
export let map // mars3d.Map三维地图对象
export const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
let roaming
export function onMounted(mapInstance) {
map = mapInstance // 记录map
const tiles3dLayer = new mars3d.layer.TilesetLayer({
url: "//data.mars3d.cn/3dtiles/max-ditiezhan/tileset.json",
maximumScreenSpaceError: 1,
maximumMemoryUsage: 1024,
popup: "all"
})
map.addLayer(tiles3dLayer)
// 108.380053,22.736443,-1
const viewPoints = [
{ id: 0, name: "地铁口", lat: 22.7407925, lng: 108.3793365, alt: 89.7, heading: 37.4, pitch: -7.1, duration: 2 },
{ id: 1, name: "电梯口1", lat: 22.7408074, lng: 108.3793484, alt: 89.7, heading: 37.4, pitch: -5.3, duration: 2 },
{ id: 2, name: "电梯口2", lat: 22.7408334, lng: 108.3793717, alt: 88.6, heading: 41.6, pitch: -30.5, duration: 5 },
{ id: 3, name: "电梯底部", lat: 22.7409422, lng: 108.3794671, alt: 79.4, heading: 38.9, pitch: -34.6, duration: 2 },
{ id: 4, name: "出电梯", lat: 22.7409655, lng: 108.3794862, alt: 79, heading: 38.3, pitch: -7.4, duration: 2 },
{ id: 5, name: "拐角1", lat: 22.7410111, lng: 108.3795193, alt: 79, heading: 36.1, pitch: -2, duration: 1.8 },
{ id: 6, name: "拐角2", lat: 22.7410482, lng: 108.379558, alt: 79, heading: 67.4, pitch: 4.3, duration: 8.5 },
{ id: 7, name: "拐角3", lat: 22.7412154, lng: 108.3801121, alt: 79, heading: 88.6, pitch: 7.5, duration: 2.6 },
{ id: 8, name: "拐角4", lat: 22.7412359, lng: 108.3802854, alt: 79, heading: 0, pitch: 8.4, duration: 7.2 },
{ id: 9, name: "拐角5", lat: 22.7413912, lng: 108.3802919, alt: 79, heading: 1.3, pitch: -0.8, duration: 4 },
{ id: 10, name: "准备拐进电梯1", lat: 22.7415327, lng: 108.3802764, alt: 79, heading: 94.1, pitch: 5, duration: 3.5 },
{ id: 11, name: "准备拐进电梯2", lat: 22.7415401, lng: 108.3803285, alt: 79, heading: 176.9, pitch: -1.4, duration: 3.6 },
{ id: 12, name: "电梯口1", lat: 22.7414846, lng: 108.3803289, alt: 79, heading: 181.3, pitch: -1.8, duration: 2 },
{ id: 13, name: "电梯口2", lat: 22.741466, lng: 108.3803291, alt: 78.7, heading: 176.9, pitch: -23.1, duration: 4 },
{ id: 14, name: "电梯口3", lat: 22.7414011, lng: 108.3803284, alt: 74.7, heading: 180.8, pitch: -38, duration: 2 },
{ id: 15, name: "出电梯", lat: 22.741388, lng: 108.3803281, alt: 73.9, heading: 177.7, pitch: 2.1, duration: 2.6 },
{ id: 16, name: "进地铁1", lat: 22.7413128, lng: 108.380329, alt: 73.9, heading: 189, pitch: 1.6, duration: 2.6 },
{ id: 17, name: "进地铁2", lat: 22.7412386, lng: 108.3803242, alt: 73.9, heading: 272.8, pitch: -4.8, duration: 2.6 }
]
// eslint-disable-next-line no-undef
roaming = new TweensRoaming({
points: viewPoints
})
map.addThing(roaming)
showCameraRoute(viewPoints) // 显示相机点的位置方向和路线，便于对比查看
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
}
export function start() {
console.log("开始")
roaming.start()
}
export function pause() {
console.log("暂停")
roaming.pause()
}
export function resume() {
console.log("继续")
roaming.resume()
}
export function stop() {
console.log("停止")
roaming.stop()
}
// 显示相机点的位置方向和路线，便于对比查看
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: 40,
distance: 0.5,
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/thing/other/matrixMove/map.js 0 → 100644
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象
export const eventTarget = new mars3d.BaseClass()
export const mapOptions = {
scene: {
center: { lat: 30.990185, lng: 116.341991, alt: 2465.9, heading: 224.8, pitch: -23.5 }
}
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @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)
})
// 加一些演示数据
addDemoGraphic1(graphicLayer)
addDemoGraphic2(graphicLayer)
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
graphicLayer.remove()
graphicLayer = null
}
function addDemoGraphic1(graphicLayer) {
const graphic = new mars3d.graphic.PointEntity({
position: new mars3d.LngLatPoint(116.329102, 30.977955, 1548.6),
style: {
color: "#0000ff",
pixelSize: 10,
outlineColor: "#ffffff",
outlineWidth: 2
},
attr: { remark: "示例4" }
})
graphicLayer.addGraphic(graphic)
const pointEdit = new mars3d.thing.MatrixMove2({
position: graphic.position
})
map.addThing(pointEdit)
pointEdit.on(mars3d.EventType.change, (event) => {
graphic.position = event.position
})
}
function addDemoGraphic2(graphicLayer) {
const graphic = new mars3d.graphic.PointEntity({
position: new mars3d.LngLatPoint(116.317108, 30.974377, 1528.3),
style: {
color: "#ff0000",
pixelSize: 10,
outlineColor: "#ffffff",
outlineWidth: 2
},
attr: { remark: "示例4" }
})
graphicLayer.addGraphic(graphic)
const pointEdit = new mars3d.thing.MatrixMove({
position: graphic.position
})
map.addThing(pointEdit)
pointEdit.on(mars3d.EventType.change, (event) => {
graphic.position = event.position
})
}
src/example/thing/terrain/slope/map.js
......@@ -53,6 +53,14 @@ function addSlope() {
slope.on(mars3d.EventType.end, function (event) {
console.log("分析完成", event)
const positions = event.positions
if (positions.length > 2) {
positions[0] = mars3d.PointUtil.setPositionsHeight(positions[0], event.minHeight - 100)
positions[positions.length - 1] = mars3d.PointUtil.setPositionsHeight(positions[positions.length - 1], event.maxHeight + 100)
contourLine.positions = positions
}
// event.data[0] 数组内返回值说明： {
// position:position, //坐标位置
// slope: slopeValDou, //度数法值，α(坡度)=arc tan (高程差/水平距离)
......@@ -88,8 +96,6 @@ export function btnDrawExtent(splitNum) {
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标
contourLine.positions = positions
slope.add(positions, {
splitNum: splitNum, // splitNum插值分割的个数
radius: 1, // 缓冲半径（影响坡度坡向的精度）
......@@ -118,8 +124,6 @@ export function btnDraw(splitNum) {
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标
contourLine.positions = positions
slope.add(positions, {
splitNum: splitNum, // splitNum插值分割的个数
radius: 1, // 缓冲半径（影响坡度坡向的精度）
......
src/example/thing/tileset/tilesetFlood/map.js
......@@ -22,7 +22,8 @@ export function onMounted(mapInstance) {
globalNotify(
"已知问题提示",
`(1) 目前不支持所有类型3dtile数据，请替换url进行自测`
`(1) 目前不支持所有类型3dtile数据，请替换url进行自测
(2) 部分模型不同LOD的内部高度不同，造成不同LOD的淹没高度不同`
)
showDytDemo()
......
src/example/util/polyUtil/interPoly/map.js
......@@ -134,6 +134,36 @@ function showInterPolygonResult(list) {
interGraphicLayer.addGraphic(primitiveLine)
}
export function interPolygonGrid(val) {
clearInterResult()
map.graphicLayer.startDraw({
type: "polygon",
style: {
color: "#29cf34",
opacity: 0.3,
outline: true,
outlineColor: "#ffffff"
},
success: function (graphic) {
const positions = graphic.positionsShow
map.graphicLayer.clear()
const result = mars3d.PolyUtil.getGridPointsByPoly(positions, val)
result.forEach((p, i) => {
const graphic = new mars3d.graphic.PointPrimitive({
position: p,
style: {
color: "#ff0000",
pixelSize: 6
}
})
interGraphicLayer.addGraphic(graphic)
})
}
})
}
/**
* 面插值
*
......
src/widgets/basic/GraphicEditor/index.tsx
......@@ -16,7 +16,7 @@ function GraphicEditor({ currentWidget, ...props }) {
useEffect(() => {
console.log("编辑面板接收到了graphic对象更新:", currentWidget)
const gp = currentWidget?.data?.graphic
if (!gp) {
if (!gp || gp.isDestroy || !gp._layer) {
return
}
......
src/widgets/basic/Layer/img/guihua.jpg
src/widgets/basic/Layer/img/guihua.jpg

370 KB | W: | H:

src/widgets/basic/Layer/img/guihua.jpg

69.3 KB | W: | H:

src/widgets/basic/Layer/img/guihua.jpg
src/widgets/basic/Layer/img/guihua.jpg
src/widgets/basic/Layer/img/guihua.jpg
src/widgets/basic/Layer/img/guihua.jpg
  • 2-up
  • Swipe
  • Onion skin
src/widgets/basic/SearchPoi/index.module.less
......@@ -72,8 +72,7 @@
.query-site {
position: absolute;
border-top: none;
padding: 10px 20px;
padding-top: 0;
padding-bottom: 10px;
width: 100%;
border-bottom: 1px solid #008aff70;
......@@ -88,6 +87,7 @@
background-color: @mars-bg-base;
.query-site__item {
height: 80px;
padding: 0 20px;
display: flex;
justify-content: flex-start;
align-items: center;
......@@ -96,16 +96,28 @@
}
.query-site__context {
flex-grow: 1;
> p {
margin-bottom: 0;
}
.query-site-text {
font-size: 16px;
width: 200px;
font-family: Source Han Sans CN;
font-weight: 400;
color: @mars-base-color;
.query-site-text_num {
width: 19px;
height: 25px;
margin-right: 5px;
display: inline-block;
text-align: center;
background-image: url("@mars/assets/images/query-site-text_num.png");
}
}
.query-site-sub {
font-size: 14px;
width: 200px;
margin-left: 19px;
font-family: Source Han Sans CN;
font-weight: 400;
color: @mars-content-color;
......@@ -121,7 +133,7 @@
.query-site__page {
display: flex;
justify-content: space-between;
padding: 10px 0;
padding: 10px 20px;
.query-site-allcount {
font-size: 14px;
}
......
src/widgets/basic/SearchPoi/index.tsx
......@@ -18,6 +18,12 @@ export default function (props) {
const [searchListShow, setSearchListShow] = useState(false)
const [siteListShow, setSiteListShow] = useState(false)
useEffect(() => {
if (searchTxt === "") {
setSearchListShow(false)
}
})
let timer = useRef<any>()
const startCloseSearch = () => {
......@@ -25,7 +31,7 @@ export default function (props) {
setSearchListShow(false)
clearTimeout(timer.current)
timer = null
}, 100)
}, 500)
}
// 搜寻输入框数据之前的提示数据 以及搜寻过的历史数据 通过列表展现
......@@ -169,12 +175,13 @@ export default function (props) {
<li key={i} className={styles["query-site__item"]} onClick={() => flyTo(item)}>
<div className={styles["query-site__context"]}>
<p className={`${styles["query-site-text"]} f-toe`} title={item.name}>
{i + 1}、{item.name}
<span className={styles["query-site-text_num"]}>{i + 1}</span>
{item.name}
</p>
<p className={`${styles["query-site-sub"]} f-toe`}>{item.type}</p>
</div>
<a href={url + item.id} rel="noreferrer" target="_blank" className={styles["query-site__more"]}>
更多&gt;&gt;
<MarsIcon icon="double-right" width="20"></MarsIcon>
</a>
</li>
))}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论