Skip to content

M
mars3d
Commit a1b58175 by wanghao
Options

同步 v3.6.1代码

parent 2da070b5
正在显示 包含 318 行增加 和 302 行删除
public/lib/mars3d/mars3d.css
/**
* Mars3D三维可视化平台 mars3d
*
* 版本信息：v3.6.0
* 编译日期：2023-08-04 12:47:13
* 版本信息：v3.6.1
* 编译日期：2023-08-14 21:45:40
* 版权所有：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/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/control/other/poiQueryButton/PoiQueryButton.css
.queryPoiButton {
position: absolute;
left: 3.5px;
top: -36px;
width: 310px;
height: 300px;
background-color: rgba(0, 0, 0, 0) !important;
border: none;
border-radius: 0 !important;
padding: 0;
margin: 0;
box-shadow: none !important;
}
.queryPoiButton:hover {
box-shadow: none;
}
.queryPoiButton svg {
position: absolute;
top: 0;
left: 0;
background: #3f4854;
border: none;
border-radius: 14%;
}
.toolSearch {
position: absolute;
left: 32px;
right: 0;
top: -6px;
border: none;
color: white;
border: 1px solid #717171e0;
overflow: hidden;
}
.poiButtonResult {
position: absolute;
left: 36px;
top: 32.5px;
width: 274px;
min-height: 120px;
border: none;
color: white;
overflow: hidden;
}
.deleteInput {
position: absolute;
top: 0;
right: 5px;
line-height: 0;
font-size: 18px;
cursor: pointer;
}
.searchInput {
width: 100%;
height: 31px;
border: none;
color: white;
background-color: rgba(40, 40, 40, 0.7);
}
input::-webkit-search-cancel-button {
display: none;
}
.searchInput:focus {
border-color: #ea4;
background-color: rgba(63, 72, 84);
box-shadow: none;
outline: none;
}
/* 搜寻的结果显示 */
.searchResults {
width: 100%;
height: 88%;
overflow: auto;
font-size: 12px;
position: absolute;
background-color: rgba(40, 40, 40, 0.7);
}
.searchResults p {
margin-left: -20px;
width: 100%;
text-align: center;
}
.searchResults ul {
display: block;
line-height: 25px;
min-height: 100px;
max-height: 150px;
}
.searchResults li {
margin: 0 0 9px -40px;
color: #ebebebe7;
cursor: pointer;
position: relative;
text-align: left;
text-indent: 25px;
}
.searchResults li::after {
content: "";
position: absolute;
left: -27px;
bottom: -3px;
width: 110%;
height: 1px;
background: #a79ecc;
}
.searchResults li:hover {
background: rgb(255 252 252 / 55%);
color: #795a5a;
}
.gaodesousuo img {
margin-right: 10px;
}
/*上下页数的样式 */
.resultNextPages {
width: 100%;
height: 12%;
color: #ebebebe7;
cursor: pointer;
font-size: 13px;
position: absolute;
bottom: 0;
padding-left: 10px;
line-height: 16px;
background-color: rgba(40, 40, 40, 0.7);
}
.resultNextPages p {
float: left;
}
/* 下一页 */
.resultNextPages p:nth-last-child(1) {
text-align: center;
position: relative;
right: -34px;
width: 18px;
border: 1px solid #f9ececb3;
}
/* 上一页 */
.resultNextPages p:nth-last-child(2) {
text-align: center;
position: relative;
right: -30px;
width: 18px;
border: 1px solid #f9ececb3;
}
/* 首页 */
.resultNextPages p:nth-last-child(3) {
text-align: center;
position: relative;
right: -10px;
width: 35px;
border: 1px solid #f9ececb3;
}
/* 页数 */
.resultNextPages p:nth-last-child(4) {
position: relative;
right: -5px;
width: 65px;
}
.resultNextPages p:nth-last-child(1):hover,
.resultNextPages p:nth-last-child(2):hover,
.resultNextPages p:nth-last-child(3):hover {
text-decoration: underline;
}
.toolSearch {
width: 310px;
position: absolute;
left: 36px;
right: 0;
border: none;
color: white;
border: 1px solid #717171e0;
overflow: hidden;
}
.poiButtonResult {
position: absolute;
left: 36px;
bottom: 0;
width: 310px;
min-height: 120px;
border: none;
color: white;
overflow: hidden;
}
.deleteInput {
position: absolute;
top: -2px;
right: 5px;
line-height: 0;
font-size: 18px;
cursor: pointer;
}
.searchInput {
width: 100%;
height: 31px;
border: none;
color: white;
background-color: rgba(40, 40, 40, 0.7);
}
input::-webkit-search-cancel-button {
display: none;
}
.searchInput:focus {
border-color: #ea4;
background-color: rgba(63, 72, 84);
box-shadow: none;
outline: none;
}
/* 搜寻的结果显示 */
.searchResults {
width: 100%;
height: 88%;
overflow: auto;
font-size: 12px;
position: absolute;
background-color: rgba(40, 40, 40, 0.7);
}
.searchResults p {
margin-left: -20px;
width: 100%;
text-align: center;
}
.searchResults ul {
display: block;
line-height: 25px;
min-height: 100px;
max-height: 150px;
}
.searchResults li {
margin: 0 0 9px -40px;
color: #ebebebe7;
cursor: pointer;
position: relative;
text-align: left;
text-indent: 25px;
}
.searchResults li::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: #a79ecc;
}
.searchResults li:hover {
background: rgb(255 252 252 / 55%);
color: #795a5a;
}
.gaodesousuo img {
margin-right: 10px;
}
/*上下页数的样式 */
.resultNextPages {
width: 100%;
height: 12%;
color: #ebebebe7;
cursor: pointer;
font-size: 13px;
position: absolute;
bottom: 0;
padding-left: 10px;
line-height: 16px;
background-color: rgba(40, 40, 40, 0.7);
}
.resultNextPages p {
float: left;
}
/* 下一页 */
.resultNextPages p:nth-last-child(1) {
text-align: center;
position: relative;
right: -34px;
width: 18px;
border: 1px solid #f9ececb3;
}
/* 上一页 */
.resultNextPages p:nth-last-child(2) {
text-align: center;
position: relative;
right: -30px;
width: 18px;
border: 1px solid #f9ececb3;
}
/* 首页 */
.resultNextPages p:nth-last-child(3) {
text-align: center;
position: relative;
right: -10px;
width: 35px;
border: 1px solid #f9ececb3;
}
/* 页数 */
.resultNextPages p:nth-last-child(4) {
position: relative;
right: -5px;
width: 65px;
}
.resultNextPages p:nth-last-child(1):hover,
.resultNextPages p:nth-last-child(2):hover,
.resultNextPages p:nth-last-child(3):hover {
text-decoration: underline;
}
\ No newline at end of file
src/example/control/other/poiQueryButton/PoiQueryButton.js
......@@ -83,41 +83,74 @@ class PoiQueryButton extends mars3d.control.BaseControl {
)
// 鼠标移入移出
let numTime = null
let cacheTarget
// 搜索框移入
this._container.addEventListener("mouseover", (e) => {
// 缓存，提高效率
if (cacheTarget === this.id) {
return
if (numTime) {
clearTimeout(numTime)
numTime = null
}
cacheTarget = this.id
if (this._queryInputContainer.style.display !== "block") {
this.toolSearchNoShow("block")
this.toolActive()
mars3d.DomUtil.addClass(this._container, "queryPoiButton")
this._queryInputContainer.style.top = this._container.offsetTop + "px"
this._queryResultContainer.style.height = this.parentContainer.offsetHeight - this._container.offsetTop - 31 + "px"
this._container.style.height = this.parentContainer.offsetHeight + 40 + "px"
this._queryResultContainer.style.height = this.parentContainer.offsetHeight - 10 + "px"
this.toolActive()
}
})
// 搜索框移出
this._container.addEventListener("mouseout", (e) => {
cacheTarget = null
const queryVal = this._queryInputContainer.querySelector(".searchInput").value
if (queryVal.length === 0) {
this.clear()
this.toolSearchNoShow("none")
mars3d.DomUtil.removeClass(this._container, "queryPoiButton")
this._container.style.height = ""
}
numTime = setTimeout(() => {
console.log("触发 mouseout ？ _container")
cacheTarget = null
const queryVal = this._queryInputContainer.querySelector(".searchInput").value
if (queryVal.length === 0) {
this.clear()
this.toolSearchNoShow("none")
}
}, 500)
})
// input面板，在queryPoiButton下面
this._queryInputContainer = mars3d.DomUtil.create("div", "toolSearch")
this._container.appendChild(this._queryInputContainer)
this.parentContainer.appendChild(this._queryInputContainer)
// 搜索框移除
this._queryInputContainer.addEventListener("mouseover", (e) => {
if (numTime) {
clearTimeout(numTime)
numTime = null
}
})
this._queryInputContainer.addEventListener("input", (e) => {
if (numTime) {
clearTimeout(numTime)
numTime = null
}
// 缓存，提高效率
if (cacheTarget === this.id) {
return
}
cacheTarget = this.id
this.toolSearchNoShow("block")
})
this._queryInputContainer.addEventListener("mouseout", (e) => {
numTime = setTimeout(() => {
cacheTarget = null
const queryVal = this._queryInputContainer.querySelector(".searchInput").value
if (queryVal.length === 0) {
this.clear()
this.toolSearchNoShow("none")
}
}, 500)
})
// 搜寻结果，在mars3dContainer面板下面
this._queryResultContainer = mars3d.DomUtil.create("div", "poiButtonResult")
this._container.appendChild(this._queryResultContainer)
this.parentContainer.appendChild(this._queryResultContainer)
this.toolSearchNoShow("none")
// 创建input输入框
......@@ -133,7 +166,7 @@ class PoiQueryButton extends mars3d.control.BaseControl {
this._queryInputContainer.querySelector(".searchInput").value = ""
this.clear()
this.toolSearchNoShow("none")
mars3d.DomUtil.removeClass(this._container, "queryPoiButton")
// mars3d.DomUtil.removeClass(this._container, "queryPoiButton")
this._container.style.height = ""
cacheTarget = null
})
......
src/example/graphic/apply/plane/map.js
......@@ -130,7 +130,7 @@ function startRoam() {
// 当前的路线中的点位
const currIndex = fixedRoute.currIndex
if (currIndex % 2 === 0) {
if (currIndex % 2 === 1) {
return
}
......
src/example/graphic/combine/box/map.js
......@@ -91,6 +91,8 @@ export function addRandomGraphicByCount(count) {
})
graphicLayer.addGraphic(graphic)
// graphic.openPopup(0)
graphicLayer.enabledEvent = true // 恢复事件
return result.points.length
}
......
src/example/graphic/combine/polyline/map.js
......@@ -88,6 +88,8 @@ export function addRandomGraphicByCount(count) {
})
graphicLayer.addGraphic(graphic)
// graphic.openPopup(0)
graphicLayer.enabledEvent = true // 恢复事件
return result.points.length
}
......
src/example/graphic/custom/fixedRoute-ground/map.js
......@@ -93,6 +93,9 @@ function addGraphicLayer() {
})
// ui面板信息展示
fixedRoute.on(mars3d.EventType.change, (event) => {
// const popup = event.graphic.getPopup()
// const container = popup?.container // popup对应的DOM
// console.log("漫游change", event)
throttled(eventTarget.fire("roamLineChange", event), 500)
})
......
src/example/graphic/custom/route-tileset/map.js
......@@ -60,19 +60,24 @@ export function onMounted(mapInstance) {
}
// 设置动态位置
graphicLayer.eachGraphic((graphic) => {
graphic.addDynamicPosition(randomPoint()) // 首次出现的位置
})
graphicLayer.eachGraphic((graphic) => {
graphic.addDynamicPosition(randomPoint(), 30) // 按30秒运动至指定位置
})
changePosition(0)
// 定时更新动态位置（setInterval为演示）
const interval = 30
changePosition(interval)
setInterval(() => {
graphicLayer.eachGraphic((graphic) => {
graphic.addDynamicPosition(randomPoint(), 30)
})
}, 30000)
changePosition(interval)
}, interval * 1000)
}
// 改变位置
function changePosition(time) {
graphicLayer.eachGraphic((graphic) => {
if (graphic.isPrivate) {
return
}
graphic.addDynamicPosition(randomPoint(), time) // 按time秒运动至指定位置
})
}
/**
......
src/example/graphic/entity/model-rotate/map.js
......@@ -85,7 +85,7 @@ function addDemoGraphic3(graphicLayer) {
style: {
url: "//data.mars3d.cn/gltf/mars/qiche.gltf",
scale: 0.5,
heading: 30,
heading: 90,
minimumPixelSize: 100
}
})
......@@ -94,6 +94,7 @@ function addDemoGraphic3(graphicLayer) {
// 移动模型
graphicCar.moveTo({
position: [116.259138, 30.855247, 562],
orientation: true,
time: 8 // 移动的时长(单位 秒)
})
}
src/example/graphic/entity/path/map.js
......@@ -144,15 +144,20 @@ function addDemoGraphic2(graphicLayer) {
})
graphicLayer.addGraphic(graphic)
graphic.addDynamicPosition(randomPoint(), 0)
graphic.addDynamicPosition(randomPoint(), 20)
// 设置动态位置
changePosition(graphic, 0)
// 定时更新动态位置（setInterval为演示）
const interval = 20
changePosition(graphic, interval)
setInterval(() => {
if (graphic.isAdded) {
graphic.addDynamicPosition(randomPoint(), 20)
}
}, 20000)
changePosition(graphic, interval)
}, interval * 1000)
}
// 改变位置
function changePosition(graphic, time) {
graphic.addDynamicPosition(randomPoint(), time) // 按time秒运动至指定位置
}
// 取区域内的随机点
......
src/example/graphic/primitive/billboard-worker/map.js
......@@ -5,7 +5,6 @@ import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象
let imgData = null
let lastExtent = null
let bWorking = false
let currentData
......@@ -30,8 +29,6 @@ export const mapOptions = {
export function onMounted(mapInstance) {
map = mapInstance // 记录map
imgData = getImageData()
// 创建矢量数据图层
graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
......@@ -107,6 +104,11 @@ function startWorker(strBounds) {
}
}
const colorRamp = new mars3d.ColorRamp({
steps: [25, 75, 125, 175, 250, 400],
colors: ["rgb(0, 228, 0)", "rgb(256, 256, 0)", "rgb(256, 126, 0)", "rgb(256, 0, 0)", "rgb(153, 0, 76)", "rgb(126, 0, 35)"]
})
function createGraphics(currentData) {
graphicLayer.clear()
console.log("加载数据", currentData)
......@@ -120,7 +122,7 @@ function createGraphics(currentData) {
position: [item.lon, item.lat],
style: {
image: mars3d.Util.getCircleImage(item.aqi, {
color: getColor(item.aqi),
color: colorRamp.getColor(item.aqi),
radius: 25
}),
scale: 1,
......@@ -133,36 +135,3 @@ function createGraphics(currentData) {
graphicLayer.addGraphic(graphic)
}
}
// 获取色带
function getImageData() {
const nWidth = 500
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
}
function getColor(aqi) {
if (aqi > 500) {
return "rgba(126,0,35,0.8)"
} else {
return `rgba(${imgData[aqi * 4]},${imgData[aqi * 4 + 1]},${imgData[aqi * 4 + 2]},0.8)`
}
}
src/example/layer-other/weather/canvasWind/map.js
......@@ -25,17 +25,19 @@ export function onMounted(mapInstance) {
map.basemap = 2017 // 蓝色底图
map.hasTerrain = false
// 风场
canvasWindLayer = new mars3d.layer.CanvasWindLayer({
worker: window.currentPath + "windWorker.js", // 启用多线程模式，注释后是单线程模式(非必须)
color: "#ffffff", // 颜色
frameRate: 20, // 每秒刷新次数
speedRate: 60, // 风前进速率
particlesNumber: 10000,
maxAge: 120,
lineWidth: 2
lineWidth: 2,
// 单颜色
color: "#ffffff"
// 多颜色
// colors: ["rgb(0, 228, 0)", "rgb(256, 256, 0)", "rgb(256, 126, 0)", "rgb(256, 0, 0)", "rgb(153, 0, 76)", "rgb(126, 0, 35)"],
// steps: [1.0, 2.0, 5.4, 7.9, 10.7, 13.8]
})
map.addLayer(canvasWindLayer)
......
src/example/layer-tile/type/wms/map.js
......@@ -65,6 +65,17 @@ export function onUnmounted() {
// 叠加的图层
let tileLayer
// 改wms请求的大小写
// Cesium.Resource.ReplaceUrl = function (url) {
// if (this._url.startsWith("//server.mars3d.cn/geoserver/mars/wms")) {
// return url.replaceAll("bbox", "BBOX") // 将3dtiles中的“+”符号转义下
// } else {
// return url
// }
// }
export function addTileLayer() {
removeTileLayer()
......
src/example/query/gaodeRoute/map.js
......@@ -67,7 +67,7 @@ export function removeAll() {
* 起点按钮
*
* @export
* @param {string} type 不同方式路线查询
* @param {number} type 不同方式路线查询
* @returns {string}
*/
export function startPoint(type) {
......
src/example/thing/analysis/shadows/map.js
......@@ -136,6 +136,11 @@ export function drawArea(date) {
})
}
const colorRamp = new mars3d.ColorRamp({
steps: [5, 15, 25, 35, 50, 80],
colors: ["rgb(0, 228, 0)", "rgb(256, 256, 0)", "rgb(256, 126, 0)", "rgb(256, 0, 0)", "rgb(153, 0, 76)", "rgb(126, 0, 35)"]
})
function showRateResult(result) {
console.log("分析结果", result)
......@@ -147,7 +152,7 @@ function showRateResult(result) {
position: p,
style: {
pixelSize: 10,
color: getColor(rate) // 计算颜色，色带颜色
color: colorRamp.getColor(rate) // 计算颜色，色带颜色
},
popup: `阴影率: ${rate.toFixed(2)}%`
})
......@@ -155,39 +160,40 @@ function showRateResult(result) {
})
}
// 获取色带
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)`
}
}
// // 获取色带
// 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)`
// }
// }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论