【WebGis开发 - Cesium】三维可视化项目教程---图层管理基础

已于 2024-10-28 21:42:11 修改
阅读量1.3k 收藏 11
点赞数 28
分类专栏： WebGis开发 文章标签： 前端 vue3.0 webgis cesium 图层管理 wmts 3dtiles
于 2024-10-10 16:24:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44666711/article/details/142723977
版权

目录

引言

本教程主要是围绕Cesium这一开源三维框架开展的可视化项目教程。总结一下相关从业经验，如果有什么疑问或更好的见解，欢迎评论、私聊探讨，共同进步。教程依托于vue3前端框架，参考初始化内容：【WebGis开发 - Cesium】三维可视化项目教程—初始化场景

本篇主要讨论如何管理二三维图层，仅以wmts和3dtiles做图层管理示例。我会在接下来的教程里专门针对其他各类图层加载方式做详细介绍。

二三维图层管理是三维可视化项目里重要的组成部分，通过树结构管理图层，根据模块设计加载对应二三维数据。

先看效果：

在这里插入图片描述

一、功能设计

1. 主体功能

  1. 设计图层数据结构，使用任意树形结构插件或是自行开发图层树。
  2. 编写图层分类加载、卸载方法，暴露统一接口，配合图层数据进行图层操作。
  3. 存储数据至全局状态，方便管理。

2. 细节问题

图层数据大致上可以分为二维图层和三维图层

在三维引擎中针对这两者的表达方式有所不同

  • 二维图层没有高度，按照加载先后顺序重叠在一起。如果内容存在遮挡，则只显示最后加载的图层。（好比一摞画册）
  • 三维图层具备高度，没有加载先后顺序重叠遮挡一说，只会根据三维模型的实际物理尺寸决定遮挡关系。
  • 所以在开发图层树的时候，要注意区分二三维图层。

二、代码实现

1. 树形控件

树形控件采用 element-plus 组件库的 tree 组件。细节查阅：Tree 树形控件

几个需要注意的点：

  • 根据需求设置 check-on-click-node ，我希望不论点击选择框或是点击树节点内容，都可以触发选中节点。
  • 根据需求设置 :expand-on-click-node="false" ，我不希望在点击包含有子节点的节点时，一边加载子节点图层内容，一边把树折叠起来。或是反过来卸载子节点图层内容，同时把树伸展开。
  • 点击事件我选择 check-change ，只有这一个点击事件返回的数据符合我的需求。根据不同的设计理念，可以查阅组件库文档，选择适合自己项目的点选事件。
  • 图层管理核心在图层加载、卸载和全局数据管理，图层树可以根据自己喜好选择任意UI框架的树形结构，或是自行开发。满足展示树形图层以及选中、取消功能即可。

html部分

    <div class="layerManager">
      <div>图层管理</div>
      <el-tree
        :data="dataSource"
        show-checkbox
        node-key="id"
        default-expand-all
        check-on-click-node
        @check-change="checkChange"
        :expand-on-click-node="false"
      >
      </el-tree>
    </div>

数据部分

二维数据使用天地图影像、矢量、注记三种。三维数据使用本地3dtiles数据（有在线数据替换一下）。
天地图wmts图层引用示例可以参考：天地图服务 ，在页面最下方有请求示例。
在这里插入图片描述

树节点数据主要包含几个内容

  • 只有叶子节点存在url属性，实际控制图层的加载、卸载。其父级节点只作为文件夹管理功能，不实际控制图层。
  • type属性，表面当前图层属于哪种类型，根据类型分类后，调用指定方法加载、卸载图层。
  • id属性，值必须唯一。用于检索全局状态中存储的图层重要信息。
  • label属性，图层树显示名称。
const dataSource = ref([
  {
    id: "1",
    label: "二维地图",
    children: [
      {
        id: "1-1",
        label: "天地图影像",
        type: "wmts",
        url: "https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的天地图key",
      },
      {
        id: "1-2",
        label: "天地图矢量",
        type: "wmts",
        url: "https://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的天地图key",
      },
      {
        id: "1-3",
        label: "天地图矢量注记",
        type: "wmts",
        url: "https://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的天地图key",
      },
    ],
  },
  {
    id: "2",
    label: "三维地图",
    children: [
      {
        id: "2-1",
        label: "测试3dtiles模型",
        type: "3dtiles",
        // 我这里准备一份本地3dtiles数据在 `public/3dtiles/` 目录下
        url: "/3dtiles/test/tileset.json",
      },
    ],
  },
]);

2. 全局状态准备

使用 pinia 来管理全局状态

pinia的安装引入操作不过多赘述，自行查阅。

在 src/stores/ 目录下创建文件 layer.js

根据cesium提供的加载图层方法，可以发现

  • 常规二维图层都是以 imageryLayers 形式存储在全局变量 viewer 的 imageryLayers 属性中。
  • 3dtiles图层是以 primitive 形式存储在 viewer.scene 的 primitives 属性中。

所以我们创建两个全局状态数组 imageryLayers 和 primitiveLayers ，分别存储二维图层和三维图层。同时对应创建添加和查询两个action方法，用于保存和查询图层的重要信息（不需要把所有信息都存起来，只要存储特征值可以确保能在viewer中查询到对应图层即可）

import { defineStore } from "pinia";
export const useLayerStore = defineStore("LayerStore", {
  state: () => ({ imageryLayers: [], primitiveLayers: [] }),
  actions: {
    addImageryLayer(data) {
      this.imageryLayers.push(data);
    },
    getImageryLayer(id) {
      return this.imageryLayers.find((item) => item.id === id);
    },
    addPrimitiveLayer(data) {
      this.primitiveLayers.push(data);
    },
    getPrimitiveLayer(id) {
      return this.primitiveLayers.find((item) => item.id === id);
    },
  },
});

3. 创建图层控制方法

出于功能的可复用性考虑，将图层管理的方法封装为hooks函数

主要包含几个内容：

  1. 编写各类图层的加载和卸载方法。
  2. 集成加载和卸载的入口方法，对外暴露行为统一。
  3. 提供hooks函数的可拓展性。

3.1 加载、卸载方法编写

这里不深究对应图层加载api的使用方法，我会在之后的文章里详细介绍各图层加载方法的api使用方法以及常用属性填写。
描述一下我的编写逻辑：

  1. 加载方法
    • 先通过树节点 id 到全局状态中查询图层信息是否已经存在。
    • 如果已经加载过了，就通过保存的特殊标识查询到对应图层数据，将 show 属性改写为 true 即可。
    • 如果没有加载过，则调用对应api加载图层，加载完成后返回对应图层数据。
    • 创建图层特殊标识，用于查询到指定图层，将特殊标识添加到返回图层数据的自定义属性中，我这里设置的是layerId，确保标识值唯一。
    • 将 layerId 以及树节点信息保存至全局状态中。
  2. 卸载方法
    • 先通过树节点 id 到全局状态中查询图层信息是否已经存在。
    • 如果存在，就通过保存的特殊标识查询到对应图层数据，将 show 属性改写为 false 即可。
    • 不存在则不进行操作。
  import { useLayerStore } from "@/stores/layer.js";
  import { GenerateId } from "@/utils/cesium/common.js";
  const layerStore = useLayerStore();
  /**
   * @description: 添加wmts图层
   * @param {*} data
   * @return {*}
   */
  const addWmtsLayer = (data) => {
    // 先查询是否已经加载图层
    const layerData = layerStore.getImageryLayer(data.id);
    // 存在图层数据直接显示图层, 并返回
    if (layerData) {
      const layer = viewer.imageryLayers._layers.find(
        (item) => item.layerId === layerData.layerId
      );
      layer.show = true;
      layerData.show = true;
      return;
    }
    // 不存在图层数据则重新加载图层
    const imageMap = new Cesium.WebMapTileServiceImageryProvider({
      url: data.url
    });
    // 添加图层
    const layer = viewer.imageryLayers.addImageryProvider(imageMap);
    // 添加图层标识
    layer.layerId = GenerateId(18);
    // 向全局状态输入图层数据
    layerStore.addImageryLayer({ ...data, show: true, layerId: layer.layerId });
  };
  /**
   * @description: 移除wmts图层
   * @param {*} data
   * @return {*}
   */
  const removeWmtsLayer = (data) => {
    const layerData = layerStore.getImageryLayer(data.id);
    if (layerData) {
      //  获取图层数据并设置显示为false
      const layer = viewer.imageryLayers._layers.find(
        (item) => item.layerId === layerData.layerId
      );
      layer.show = false;
      layerData.show = false;
    }
  };
  /**
   * @description: 添加3dtiles图层
   * @param {*} data
   * @return {*}
   */
  const add3dtilesLayer = async (data) => {
    // 先查询是否已经加载图层
    const layerData = layerStore.getPrimitiveLayer(data.id);
    // 存在图层数据直接显示图层, 并返回
    if (layerData) {
      const layer = viewer.scene.primitives._primitives.find(
        (item) => item.layerId === layerData.layerId
      );
      layer.show = true;
      layerData.show = true;
      return;
    }
    const tileset = await Cesium.Cesium3DTileset.fromUrl(data.url);
    // 添加图层标识
    tileset.layerId = GenerateId(18);
    viewer.scene.primitives.add(tileset);
    // 向全局状态输入图层数据
    layerStore.addPrimitiveLayer({
      ...data,
      show: true,
      layerId: tileset.layerId,
    });
    viewer.flyTo(tileset);
  };
  /**
   * @description: 移除3dtiles图层
   * @param {*} data
   * @return {*}
   */
  const remove3dtilesLayer = (data) => {
    const layerData = layerStore.getPrimitiveLayer(data.id);
    if (layerData) {
      const layer = viewer.scene.primitives._primitives.find(
        (item) => item.layerId === layerData.layerId
      );
      layer.show = false;
      layerData.show = false;
    }
  };

3.2 统一对外暴露入口

继续在3.1编写的hooks函数内添加子方法及变量。

将不同类型的方法按照加载和卸载分为两类，以图层类别和方法作为 键值对 存储起来。
编写统一加载、卸载入口，通过图层类别去选择指定方法对图层进行加载和卸载操作。

  /**
   * @description: 添加图层方法map，用于存储不同图层加载方法
   * @return {*}
   */
  const addLayerFunctions = {
    "wmts": addWmtsLayer,
    "3dtiles": add3dtilesLayer,
    // 其他类型对应的类别和方法
    // ...
  };
  /**
   * @description: 移除图层方法map，用于存储不同图层卸载方法
   * @return {*}
   */
  const removeLayerFunctions = {
    "wmts": removeWmtsLayer,
    "3dtiles": remove3dtilesLayer,
    // 其他类型对应的类别和方法
    // ...
  };

  /**
   * @description: 添加图层入口函数，根据图层类型，分配对应加载函数
   * @param {*} data
   * @return {*}
   */
  const addLayer = (data) => {
    return addLayerFunctions[data.type](data);
  };
  /**
   * @description: 移除图层入口函数，根据图层类型，分配对应卸载函数
   * @param {*} data
   * @return {*}
   */
  const removeLayer = (data) => {
    return removeLayerFunctions[data.type](data);
  };

3.3 提供图层类别的可拓展性

继续在3.1编写的hooks函数内添加子方法及变量。

提供查询和注入两个方法

  • 通过查询方法获取已经支持的图层类别。
  • 通过注入方法，可以自定义类别和加载、卸载方法，将自定义内容按照统一格式注入 addLayerFunctions 和 removeLayerFunctions

这样做的好处是保证了hooks函数的封闭性同时可拓展，遵循了封装函数的开闭原则。

  /**
   * @description: 获取已有的图层加载类型
   * @return {*}
   */
  const getAvialableLayerTypes = () => {
    return Object.keys(addLayerFunctions);
  };
  /**
   * @description: 手动添加特殊图层加载、卸载方法以及图层类别
   * @param {*} type
   * @param {*} addFunc
   * @param {*} removeFunc
   * @return {*}
   */
  const addLayerType = (type, addFunc, removeFunc) => {
    if (addLayerFunctions[type]) {
      console.warn("图层方法已存在: " + type);
      return;
    }
    addLayerFunctions[type] = addFunc;
    removeLayerFunctions[type] = removeFunc;
  };

3.1 完整代码

import { useLayerStore } from "@/stores/layer.js";
import { GenerateId } from "@/utils/cesium/common.js";
export const useLayerManager = () => {
  const layerStore = useLayerStore();
  /**
   * @description: 添加wmts图层
   * @param {*} data
   * @return {*}
   */
  const addWmtsLayer = (data) => {
    // 先查询是否已经加载图层
    const layerData = layerStore.getImageryLayer(data.id);
    // 存在图层数据直接显示图层, 并返回
    if (layerData) {
      const layer = viewer.imageryLayers._layers.find(
        (item) => item.layerId === layerData.layerId
      );
      layer.show = true;
      layerData.show = true;
      return;
    }
    // 不存在图层数据则重新加载图层
    const imageMap = new Cesium.WebMapTileServiceImageryProvider({
      url: data.url
    });
    // 添加图层
    const layer = viewer.imageryLayers.addImageryProvider(imageMap);
    layer.layerId = GenerateId(18);
    // 向全局状态输入图层数据
    layerStore.addImageryLayer({ ...data, show: true, layerId: layer.layerId });
  };
  /**
   * @description: 移除wmts图层
   * @param {*} data
   * @return {*}
   */
  const removeWmtsLayer = (data) => {
    const layerData = layerStore.getImageryLayer(data.id);
    if (layerData) {
      //  获取图层数据并设置显示为false
      const layer = viewer.imageryLayers._layers.find(
        (item) => item.layerId === layerData.layerId
      );
      layer.show = false;
      layerData.show = false;
    }
  };
  /**
   * @description: 添加3dtiles图层
   * @param {*} data
   * @return {*}
   */
  const add3dtilesLayer = async (data) => {
    // 先查询是否已经加载图层
    const layerData = layerStore.getPrimitiveLayer(data.id);
    // 存在图层数据直接显示图层, 并返回
    if (layerData) {
      //  获取图层数据并设置显示为false
      const layer = viewer.scene.primitives._primitives.find(
        (item) => item.layerId === layerData.layerId
      );
      layer.show = true;
      layerData.show = true;
      return;
    }
    const tileset = await Cesium.Cesium3DTileset.fromUrl(data.url);
    // 添加标识
    tileset.layerId = GenerateId(18);
    viewer.scene.primitives.add(tileset);
    // 向全局状态输入图层数据
    layerStore.addPrimitiveLayer({
      ...data,
      show: true,
      layerId: tileset.layerId,
    });
    viewer.flyTo(tileset);
  };
  /**
   * @description: 移除3dtiles图层
   * @param {*} data
   * @return {*}
   */
  const remove3dtilesLayer = (data) => {
    const layerData = layerStore.getPrimitiveLayer(data.id);
    if (layerData) {
      const layer = viewer.scene.primitives._primitives.find(
        (item) => item.layerId === layerData.layerId
      );
      layer.show = false;
      layerData.show = false;
    }
  };
  /**
   * @description: 添加图层方法map，用于存储不同图层加载方法
   * @return {*}
   */
  const addLayerFunctions = {
    "wmts": addWmtsLayer,
    "3dtiles": add3dtilesLayer,
  };
  /**
   * @description: 移除图层方法map，用于存储不同图层卸载方法
   * @return {*}
   */
  const removeLayerFunctions = {
    "wmts": removeWmtsLayer,
    "3dtiles": remove3dtilesLayer,
  };

  /**
   * @description: 添加图层入口函数，根据图层类型，分配对应加载函数
   * @param {*} data
   * @return {*}
   */
  const addLayer = (data) => {
    return addLayerFunctions[data.type](data);
  };
  /**
   * @description: 移除图层入口函数，根据图层类型，分配对应卸载函数
   * @param {*} data
   * @return {*}
   */
  const removeLayer = (data) => {
    return removeLayerFunctions[data.type](data);
  };
  /**
   * @description: 获取已有的图层加载类型
   * @return {*}
   */
  const getAvialableLayerTypes = () => {
    return Object.keys(addLayerFunctions);
  };
  /**
   * @description: 手动添加特殊图层加载、卸载方法以及图层类别
   * @param {*} type
   * @param {*} addFunc
   * @param {*} removeFunc
   * @return {*}
   */
  const addLayerType = (type, addFunc, removeFunc) => {
    if (addLayerFunctions[type]) {
      console.warn("图层方法已存在: " + type);
      return;
    }
    addLayerFunctions[type] = addFunc;
    removeLayerFunctions[type] = removeFunc;
  };

  return {
    addLayer,
    removeLayer,
    getAvialableLayerTypes,
    addLayerType,
  };
};

4. hooks函数使用方法

<template>
  <div id="mapContainer">
    <div class="layermanager">
      <div>图层管理</div>
      <el-tree
        :data="dataSource"
        show-checkbox
        node-key="id"
        default-expand-all
        check-on-click-node
        @check-change="checkChange"
        :expand-on-click-node="false"
      >
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { initCesiumMap } from "@/utils/cesium/index.js";
import { useLayerManager } from "@/hooks/useLayerManager.js";
const dataSource = ref([
  {
    id: "1",
    label: "二维地图",
    children: [
      {
        id: "1-1",
        label: "天地图影像",
        type: "wmts",
        url: "https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的key",
      },
      {
        id: "1-2",
        label: "天地图矢量",
        type: "wmts",
        url: "https://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的key",
      },
      {
        id: "1-3",
        label: "天地图矢量注记",
        type: "wmts",
        url: "https://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的key",
      },
    ],
  },
  {
    id: "2",
    label: "三维地图",
    children: [
      {
        id: "2-1",
        label: "测试3dtiles模型",
        type: "3dtiles",
        url: "/3dtiles/test/tileset.json",
      },
    ],
  },
]);

const { addLayer, removeLayer} = useLayerManager();
onMounted(() => {
  initCesiumMap();
});
const checkChange = (data, isCheck) => {
  // 判断是否为叶子节点
  if (data?.children && data?.children?.length > 0) {
    console.log("非子叶节点");
    return;
  } else {
    if (isCheck) {
      addLayer(data);
    } else {
      removeLayer(data);
    }
  }
};
</script>

三、总结

至此图层管理的基础实现脉络已经梳理完毕，但是这些还远远不够，我们仍需关心以下几个问题：

  • 二维图层的互相遮挡问题，需要拓展图层调换顺序功能。
  • 图层叠加使用场景，需要拓展图层透明度调整功能。
  • 当前场景下图层保存功能，用于场景切换时，关闭及初始化图层树。
  • 拓展其他重要图层类型的加载卸载方式。
  • 其他。

所以说一个完整的模块是亿点点优化而来的。由于篇幅问题，遗留的几个问题我将会在之后的文章中逐步闭环。

再接再厉~

qbbmnnnnnn
关注
专栏目录
cesium之三维场景展示篇.zip
06-19
cesium之三维场景展示篇.zip
迈向三维：vue3+Cesium.js三维WebGIS项目实战
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
02-21 4629
WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧。
【WebGis开发 - Cesium】三维可视化项目教程---视点管理
最新发布
qbbmnnnnnn的博客
10-06 1005
本篇主要介绍了如何利用 viewer.camera 和 flyTo 完成了视点管理模块必备功能的hooks函数封装。完整的视点管理还需结合后台数据存储，业务数据绑定等等复杂逻辑，这就需要你自行判断如何将本篇的hooks函数应用到业务中去。 视点管理或是视角控制，是三维可视化项目中的重点功能。这个功能优化好了，可以让项目操作起来更加丝滑令人舒适。有一些可以探索优化的点： 飞行路径的修正，目前是由cesium框架默认计算的飞行路径，没有进行人为干预，可以尝试 maximumHeight 、pitchAdju
WebGL可视化地球和地图引擎：Cesium.js
热门推荐
多多
06-28 1万+
Cesium 是一个JavaScript 库用于在Web浏览器创建 3D 地球和 2D 地图，无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化；跨平台；跨浏览器；实现真正的动态数据进行可视化。Cesium 基于 Apache 开源协议，支持商业和非商业免费使用。 Cesium 主要特性： 动态地理空间可视化 非常高的性能和精准度 一个 API，三种
[cesium ] 三维可视化
啊嘞嘞的博客
09-05 9778
三维可视化 基于cesium的可视化系统，对部分三维功能封装。 可视化界面 主要功能：量测，雷达监控，卫星监控，标绘，显示控制，图层控制，三维效果等 三维功能界面 部分功能暂时没加上 ，应用启动需要根据提示下载data目录 ~已上传github，需要项目源码私信 ...
cesium 之图层管理器篇（附源码下载）
qq_35382207的博客
09-15 637
前言 cesium 官网的api文档介绍地址cesium官网api，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子：cesium 官网在线例子，这个也是学习 cesium 的好素材。 内容概览 1.基于cesium 实现图层管理器效果2.源代码 demo 下载 本篇实现 cesium 图层管理器功能，效果图如下： 图层配置文件信息 /*地图图层菜单目录构造*/ /* *name-图层名称 *layerurl-图层服务配置 *type代表地图服务类型: 0代表Arc...
基于Cesium的三维GIS实现
04-22
基于Cesium的三维GIS实现，详细解析了Cesium实现三维GIS的数据格式、标准、框架等，对希望从事Cesium研发的人员，极具参考价值，具备实操性，深入浅出。
Cesium三维模型
【cacrle】的博客
01-26 2342
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。Cesium作为三维GIS框架，其最大的优势就是支持各种格式的三维模型数据，包括倾斜摄影三维模型、BIM三维模型、glb三维模型等，并且用户可以使用关键帧动画等动态地模拟三维场景。本文将介绍Cesium中常用的三维模型操作并举例说明。
cesium图层管理
qq_46166163的博客
03-09 3474
cesium图层管理
cesium图层管理器_cesium 之图层管理器篇（附源码下载）
weixin_36342356的博客
12-29 894
前言cesium 官网的api文档介绍地址cesium官网api，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子：cesium 官网在线例子，这个也是学习 cesium 的好素材。内容概览1.基于cesium 实现图层管理器效果2.源代码 demo 下载本篇实现 cesium 图层管理器功能，效果图如下：图层配置文件信息/*地图图层菜单目录构造*/ /* *name-图层名称 ...
CesiumAPI二次封装包
12-26
CesiumAPI二次封装包是一个专为提升Cesium三维可视化库使用效率而设计的工具集。Cesium是一款强大的开源JavaScript库，用于在Web浏览器中构建高度交互的、全球范围的3D地球模型。它广泛应用于地理信息系统（GIS）、...
基于Cesium的“天地图·甘肃”三维地图建设技术研究.pdf
08-01
WebGIS是地理信息系统在互联网上的应用，而3D-WebGIS特指在Web环境中提供三维可视化和分析的地理信息系统。Cesium实现了在Web平台上的三维空间数据可视化和处理，是3D-WebGIS实现的关键技术之一。 7. Cesium地形...
【Cesium01】--环境搭建
成膜的博客
04-28 3677
一、Cesium简介    Cesiumjs 是国外一个基于JavaScript编写的使用WebGL的地图引擎，用来渲染3D地球，2D区域地图，和多种GIS要素。可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile，并且不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速，非常适合动态数据在GIS图层上的展示，是一个跨平台，开源，非...
CesiumAPI二次封装：实现三维场景与动态交互功能
资源摘要信息:"Cesium API二次封装包是一个专门针对Cesium三维可视化库的封装工具包。Cesium是目前全球领先的三维地球和地图平台，广泛应用于地理信息系统（GIS）、虚拟现实、游戏开发和科学可视化等多个领域。二次...
基于 React hooks + Typescript + Cesium 实现无球模式及设置背景图
jiegiser博客
02-26 514
文章目录效果截图功能介绍实现思路实现步骤 效果截图 先上截图： 功能介绍 基于 React hooks + Typescript + Cesium 实现背景清空及设置背景图；可以通过设置地球所在的背景图，美化显示效果；以及通过设置背景清空，达到无球模式。 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geoserver 结合实现属性查询（√） geoserver 结合实现空间查询（√） 地下模式（√） 单体化 / 倾斜模型分户单体化
手把手带你开发Cesium三维场景【3D智慧城市警情预警】
爱蹦跶的全栈大A阿
12-28 5699
Cesium是一个功能强大的三维地图引擎,使用它可以快速实现各种三维可视化应用。使用面向对象方式进行代码封装,可以很好地模块化复杂的三维场景。利用Cesium提供的各种对象和效果实现丰富的场景和动画。状态管理可以确保场景动画的顺序展现。Cesium中提供了许多辅助类和工具,可以大幅简化三维开发。
【CesiumJS入门】（2）ImageryLayer之图层加载与管理
ReBeX
06-04 5905
在cesiumJS中加载影像图层，imageryLayers,
GIS开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts、TMS和XYZ介绍
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-10 1万+
OpenLayer、Leaflet、Maplibre-gl和Cesiumjs（3d）OpenLayer 对各种地图服务支持较好，比如各种vms,vmts等，动态效果较差。Leaflet 对vue支持较好，与前端交互方便，对地图服务支持不好Maplibre-gl:继承自Mapbox-2d的开源分支，Mapbox商业化后Maplibre-gl项目从Mapbox-2d的开源分支开始继续维护更新，号称地图服务中动态效果最好的库，插件较多，个人感觉像是地图引擎里的游戏引擎，各种动态效果极好。
【WebGis开发 - Cesium】三维可视化项目教程---初始化场景
qbbmnnnnnn的博客
10-05 1976
任何一个三维可视化项目的核心点无非以下几点： 二维图层、三维模型的加载显示或隐藏的管理（图层树） 相机视角管理（视点保存、路径漫游） POI点的展示与点选查询 简易图形绘制及保存 利用数学计算及图形绘制表达一些gis分析结果（高阶功能） shader应用材质（更随心所欲的高阶技巧） 基于Cesium进行三维可视化项目开发
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qbbmnnnnnn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值