Skip to content

M
mars3d
Commit a1b58175 by wanghao
Options

同步 v3.6.1代码

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