当前位置：首页 > news >正文

GeoJsonLayer|BusineDataLayer|graphicLayer数据修改点位层级

news 2025/8/6 18:16:38

说明：

1.zIndex仅支持贴地的线面数据进行层级控制

2.point类型的数据期望进行点位控制的话，需要进行不同的高度值设置来实现点位层级控制

关键代码：

    geoJsonLayer.on(mars3d.EventType.click, function (event) {console.log("监听layer，单击了矢量对象", event)const graphic = event.graphicconsole.log(graphic.position,"graphic.positionShow")graphic.position = mars3d.PointUtil.addPositionsHeight(graphic.positionShow, 2000)})

为了区分的话，加了一个颜色

链接：

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

全部代码：

import * as mars3d from "mars3d"export let map // mars3d.Map三维地图对象
let geoJsonLayerexport const mapOptions = {scene: {center: { lat: 31.722018, lng: 117.251926, alt: 8378, heading: 0, pitch: -33 }}
}export const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中// 初始化地图业务，生命周期钩子函数（必须）,框架在地图初始化完成后自动调用该函数
export function onMounted(mapInstance) {map = mapInstance // 记录mapmap.basemap = 2017 // 切换到蓝色底图addLayer()
}// 释放当前地图业务的生命周期函数,具体项目中时必须写onMounted的反向操作（如解绑事件、对象销毁、变量置空）
export function onUnmounted() {map = null
}/*** 添加合肥市建筑物和体育设施点* @returns {void}**/
function addLayer() {const tiles3dLayer = new mars3d.layer.TilesetLayer({name: "合肥市建筑物",url: "https://data.mars3d.cn/3dtiles/jzw-hefei/tileset.json",maximumScreenSpaceError: 1,marsJzwStyle: true, // 打开建筑物特效（内置Shader代码）popup: [{ field: "objectid", name: "编号" },{ field: "name", name: "名称" },{ field: "height", name: "楼高", unit: "米" }],center: { lat: 31.841018, lng: 117.252932, alt: 1346, heading: 38, pitch: -26 },flyTo: true})map.addLayer(tiles3dLayer)geoJsonLayer = new mars3d.layer.GeoJsonLayer({name: "体育设施点",url: "https://data.mars3d.cn/file/geojson/hfty-point.json",symbol: {type: "point",styleOptions: {color: "#3388ff",pixelSize: 10,outlineColor: "#ffffff",outlineWidth: 2}},popup: "all",flyTo: true})map.addLayer(geoJsonLayer)// 绑定事件geoJsonLayer.on(mars3d.EventType.load, function (event) {const geojsonLength = geoJsonLayer.lengtheventTarget.fire("geoJsonLayerLoad", { geojsonLength })console.log("数据加载完成", event)})geoJsonLayer.on(mars3d.EventType.click, function (event) {console.log("监听layer，单击了矢量对象", event)const graphic = event.graphicconsole.log(graphic.position,"graphic.positionShow")graphic.setStyle({color: "red",})graphic.position = mars3d.PointUtil.addPositionsHeight(graphic.positionShow, 2000)})
}// 保存为Geojson文件
export function toGeojson() {const geojson = geoJsonLayer.toGeoJSON()mars3d.Util.downloadFile("hfty-point-含高度值.json", JSON.stringify(geojson))
}// 计算贴地高度示例代码，可以将获取到的高度更新到数据库内，后续不用重复计算。
export function getDataSurfaceHeight() {if (geoJsonLayer.length === 0) {globalMsg("数据尚未加载成功！")return}showLoading()// 对图层内的数据做贴地运算,自动得到贴地高度geoJsonLayer.autoSurfaceHeight({exact: true,// filter: (r) => {//     return r.options.id % 2 === 0// },endItem: function (result) {const resultData = {percent: result.index + 1,percentAll: result.count}eventTarget.fire("computedResult", { resultData })}// end: (e) => {//   console.log("分析结束", e)// }}).then(() => {hideLoading()})
}