vue3-浅记录一下vue-cesium的使用-加载建筑物 加载河流 道路闪烁线

最新推荐文章于 2024-08-01 18:11:48 发布
最新推荐文章于 2024-08-01 18:11:48 发布
阅读量979 收藏
点赞数 1
分类专栏： cesium 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/M__O__M/article/details/131944400
版权
该文章介绍了如何使用Vue-Cesium库在Vue3项目中集成CesiumJS，进行3D地图的构建。主要步骤包括安装vue-cesium库，配置main.ts文件，加载数据文件，以及展示建筑物和河流。此外，还涉及到了地图的交互设置，如调整视角、添加图层、自定义建筑物颜色和水面效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、vue-cesium官网地址：A Vue 3 based component library of CesiumJS for developers | Vue for Cesium

二、安装

 npm install vue-cesium --save

三、main.ts中引入使用

import VueCesium from 'vue-cesium'

app.use(VueCesium, {
  cesiumPath: "/Cesium/Cesium.js",
});

四、准备好数据文件

五、编写代码

1、加载建筑物

    <vc-viewer ref="viewerRef" @ready="onViewerReady">
      <!-- 加载建筑物 -->
      <vc-primitive-tileset
        ref="primitive"
       :url="'wuhuBuildingsTest6/test6/tileset.json'"
        @ready="tilesetOnReady($event, 'building')"
      >
      </vc-primitive-tileset>
    </vc-viewer>

const onViewerReady = async ({
  Cesium,
  viewer,
  cesiumObject: _cesiumObject,
}: VcReadyObject) => {
  emmiter.emit("map3dReady");
  viewer.scene.globe.translucency.enabled = true; // 允许地表透明
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(118.381467, 31.320145, 500.0), // 设置位置
    orientation: {
      heading: Cesium.Math.toRadians(-5),
      pitch: Cesium.Math.toRadians(-22),
      roll: 0,
    },
  });

  addLayer(viewer); //暗色地图
  initRiver(Cesium); //河流

  viewer.dataSources.add(await createRoadLine(roads)); //道路

  // 开启抗锯齿
  // @ts-ignore
  if (Cesium.FeatureDetection?.supportsImageRenderingPixelated()) {
    viewer.resolutionScale = window.devicePixelRatio;
  }
  viewer.scene.postProcessStages.fxaa.enabled = true;

  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 150; //相机的高度的最小值
};

const addLayer = async (viewer: Cesium.Viewer) => {
  const MapLayers = [
    {
      name: "高德暗色底图",
      iconUrl: "http://mars3d.cn/img/basemaps/blackMarble.png",
      url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      maximumLevel: 18,
      minimumLevel: 4,
    },
  ];
  const imageryViewModels = MapLayers.map(
    ({ name, iconUrl, maximumLevel, minimumLevel = 4, url }) => {
      return new Cesium.ProviderViewModel({
        name,
        iconUrl,
        creationFunction: function () {
          const layer = new Cesium.UrlTemplateImageryProvider({
            url,
            maximumLevel,
            minimumLevel,
          });

          return layer;
        },
        tooltip: "",
      });
    }
  );
  const baseLayerPickerContainer = document.querySelector(
    ".cesium-viewer-toolbar"
  )!;
  const baseLayerPicker = new Cesium.BaseLayerPicker(baseLayerPickerContainer, {
    globe: viewer.scene.globe,
    imageryProviderViewModels: imageryViewModels,
  });
  // 设置默认底图
  baseLayerPicker.viewModel.selectedImagery = imageryViewModels[0];
  const baseLayer = viewer.imageryLayers.get(0);
  modifyMap(
    baseLayer,
    {
      filterRGB: [78, 112, 166],
      invertColor: true,
    },
    // @ts-ignore
    viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources
  );
};

//建筑物颜色
const tilesetOnReady = (
  { Cesium, viewer, cesiumObject: _cesiumObject }: VcReadyObject,
  type: string
) => {
  const cesiumObject = _cesiumObject as Cesium.Cesium3DTileset;
  switch (type) {
    case "building":
      viewer.infoBox.destroy();
      buildingColor(cesiumObject, "building");
      break;
    default:
      return;
  }
};

const buildingColor = function (
  cesiumObject: Cesium.Cesium3DTileset,
  type: string
) {
  if (Array.isArray(cesiumObject) || !cesiumObject) return;
  // @ts-ignore
  cesiumObject.enableModelExperimental = true;
  let temp;
  switch (type) {
    case "building":
      temp = buildingShader;
      break;
    default:
      return;
  }

  cesiumObject.customShader = new Cesium.CustomShader({
    lightingModel: Cesium.LightingModel.UNLIT,
    varyings: {
      v_normalMC: Cesium.VaryingType.VEC3,
    },
    vertexShaderText: `
      void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
        v_normalMC = vsInput.attributes.normalMC;
      }
    `,

    fragmentShaderText: temp,
  });
};

2、加载河流

      <template v-for="item in riverArray">
        <vc-primitive :appearance="riverAppearance">
          <vc-geometry-instance :id="item.properties">
            <vc-geometry-polygon
              :polygonHierarchy="item.coordinate"
              :vertexFormat="riverVertexFormat"
              :height="10"
            ></vc-geometry-polygon>
          </vc-geometry-instance>
        </vc-primitive>
      </template>

const viewerRef: any = ref<HTMLElement | null>(null);

onMounted(() => {
  viewerRef.value.creatingPromise.then((readyObj: VcReadyObject) => {});
});

//河流
const riverArray = geoJsonToCoordinate(rivers);
const riverAppearance = shallowRef();
const riverVertexFormat = shallowRef();
const initRiver = (Cesium: VcReadyObject["Cesium"]) => {
  riverAppearance.value = new Cesium.EllipsoidSurfaceAppearance({
    material: new Cesium.Material({
      fabric: {
        type: "Water",
        uniforms: {
          normalMap: Cesium.buildModuleUrl("Assets/Textures/waterNormals.jpg"),
          frequency: 1000.0,
          animationSpeed: 0.05,
          amplitude: 10.0,
          // 水体颜色
          baseWaterColor: Cesium.Color.DODGERBLUE,
        },
      },
    }),
  });
  riverVertexFormat.value = Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT;
};

完整代码

<template>
  <div class="map_content">
    <vc-viewer ref="viewerRef" @ready="onViewerReady">
      <vc-primitive-tileset
        ref="primitive"
        :url="'wuhuBuildingsTest6/test6/tileset.json'"
        @ready="tilesetOnReady($event, 'building')"
      >
      </vc-primitive-tileset>
      <!-- 循环创建河流 -->
      <template v-for="item in riverArray">
        <vc-primitive :appearance="riverAppearance">
          <vc-geometry-instance :id="item.properties">
            <vc-geometry-polygon
              :polygonHierarchy="item.coordinate"
              :vertexFormat="riverVertexFormat"
              :height="10"
            ></vc-geometry-polygon>
          </vc-geometry-instance>
        </vc-primitive>
      </template>
    </vc-viewer>
  </div>
</template>
<script lang="ts" setup>
import {
  VcViewer,
  VcPrimitiveTileset,
  VcPrimitive,
  VcGeometryPolygon,
  VcGeometryInstance,
  VcOverlayHtml,
} from "vue-cesium";
import type { VcReadyObject } from "vue-cesium/es/utils/types";
import rivers from "@/assets/data/rivers.json";
import roads from "@/assets/data/road.json";
import { ModelUrl } from "@/service/index";
import buildingShader from "@/shaders/building.js";
import { geoJsonToCoordinate } from "@/utils";
import { modifyMap } from "@/utils/filterColor";
import { createRoadLine } from "@/utils/map3d";
import emmiter from "@/mitt";

const viewerRef: any = ref<HTMLElement | null>(null);

onMounted(() => {
  viewerRef.value.creatingPromise.then((readyObj: VcReadyObject) => {});
});

//河流
const riverArray = geoJsonToCoordinate(rivers);
const riverAppearance = shallowRef();
const riverVertexFormat = shallowRef();
const initRiver = (Cesium: VcReadyObject["Cesium"]) => {
  riverAppearance.value = new Cesium.EllipsoidSurfaceAppearance({
    material: new Cesium.Material({
      fabric: {
        type: "Water",
        uniforms: {
          normalMap: Cesium.buildModuleUrl("Assets/Textures/waterNormals.jpg"),
          frequency: 1000.0,
          animationSpeed: 0.05,
          amplitude: 10.0,
          // 水体颜色
          baseWaterColor: Cesium.Color.DODGERBLUE,
        },
      },
    }),
  });
  riverVertexFormat.value = Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT;
};
const onViewerReady = async ({
  Cesium,
  viewer,
  cesiumObject: _cesiumObject,
}: VcReadyObject) => {
  emmiter.emit("map3dReady");
  viewer.scene.globe.translucency.enabled = true; // 允许地表透明
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(118.381467, 31.320145, 500.0), // 设置位置
    orientation: {
      heading: Cesium.Math.toRadians(-5),
      pitch: Cesium.Math.toRadians(-22),
      roll: 0,
    },
  });

  addLayer(viewer); //暗色地图
  initRiver(Cesium); //河流

  viewer.dataSources.add(await createRoadLine(roads)); //道路

  // 开启抗锯齿
  // @ts-ignore
  if (Cesium.FeatureDetection?.supportsImageRenderingPixelated()) {
    viewer.resolutionScale = window.devicePixelRatio;
  }
  viewer.scene.postProcessStages.fxaa.enabled = true;

  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 150; //相机的高度的最小值
};

const addLayer = async (viewer: Cesium.Viewer) => {
  const MapLayers = [
    {
      name: "高德暗色底图",
      iconUrl: "http://mars3d.cn/img/basemaps/blackMarble.png",
      url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      maximumLevel: 18,
      minimumLevel: 4,
    },
  ];
  const imageryViewModels = MapLayers.map(
    ({ name, iconUrl, maximumLevel, minimumLevel = 4, url }) => {
      return new Cesium.ProviderViewModel({
        name,
        iconUrl,
        creationFunction: function () {
          const layer = new Cesium.UrlTemplateImageryProvider({
            url,
            maximumLevel,
            minimumLevel,
          });

          return layer;
        },
        tooltip: "",
      });
    }
  );
  const baseLayerPickerContainer = document.querySelector(
    ".cesium-viewer-toolbar"
  )!;
  const baseLayerPicker = new Cesium.BaseLayerPicker(baseLayerPickerContainer, {
    globe: viewer.scene.globe,
    imageryProviderViewModels: imageryViewModels,
  });
  // 设置默认底图
  baseLayerPicker.viewModel.selectedImagery = imageryViewModels[0];
  const baseLayer = viewer.imageryLayers.get(0);
  modifyMap(
    baseLayer,
    {
      filterRGB: [78, 112, 166],
      invertColor: true,
    },
    // @ts-ignore
    viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources
  );
};

//建筑物颜色
const tilesetOnReady = (
  { Cesium, viewer, cesiumObject: _cesiumObject }: VcReadyObject,
  type: string
) => {
  const cesiumObject = _cesiumObject as Cesium.Cesium3DTileset;
  switch (type) {
    case "building":
      viewer.infoBox.destroy();
      buildingColor(cesiumObject, "building");
      break;
    default:
      return;
  }
};

const buildingColor = function (
  cesiumObject: Cesium.Cesium3DTileset,
  type: string
) {
  if (Array.isArray(cesiumObject) || !cesiumObject) return;
  // @ts-ignore
  cesiumObject.enableModelExperimental = true;
  let temp;
  switch (type) {
    case "building":
      temp = buildingShader;
      break;
    default:
      return;
  }

  cesiumObject.customShader = new Cesium.CustomShader({
    lightingModel: Cesium.LightingModel.UNLIT,
    varyings: {
      v_normalMC: Cesium.VaryingType.VEC3,
    },
    vertexShaderText: `
      void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
        v_normalMC = vsInput.attributes.normalMC;
      }
    `,

    fragmentShaderText: temp,
  });
};
</script>

效果图：

 

Cesium高级开发教程之四十三：缓冲区分析#线
Cesium开发工程师
02-27 221
【代码】Cesium高级开发教程之四十三：缓冲区分析#线。
使用Cesium创建动态河流流水地理信息系统（GIS）
NknkCode的博客
09-23 459
在本文中，我们探讨了如何使用Cesium创建一个动态河流流水GIS应用程序。我们使用GeoJSON格式表示河流的几何信息，并使用JSON文件存储动态的水位数据。通过加载数据并使用Cesium的相关功能，我们能够呈现出动态的河流流水效果。这个应用程序可以用于可视化和分析河流水位的变化，为水资源管理和洪水预警等领域提供有价值的信息。
cesium 实现流动效果(河流具有流向的流动效果)
m0_67531029的博客
04-07 4228
一、创建PolylineTrailLinkMaterialProperty.js文件。效果：粒子流动、河流流动、河面具有流向的流动。图片资源：三个随意取用其一。a、在原生html里面使用。b、在vue3中使用。
cesium 加载3D建筑模型（3D tiles）
weixin_40451732的博客
05-31 5816
上面的模型都是cesium自带的，如果是自己的模型，怎么加载呢？有两种方式：通过方式[官网地址](上传到cesiumion自己的资源中，会生成一个id，然后用前面的方法学习视频参考文章。
在vite创建的vue3项目中使用Cesium加载纽约建筑模型、设置样式，划分城市区域并着色
BreezeChasingDrizzle
07-11 809
在vite创建的vue3项目中使用Cesium加载纽约建筑模型、设置样式，划分城市区域并着色
Cesium地图中加载的建筑模型3D model 模型 gltf格式建筑模型
04-24
从谷歌地球下载的深圳市福田区的几个建筑模型， 自行转换为gltf格式了。 直接在cesium代码中就能加载调用。。。一共6个模型， 深圳图书馆， 深圳市民中心 深圳音乐厅 深圳证券交易所 。。。
63.（cesium篇）cesium河流流水.zip
12-03
【标题】"63.（cesium篇）cesium河流流水.zip" 提示我们这个压缩包文件的内容主要围绕Cesium库在实现河流流动效果方面的应用。Cesium是一个强大的开源JavaScript库，专门用于创建高保真的3D地球浏览器，广泛应用于...
DEJA_VU3D - Cesium功能集 之 067-洪水淹没效果
总得学点什么的博客
08-27 2629
本篇主要基于Cesium+vue实现洪水淹没分析效果，包括完整源代码奉上
【Cesium开发实战】水流模拟功能的实现，自定义区域加载水流效果
最新发布
莫言情怼的博客
08-01 1204
Cesium实现水流模拟。
63.（cesium之家）cesium河流流水
GIS之家家长
05-10 677
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
cesium河流流水（cesium篇.63）
地图之家
12-03 3417
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
基于Cesium+VUE实现的流光道路效果，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-13
基于Cesium+VUE实现的流光道路效果，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/124069220 代码不易，略收小费，使用过程中如果有任何问题欢迎在文章下进行评论，百分百回复哦
Cesium 单独加载3D模型
07-17
基于ceisum加载单独三维模型（不含地球），含动画，720度视角查看.目前Cesium框架只支持gltf格式3D模型
SuperMap iClient3D for Cesium绘制河流（二）
SuperMap技术控
01-03 3189
之前分享过一篇《SuperMap iClient3D for WebGL绘制河流》的文章，当时的思路是以 entity 中的 polyline 作为载体，给它添加流动材质来表达出河流效果，但是由于 polyline 对象是像素宽度，线宽始终是相对屏幕的固定大小，导致在场景放大缩小过程中，河流宽度与周围的山脉位置和大小不匹配，这个问题困扰了小编好久。最近想到了一个新的方案，并且能够支持实时更改河流宽度和高度，一起来看下如何实现吧~
Cesium动态河流流水GIS：实现河流流水效果的地理信息系统
LaotLisp的博客
09-26 965
在本文中，我们将介绍如何使用Cesium创建一个动态河流流水的地理信息系统（GIS）。通过使用Cesium的强大功能和库，我们可以模拟出河流的流水效果，并将其集成到GIS应用程序中。接下来，我们将使用Cesium的Entity API来创建表示河流的实体对象。接下来，我们将使用Cesium的Entity API来创建表示河流的实体对象。借助Cesium强大的功能和库，我们能够模拟出河流的流水效果，并将其集成到GIS应用程序中。我们可以使用Cesium的时钟对象来控制实体的位置和外观随时间变化。
Cesium手动绘制河流，并添加添加演进
北京-giser的博客
07-09 411
Cesium手动绘制河流，并添加添加演进
102.（cesium篇）cesium道路流光线
地图之家
07-18 1193
102.（cesium篇）cesium道路流光线
cesium实现道路闪烁线效果
专注GIS开发
04-12 8245
cesium实现道路闪烁线效果
cesium 地形加载
qq_37550440的博客
05-29 1591
cesium 地形加载 及加载完成的回调
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值