Commit b29d79af by wanghao

同步代码 v3.5.6

parent 4f52fa5a
...@@ -69,6 +69,14 @@ ...@@ -69,6 +69,14 @@
{ {
"id": 2021, "id": 2021,
"pid": 10, "pid": 10,
"name": "谷歌影像",
"icon": "/img/basemaps/google_img.png",
"type": "google",
"layer": "img_d",
"show": true
},
{
"pid": 10,
"name": "天地图影像", "name": "天地图影像",
"icon": "/img/basemaps/tdt_img.png", "icon": "/img/basemaps/tdt_img.png",
"type": "group", "type": "group",
...@@ -76,7 +84,7 @@ ...@@ -76,7 +84,7 @@
{ "name": "底图", "type": "tdt", "layer": "img_d" }, { "name": "底图", "type": "tdt", "layer": "img_d" },
{ "name": "注记", "type": "tdt", "layer": "img_z" } { "name": "注记", "type": "tdt", "layer": "img_z" }
], ],
"show": true "show": false
}, },
{ {
"pid": 10, "pid": 10,
...@@ -1082,7 +1090,7 @@ ...@@ -1082,7 +1090,7 @@
"maximumMemoryUsage": 1024, "maximumMemoryUsage": 1024,
"center": { "lat": 34.215516, "lng": 108.960251, "alt": 834, "heading": 4, "pitch": -48 }, "center": { "lat": 34.215516, "lng": 108.960251, "alt": 834, "heading": 4, "pitch": -48 },
"flat": { "flat": {
"enabled":true, "enabled": true,
"editHeight": 420 "editHeight": 420
}, },
"flyTo": false, "flyTo": false,
......
...@@ -234,6 +234,12 @@ ...@@ -234,6 +234,12 @@
"hasPannel": true "hasPannel": true
}, },
{ {
"name": "谷歌",
"thumbnail": "layert-online-google.jpg",
"main": "layer-tile/online/google",
"hasPannel": true
},
{
"name": "微软Bing", "name": "微软Bing",
"thumbnail": "layert-online-bing.jpg", "thumbnail": "layert-online-bing.jpg",
"main": "layer-tile/online/bing", "main": "layer-tile/online/bing",
...@@ -258,18 +264,6 @@ ...@@ -258,18 +264,6 @@
"hasPannel": true "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": "实时交通态势图", "name": "实时交通态势图",
"thumbnail": "layert-online-traffic-time.jpg", "thumbnail": "layert-online-traffic-time.jpg",
"main": "layer-tile/online/traffic-time", "main": "layer-tile/online/traffic-time",
...@@ -2422,11 +2416,6 @@ ...@@ -2422,11 +2416,6 @@
"main": "graphic/entity/rectangle-cloud" "main": "graphic/entity/rectangle-cloud"
}, },
{ {
"name": "水面倒影 Demo",
"thumbnail": "effect-inverted.jpg",
"main": "effect/inverted"
},
{
"name": "对象描边", "name": "对象描边",
"thumbnail": "effect-outlineEffect.jpg", "thumbnail": "effect-outlineEffect.jpg",
"main": "effect/outlineEffect" "main": "effect/outlineEffect"
...@@ -2944,10 +2933,27 @@ ...@@ -2944,10 +2933,27 @@
"icon": "fa-globe", "icon": "fa-globe",
"children": [ "children": [
{ {
"name": "存在问题的示例", "name": "第三方原因的",
"details": "第三方服务、国家政策等原因造成的暂时不能用的功能",
"children": [
{
"name": "OSM【已被封】",
"thumbnail": "layert-online-osm.jpg",
"main": "layer-tile/online/osm",
"hasPannel": true
}
]
},
{
"name": "存在问题的",
"details": "当前存在问题的示例,有点鸡肋,仅供学习参考", "details": "当前存在问题的示例,有点鸡肋,仅供学习参考",
"children": [ "children": [
{ {
"name": "水面倒影 Demo",
"thumbnail": "effect-inverted.jpg",
"main": "effect/inverted"
},
{
"name": "PBF矢量瓦片(OL渲染)", "name": "PBF矢量瓦片(OL渲染)",
"thumbnail": "layert-type-mvt.jpg", "thumbnail": "layert-type-mvt.jpg",
"main": "layer-tile/type/pbf-ol", "main": "layer-tile/type/pbf-ol",
......
/** /**
* Mars3D三维可视化平台 mars3d * Mars3D三维可视化平台 mars3d
* *
* 版本信息:v3.5.5 * 版本信息:v3.5.6
* 编译日期:2023-05-04 19:16:46 * 编译日期:2023-05-07 18:40:39
* 版权所有:Copyright by 火星科技 http://mars3d.cn * 版权所有:Copyright by 火星科技 http://mars3d.cn
* 使用单位:免费公开版 ,2023-03-17 * 使用单位:免费公开版 ,2023-03-17
*/ */
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -90,6 +90,10 @@ function addRoamLines() { ...@@ -90,6 +90,10 @@ function addRoamLines() {
scale: 1, scale: 1,
minimumPixelSize: 60 minimumPixelSize: 60
}, },
billboard: {
image: "img/icon/huojian.svg",
scale: 0.3
},
path: { path: {
color: "#ffff00", color: "#ffff00",
opacity: 0.5, opacity: 0.5,
......
...@@ -128,6 +128,7 @@ function addDemoGraphic2(graphicLayer) { ...@@ -128,6 +128,7 @@ function addDemoGraphic2(graphicLayer) {
], ],
style: { style: {
width: 6, width: 6,
sharpness: 0.95, // 曲线的弯曲程度
materialType: mars3d.MaterialType.PolylineOutline, materialType: mars3d.MaterialType.PolylineOutline,
materialOptions: { materialOptions: {
color: Cesium.Color.ORANGE, color: Cesium.Color.ORANGE,
......
...@@ -27,6 +27,8 @@ export const mapOptions = { ...@@ -27,6 +27,8 @@ export const mapOptions = {
export function onMounted(mapInstance) { export function onMounted(mapInstance) {
map = mapInstance // 记录首次创建的map map = mapInstance // 记录首次创建的map
globalNotify("操作提示:", `请鼠标单击地图任意处,浏览器安全机制需要鼠标操作才能自动开始播放视频。`)
// 添加参考三维模型 // 添加参考三维模型
const tiles3dLayer = new mars3d.layer.TilesetLayer({ const tiles3dLayer = new mars3d.layer.TilesetLayer({
name: "合肥国家大学科技园", name: "合肥国家大学科技园",
...@@ -44,8 +46,7 @@ export function onMounted(mapInstance) { ...@@ -44,8 +46,7 @@ export function onMounted(mapInstance) {
// 加一些演示数据 // 加一些演示数据
addDemoGraphic1() addDemoGraphic1()
addDemoGraphic2() addDemoGraphic2()
addDemoGraphic3()
globalNotify("操作提示:", `请鼠标单击地图任意处,浏览器安全机制需要鼠标操作才能自动开始播放视频。`)
} }
/** /**
...@@ -168,6 +169,40 @@ function addDemoGraphic2() { ...@@ -168,6 +169,40 @@ function addDemoGraphic2() {
graphicLayer.addGraphic(video3D) 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) { export function onChangeAngle(value) {
if (selectedView) { if (selectedView) {
selectedView.angle = value selectedView.angle = value
......
...@@ -196,7 +196,13 @@ export function drawPolyline(clampToGround) { ...@@ -196,7 +196,13 @@ export function drawPolyline(clampToGround) {
width: 3, width: 3,
clampToGround: clampToGround clampToGround: clampToGround
} }
// 外部自定义校验坐标,return false 时坐标无效,不参与绘制
// validDrawPosition: function (position, graphic) {
// const point = mars3d.LngLatPoint.fromCartesian(position)
// return (point.lng > 115 && point.lng < 117)
// }
}) })
// .then(() => { // .then(() => {
// map.highlightEnabled = true // map.highlightEnabled = true
// map.popup.enabled = true // map.popup.enabled = true
......
...@@ -33,6 +33,8 @@ export function onUnmounted() { ...@@ -33,6 +33,8 @@ export function onUnmounted() {
let geodePoiLayer let geodePoiLayer
function GeodePoiLayer() { function GeodePoiLayer() {
// 高德错误代码:https://lbs.amap.com/api/webservice/guide/tools/info/
// 高德POI图层,演示大数据的分块加载 // 高德POI图层,演示大数据的分块加载
geodePoiLayer = new mars3d.layer.GeodePoiLayer({ geodePoiLayer = new mars3d.layer.GeodePoiLayer({
minimumLevel: 13, minimumLevel: 13,
......
...@@ -10,19 +10,12 @@ export const mapOptions = { ...@@ -10,19 +10,12 @@ export const mapOptions = {
// 方式1:在创建地球前的参数中配置 // 方式1:在创建地球前的参数中配置
basemaps: [ 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)", name: "谷歌影像(WGS84)",
icon: "img/basemaps/google_img.png", icon: "img/basemaps/google_img.png",
type: "google", type: "google",
layer: "img_d", layer: "img_d",
chinaCRS: mars3d.ChinaCRS.WGS84 chinaCRS: mars3d.ChinaCRS.WGS84,
show: true
}, },
{ {
name: "谷歌影像", name: "谷歌影像",
...@@ -30,7 +23,7 @@ export const mapOptions = { ...@@ -30,7 +23,7 @@ export const mapOptions = {
type: "group", type: "group",
layers: [ 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_d", chinaCRS: mars3d.ChinaCRS.GCJ02 } { name: "注记", type: "google", layer: "img_z", chinaCRS: mars3d.ChinaCRS.GCJ02 }
] ]
}, },
{ {
......
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
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
}
...@@ -5,39 +5,40 @@ export let map // mars3d.Map三维地图对象 ...@@ -5,39 +5,40 @@ export let map // mars3d.Map三维地图对象
// 需要覆盖config.json中地图属性参数(当前示例框架中自动处理合并) // 需要覆盖config.json中地图属性参数(当前示例框架中自动处理合并)
export const mapOptions = { export const mapOptions = {
scene: { 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:在创建地球前的参数中配置 // 方式1:在创建地球前的参数中配置
basemaps: [ basemaps: [
{ // {
name: "光污染图层", // name: "光污染图层",
icon: "img/basemaps/blackMarble.png", // icon: "img/basemaps/blackMarble.png",
type: "wms", // type: "wms",
url: "//www.lightpollutionmap.info/geoserver/gwc/service/wms", // url: "//www.lightpollutionmap.info/geoserver/gwc/service/wms",
layers: "PostGIS:VIIRS_2019", // layers: "PostGIS:VIIRS_2019",
crs: "EPSG:3857", // crs: "EPSG:3857",
parameters: { // parameters: {
transparent: true, // transparent: true,
format: "image/png" // format: "image/png"
}, // },
alpha: 0.6, // 透明度 // alpha: 0.6, // 透明度
proxy: "//server.mars3d.cn/proxy/", // 代理服务,解决跨域问题 // proxy: "//server.mars3d.cn/proxy/", // 代理服务,解决跨域问题
show: true // show: true
}, // },
{ // {
// wms也可以换一种xyz的直接写法 // // wms也可以换一种xyz的直接写法
name: "光污染图层(XYZ方式)", // name: "光污染图层(XYZ方式)",
icon: "img/basemaps/blackMarble.png", // icon: "img/basemaps/blackMarble.png",
type: "xyz", // 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", // 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, // 透明度 // alpha: 0.6, // 透明度
proxy: "//server.mars3d.cn/proxy/" // 代理服务,解决跨域问题 // proxy: "//server.mars3d.cn/proxy/" // 代理服务,解决跨域问题
}, // },
{ {
name: "单张图片", name: "单张图片",
icon: "img/basemaps/offline.png", icon: "img/basemaps/offline.png",
type: "image", 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 = { ...@@ -49,6 +50,8 @@ export const mapOptions = {
*/ */
export function onMounted(mapInstance) { export function onMounted(mapInstance) {
map = mapInstance // 记录首次创建的map map = mapInstance // 记录首次创建的map
addTileLayer()
} }
/** /**
...@@ -88,7 +91,7 @@ export function addTileLayer() { ...@@ -88,7 +91,7 @@ export function addTileLayer() {
axisY: true axisY: true
} }
}, },
popup: "all", popup: "all"
// popupOptions: { // popupOptions: {
// autoClose: false, // autoClose: false,
// closeOnClick: false, // closeOnClick: false,
...@@ -102,7 +105,7 @@ export function addTileLayer() { ...@@ -102,7 +105,7 @@ export function addTileLayer() {
// return false // return false
// } // }
// }, // },
flyTo: true // flyTo: true
}) })
map.addLayer(tileLayer) map.addLayer(tileLayer)
...@@ -113,6 +116,12 @@ export function addTileLayer() { ...@@ -113,6 +116,12 @@ export function addTileLayer() {
tileLayer.on(mars3d.EventType.click, function (event) { tileLayer.on(mars3d.EventType.click, function (event) {
console.log("单击了矢量数据,共" + event.features.length + "条", 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() { export function addTileLayer2() {
......
...@@ -136,6 +136,27 @@ export function setStyle3() { ...@@ -136,6 +136,27 @@ export function setStyle3() {
material.diffuse = texture(u_mars3d_texture, vec2(mars3d_textureX, mars3d_textureY)).rgb; 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() tiles3dLayer.reload()
} }
......
...@@ -212,6 +212,27 @@ export function setStyle3() { ...@@ -212,6 +212,27 @@ export function setStyle3() {
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput){ void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput){
v_mars3d_normalMC = vsInput.attributes.normalMC; 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 */ ` fragmentShaderText: /* glsl */ `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) { void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
vec3 positionMC = fsInput.attributes.positionMC; vec3 positionMC = fsInput.attributes.positionMC;
......
.mars3d-container { .mars3d-container {
transform-origin: center center; transform-origin: center center;
transform: scale(2); /*演示功能*/ transform: scale(2); /*演示功能*/
/*transform: matrix(0.5, 0, 0, 0.43, 3.41, 2.84);*/
} }
...@@ -78,6 +78,7 @@ export function startPlay(date, hours, minutes) { ...@@ -78,6 +78,7 @@ export function startPlay(date, hours, minutes) {
const startDate = new Date(date + " 00:00:00") const startDate = new Date(date + " 00:00:00")
const endDate = new Date(date + " 23:59:59") const endDate = new Date(date + " 23:59:59")
shadows.multiplier = 1600
shadows.start(startDate, endDate, currentTime) shadows.start(startDate, endDate, currentTime)
} }
...@@ -95,3 +96,99 @@ export function setShadows(date, hours, minutes) { ...@@ -95,3 +96,99 @@ export function setShadows(date, hours, minutes) {
return dateTime 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)`
}
}
...@@ -6,8 +6,14 @@ let underground ...@@ -6,8 +6,14 @@ let underground
export const mapOptions = { export const mapOptions = {
scene: { scene: {
center: { lat: 31.840106, lng: 117.216768, alt: 554, heading: 0, pitch: -59 }, 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: { globe: {
depthTestAgainstTerrain: true depthTestAgainstTerrain: true // 开启深度检测
} }
} }
} }
...@@ -20,6 +26,11 @@ export const mapOptions = { ...@@ -20,6 +26,11 @@ export const mapOptions = {
*/ */
export function onMounted(mapInstance) { export function onMounted(mapInstance) {
map = mapInstance // 记录map map = mapInstance // 记录map
map.container.style.backgroundColor = "#546a53" // 背景色
globalNotify("已知问题提示", `(1) 启用透明度后,放大层级底图瓦片衔接处有黑色缝隙 `)
addLayer() addLayer()
} }
......
/**
* 基于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
}
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
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)
}
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
})
}
...@@ -53,6 +53,14 @@ function addSlope() { ...@@ -53,6 +53,14 @@ function addSlope() {
slope.on(mars3d.EventType.end, function (event) { slope.on(mars3d.EventType.end, function (event) {
console.log("分析完成", 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] 数组内返回值说明: { // event.data[0] 数组内返回值说明: {
// position:position, //坐标位置 // position:position, //坐标位置
// slope: slopeValDou, //度数法值,α(坡度)=arc tan (高程差/水平距离) // slope: slopeValDou, //度数法值,α(坡度)=arc tan (高程差/水平距离)
...@@ -88,8 +96,6 @@ export function btnDrawExtent(splitNum) { ...@@ -88,8 +96,6 @@ export function btnDrawExtent(splitNum) {
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标 console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标
contourLine.positions = positions
slope.add(positions, { slope.add(positions, {
splitNum: splitNum, // splitNum插值分割的个数 splitNum: splitNum, // splitNum插值分割的个数
radius: 1, // 缓冲半径(影响坡度坡向的精度) radius: 1, // 缓冲半径(影响坡度坡向的精度)
...@@ -118,8 +124,6 @@ export function btnDraw(splitNum) { ...@@ -118,8 +124,6 @@ export function btnDraw(splitNum) {
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标 console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标
contourLine.positions = positions
slope.add(positions, { slope.add(positions, {
splitNum: splitNum, // splitNum插值分割的个数 splitNum: splitNum, // splitNum插值分割的个数
radius: 1, // 缓冲半径(影响坡度坡向的精度) radius: 1, // 缓冲半径(影响坡度坡向的精度)
......
...@@ -22,7 +22,8 @@ export function onMounted(mapInstance) { ...@@ -22,7 +22,8 @@ export function onMounted(mapInstance) {
globalNotify( globalNotify(
"已知问题提示", "已知问题提示",
`(1) 目前不支持所有类型3dtile数据,请替换url进行自测` `(1) 目前不支持所有类型3dtile数据,请替换url进行自测
(2) 部分模型不同LOD的内部高度不同,造成不同LOD的淹没高度不同`
) )
showDytDemo() showDytDemo()
......
...@@ -134,6 +134,36 @@ function showInterPolygonResult(list) { ...@@ -134,6 +134,36 @@ function showInterPolygonResult(list) {
interGraphicLayer.addGraphic(primitiveLine) 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)
})
}
})
}
/** /**
* 面插值 * 面插值
* *
......
...@@ -16,7 +16,7 @@ function GraphicEditor({ currentWidget, ...props }) { ...@@ -16,7 +16,7 @@ function GraphicEditor({ currentWidget, ...props }) {
useEffect(() => { useEffect(() => {
console.log("编辑面板接收到了graphic对象更新:", currentWidget) console.log("编辑面板接收到了graphic对象更新:", currentWidget)
const gp = currentWidget?.data?.graphic const gp = currentWidget?.data?.graphic
if (!gp) { if (!gp || gp.isDestroy || !gp._layer) {
return return
} }
......

370 KB | W: | H:

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