vue3+cesium测量功能(距离 面积 点位 高度差)

于 2025-03-24 17:23:00 发布
阅读量252 收藏
点赞数 2
分类专栏： cesium 文章标签： vue.js javascript 前端 webgl arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42074266/article/details/146481405
版权

直接放到vue项目即可运行
 

<template>
  <div class="measure-demo">
    <div class="cesium-container" ref="viewerContainer" id="cesiumContainer"></div>
    <div class="control-panel">
      <h2>测量工具</h2>
      <div class="button-group">
        <button 
          :class="{ active: activeTool === 'distance' }"
          @click="toggleTool('distance')"
        >
          距离测量
        </button>
        <button 
          :class="{ active: activeTool === 'area' }"
          @click="toggleTool('area')"
        >
          面积测量
        </button>
        <button 
          :class="{ active: activeTool === 'height' }"
          @click="toggleTool('height')"
        >
          高度测量
        </button>
        <button 
          :class="{ active: activeTool === 'point' }"
          @click="toggleTool('point')"
        >
          点位测量
        </button>
        <button @click="clearMeasurements">清除测量</button>
        <button @click="resetView">重置视角</button>
      </div>
      <div class="instruction-panel">
        <h3>使用说明</h3>
        <div v-if="activeTool === 'distance'">
          <p>距离测量：</p>
          <ol>
            <li>点击地图上的起点</li>
            <li>继续点击添加途经点</li>
            <li>双击结束测量</li>
          </ol>
        </div>
        <div v-else-if="activeTool === 'area'">
          <p>面积测量：</p>
          <ol>
            <li>点击地图绘制多边形顶点</li>
            <li>双击闭合多边形完成测量</li>
          </ol>
        </div>
        <div v-else-if="activeTool === 'height'">
          <p>高度测量：</p>
          <ol>
            <li>点击选择起点</li>
            <li>点击选择终点</li>
            <li>显示两点间的高度差</li>
          </ol>
        </div>
        <div v-else-if="activeTool === 'point'">
          <p>点位测量：</p>
          <ol>
            <li>点击地图任意位置</li>
            <li>显示该点的经纬度坐标</li>
          </ol>
        </div>
        <div v-else>
          <p>请选择上方的测量工具开始测量</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as Cesium from 'cesium'

const viewerContainer = ref(null)
const viewer = ref(null)
const activeTool = ref('')
const measureEntities = ref([])
let handler = null

// 初始化Cesium viewer
const initViewer = async () => {
  if (!viewerContainer.value) return
  const terrainProvider = await Cesium.createWorldTerrainAsync();
  viewer.value = new Cesium.Viewer(viewerContainer.value, {
    terrainProvider:terrainProvider,
    timeline: false,
    animation: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    fullscreenButton: false
  })

  // 设置默认视角
  viewer.value.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.391, 39.901, 15000.0)
  })

  handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
}

// 显示错误提示
const showErrorMessage = (message) => {
  if (!viewer.value) return
  
  const container = document.createElement('div')
  container.className = 'error-message'
  container.innerHTML = message
  document.body.appendChild(container)
  
  setTimeout(() => {
    document.body.removeChild(container)
  }, 3000)
}

// 切换测量工具
const toggleTool = (tool) => {
  if (activeTool.value === tool) {
    activeTool.value = ''
    removeHandler()
  } else {
    activeTool.value = tool
    setupHandler(tool)
  }
}

// 设置事件处理器
const setupHandler = (tool) => {
  removeHandler()
  if (!viewer.value || !handler) return

  switch (tool) {
    case 'distance':
      setupDistanceMeasurement()
      break
    case 'area':
      setupAreaMeasurement()
      break
    case 'height':
      setupHeightMeasurement()
      break
    case 'point':
      setupPointMeasurement()
      break
  }
}

// 距离测量实现
const setupDistanceMeasurement = () => {
  if (!viewer.value || !handler) return

  const positions = []
  let activeShape = null

  // 获取鼠标点击位置
  const getPosition = (position) => {
    let earthPosition
    // 球面
    if (viewer.value?.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
      earthPosition = viewer.value.scene.camera.pickEllipsoid(position)
    }
    // 地形
    else {
      const ray = viewer.value?.camera.getPickRay(position)
      if (ray) {
        earthPosition = viewer.value?.scene.globe.pick(ray, viewer.value.scene)
      }
    }
    return earthPosition
  }

  // 绘制线条
  const drawLine = (positionData) => {
    const entity = viewer.value?.entities.add({
      polyline: {
        positions: positionData,
        clampToGround: true,
        width: 3,
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.YELLOW,
          dashLength: 16.0
        })
      }
    })
    return entity || null
  }

  handler.setInputAction((event) => {
    const earthPosition = getPosition(event.position)
    if (!earthPosition) return

    if (positions.length === 0) {
      positions.push(earthPosition)
      const dynamicPositions = new Cesium.CallbackProperty(() => {
        return positions
      }, false)
      activeShape = drawLine(dynamicPositions)
    }
    positions.push(earthPosition)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

  handler.setInputAction((event) => {
    if (positions.length >= 2) {
      const earthPosition = getPosition(event.endPosition)    
      if (Cesium.defined(earthPosition)) {
        positions.pop()
        positions.push(earthPosition)
      }
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

  handler.setInputAction(() => {
    if (positions.length < 2) {
      showErrorMessage('请至少绘制两个点')
      return
    }

    const distance = calculateDistance(positions)
    
    // 创建最终的线条
    const finalPolyline = drawLine(positions)
    if (finalPolyline) measureEntities.value.push(finalPolyline)
    
    // 添加距离标签
    const labelEntity = viewer.value?.entities.add({
      position: positions[positions.length - 1],
      billboard: {
        image: createDistanceLabel(distance),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        pixelOffset: new Cesium.Cartesian2(0, -10)
      }
    })
    if (labelEntity) measureEntities.value.push(labelEntity)
    // 移除动态线条
    if (activeShape) {
      viewer.value?.entities.remove(activeShape)
      activeShape = null
    }
    //取消测量和监听
    removeHandler()
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}

// 面积测量实现
const setupAreaMeasurement = () => {
  if (!viewer.value || !handler) return

  const positions = []
  let activeShape = null

  // 获取鼠标点击位置
  const getPosition = (position) => {
    let earthPosition
    // 球面
    if (viewer.value?.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
      earthPosition = viewer.value.scene.camera.pickEllipsoid(position)
    }
    // 地形
    else {
      const ray = viewer.value?.camera.getPickRay(position)
      if (ray) {
        earthPosition = viewer.value?.scene.globe.pick(ray, viewer.value.scene)
      }
    }
    return earthPosition
  }

  // 绘制多边形
  const drawPolygon = (positionData) => {
    const entity = viewer.value?.entities.add({
      polygon: {
        hierarchy: positionData,
        material: Cesium.Color.YELLOW.withAlpha(0.3),
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2
      }
    })
    return entity || null
  }

  handler.setInputAction((event) => {
    const earthPosition = getPosition(event.position)
    if (!earthPosition) return

    if (positions.length === 0) {
      positions.push(earthPosition)
      const dynamicPositions = new Cesium.CallbackProperty(() => {
        return new Cesium.PolygonHierarchy(positions)
      }, false)
      activeShape = drawPolygon(dynamicPositions)
    }
    positions.push(earthPosition)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

  handler.setInputAction((event) => {
    if (positions.length >= 2) {
      const earthPosition = getPosition(event.endPosition)
      if (Cesium.defined(earthPosition)) {
        positions.pop()
        positions.push(earthPosition)
      }
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

  handler.setInputAction(() => {
    if (positions.length < 3) {
      showErrorMessage('请至少绘制三个点')
      return
    }

    positions.pop()
    const area = calculateArea(positions)
    
    // 创建最终的多边形
    const finalPolygon = drawPolygon(positions)
    if (finalPolygon) measureEntities.value.push(finalPolygon)
    
    // 添加面积标签
    const labelEntity = viewer.value?.entities.add({
      position: positions[0],
      billboard: {
        image: createAreaLabel(area),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        pixelOffset: new Cesium.Cartesian2(0, -10)
      }
    })
    if (labelEntity) measureEntities.value.push(labelEntity)
     // 移除动态多边形
     if (activeShape) {   
          viewer.value?.entities.remove(activeShape)
          activeShape = null
        }
    //取消测量和监听
    removeHandler()
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}

// 高度测量实现
const setupHeightMeasurement = () => {
  if (!viewer.value || !handler) return

  const positions = []
  let activeShape = null

  // 获取鼠标点击位置
  const getPosition = (position) => {
    let earthPosition
    // 球面
    if (viewer.value?.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
      earthPosition = viewer.value.scene.camera.pickEllipsoid(position)
    }
    // 地形
    else {
      const ray = viewer.value?.camera.getPickRay(position)
      if (ray) {
        earthPosition = viewer.value?.scene.globe.pick(ray, viewer.value.scene)
      }
    }
    return earthPosition
  }

  // 绘制线条
  const drawLine = (positionData) => {
    const entity = viewer.value?.entities.add({
      polyline: {
        positions: positionData,
        clampToGround: false,
        width: 3,
        material: Cesium.Color.YELLOW
      }
    })
    return entity || null
  }

  handler.setInputAction((event) => {
    const earthPosition = getPosition(event.position)
    if (!earthPosition) return

    if (positions.length === 0) {
      positions.push(earthPosition)
      const dynamicPositions = new Cesium.CallbackProperty(() => {
        return positions
      }, false)
      activeShape = drawLine(dynamicPositions)
    } else if (positions.length === 1) {
      positions.push(earthPosition)
      const height = calculateHeight(positions[0], positions[1])
      
      // 创建最终的线条
      const finalPolyline = drawLine(positions)
      if (finalPolyline) measureEntities.value.push(finalPolyline)
      
      // 添加高度标签
      const labelEntity = viewer.value?.entities.add({
        position: positions[positions.length - 1],
        billboard: {
          image: createHeightLabel(height),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          pixelOffset: new Cesium.Cartesian2(0, -10)
        }
      })
      if (labelEntity) measureEntities.value.push(labelEntity)
      
      // 移除动态线条
      if (activeShape) {
        viewer.value?.entities.remove(activeShape)
        activeShape = null
      }
      //取消测量和监听
      removeHandler()
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

  handler.setInputAction((event) => {
    if (positions.length >= 2) {
      const earthPosition = getPosition(event.endPosition)    
      if (Cesium.defined(earthPosition)) {
        positions.pop()
        positions.push(earthPosition)
      }
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
}

// 点位测量实现
const setupPointMeasurement = () => {
  if (!viewer.value || !handler) return

  handler.setInputAction((event) => {
    const earthPosition = viewer.value?.scene.pickPosition(event.position)
    if (!earthPosition) return

    const cartographic = Cesium.Cartographic.fromCartesian(earthPosition)
    const longitude = Cesium.Math.toDegrees(cartographic.longitude)
    const latitude = Cesium.Math.toDegrees(cartographic.latitude)
    const height = cartographic.height

    const point = viewer.value?.entities.add({
      position: earthPosition,
      point: {
        pixelSize: 5,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2
      },
      label: {
        text: `经度: ${longitude.toFixed(6)}\n纬度: ${latitude.toFixed(6)}\n高度: ${height.toFixed(2)}米`,
        font: '14px sans-serif',
        fillColor: Cesium.Color.WHITE,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -10)
      }
    })
    if (point) measureEntities.value.push(point)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

// 计算距离
const calculateDistance = (positions) => {
  let distance = 0
  for (let i = 0; i < positions.length - 1; i++) {
    distance += Cesium.Cartesian3.distance(positions[i], positions[i + 1])
  }
  return distance
}

// 计算面积
const calculateArea = (positions) => {
  const coordinates = positions.map(position => {
    const cartographic = Cesium.Cartographic.fromCartesian(position)
    return [
      Cesium.Math.toDegrees(cartographic.longitude),
      Cesium.Math.toDegrees(cartographic.latitude)
    ]
  })
  coordinates.push(coordinates[0]) // 闭合多边形

  let area = 0
  for (let i = 0; i < coordinates.length - 1; i++) {
    area += coordinates[i][0] * coordinates[i + 1][1]
    area -= coordinates[i][1] * coordinates[i + 1][0]
  }
  area = Math.abs(area) * 0.5 * 111319.9 * 111319.9
  return area
}

// 计算高度差
const calculateHeight = (start, end) => {
  const startCartographic = Cesium.Cartographic.fromCartesian(start)
  const endCartographic = Cesium.Cartographic.fromCartesian(end)
  return Math.abs(endCartographic.height - startCartographic.height)
}

// 创建距离标签
const createDistanceLabel = (distance) => {
  const canvas = document.createElement('canvas')
  canvas.width = 200
  canvas.height = 100
  const ctx = canvas.getContext('2d')
  if (!ctx) return ''

  // 绘制背景
  ctx.fillStyle = 'rgba(40, 44, 52, 0.8)'
  ctx.strokeStyle = '#007acc'
  ctx.lineWidth = 2
  roundRect(ctx, 0, 0, 180, 60, 8)
  ctx.fill()
  ctx.stroke()

  // 计算文本宽度以实现居中
  ctx.font = 'bold 16px Arial'
  const titleWidth = ctx.measureText('距离').width
  const titleX = (180 - titleWidth) / 2

  ctx.font = '14px Arial'
  const valueText = `${distance.toFixed(2)} 米`
  const valueWidth = ctx.measureText(valueText).width
  const valueX = (180 - valueWidth) / 2

  // 绘制居中的文本
  ctx.fillStyle = 'white'
  ctx.font = 'bold 16px Arial'
  ctx.fillText('距离', titleX, 25)
  ctx.font = '14px Arial'
  ctx.fillText(valueText, valueX, 45)

  return canvas.toDataURL()
}

// 创建面积标签
const createAreaLabel = (area) => {
  const canvas = document.createElement('canvas')
  canvas.width = 200
  canvas.height = 100
  const ctx = canvas.getContext('2d')
  if (!ctx) return ''

  // 绘制背景
  ctx.fillStyle = 'rgba(40, 44, 52, 0.8)'
  ctx.strokeStyle = '#007acc'
  ctx.lineWidth = 2
  roundRect(ctx, 0, 0, 180, 60, 8)
  ctx.fill()
  ctx.stroke()

  // 计算文本宽度以实现居中
  ctx.font = 'bold 16px Arial'
  const titleWidth = ctx.measureText('面积').width
  const titleX = (180 - titleWidth) / 2

  ctx.font = '14px Arial'
  const valueText = `${area.toFixed(2)} 平方米`
  const valueWidth = ctx.measureText(valueText).width
  const valueX = (180 - valueWidth) / 2

  // 绘制居中的文本
  ctx.fillStyle = 'white'
  ctx.font = 'bold 16px Arial'
  ctx.fillText('面积', titleX, 25)
  ctx.font = '14px Arial'
  ctx.fillText(valueText, valueX, 45)

  return canvas.toDataURL()
}

// 绘制圆角矩形
const roundRect = (ctx, x, y, width, height, radius) => {
  ctx.beginPath()
  ctx.moveTo(x + radius, y)
  ctx.lineTo(x + width - radius, y)
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
  ctx.lineTo(x + width, y + height - radius)
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
  ctx.lineTo(x + radius, y + height)
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
  ctx.lineTo(x, y + radius)
  ctx.quadraticCurveTo(x, y, x + radius, y)
  ctx.closePath()
}

// 创建高度标签
const createHeightLabel=(height)=>{
  const canvas = document.createElement('canvas')
  canvas.width = 200
  canvas.height = 100
  const ctx = canvas.getContext('2d')
  if (!ctx) return ''
  // 绘制背景
  ctx.fillStyle = 'rgba(40, 44, 52, 0.8)'
  ctx.strokeStyle = '#007acc'
  ctx.lineWidth = 2
  roundRect(ctx, 0, 0, 180, 60, 8)
  ctx.fill()
  ctx.stroke()
  // 计算文本宽度以实现居中
  ctx.font = 'bold 16px Arial'
  const titleWidth = ctx.measureText('高度').width
  const titleX = (180 - titleWidth) / 2

  ctx.font = '14px Arial'
  const valueText = `${height.toFixed(2)} 米`
  const valueWidth = ctx.measureText(valueText).width
  const valueX = (180 - valueWidth) / 2
  // 绘制居中的文本
  ctx.fillStyle = 'white'
  ctx.font = 'bold 16px Arial'
  ctx.fillText('高度', titleX, 25)
  ctx.font = '14px Arial'
  ctx.fillText(valueText, valueX, 45)
  return canvas.toDataURL()
}

// 清除测量结果
const clearMeasurements = () => {
  if (!viewer.value) return

  measureEntities.value.forEach(entity => {
    viewer.value?.entities.remove(entity)
  })
  measureEntities.value = []
  activeTool.value = ''
  removeHandler()
}

// 重置视角
const resetView = () => {
  if (!viewer.value) return

  viewer.value.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.391, 39.901, 15000.0)
  })
}

// 移除事件处理器
const removeHandler = () => {
  if (!handler) return

  handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
  handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
  handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}

onMounted(async () => {
  await initViewer()
})

onBeforeUnmount(() => {
  if (handler) {
    handler.destroy()
    handler = null
  }
  if (viewer.value) {
    viewer.value.destroy()
    viewer.value = null
  }
})
</script>

<style lang="scss" scoped>
.measure-demo {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .cesium-container {
    flex: 1;
    height: 100%;
  }

  .control-panel {
    width: 300px;
    height: 100%;
    background-color: rgba(40, 44, 52, 0.9);
    padding: 20px;
    color: white;
    overflow-y: auto;
    z-index: 1000;
    h2 {
      margin-bottom: 20px;
      text-align: center;
    }

    .button-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;

      button {
        padding: 10px;
        border: none;
        border-radius: 4px;
        background-color: #4a4f57;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background-color: #5a6069;
        }

        &.active {
          background-color: #007acc;
        }
      }
    }

    .instruction-panel {
      background-color: rgba(255, 255, 255, 0.1);
      padding: 15px;
      border-radius: 4px;

      h3 {
        margin-bottom: 10px;
      }

      p {
        margin-bottom: 8px;
      }

      ol {
        padding-left: 20px;
        
        li {
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>

<style>
.error-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 59, 48, 0.9);
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;
  animation: fadeInOut 3s ease-in-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  90% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
}
</style>

011：vue+cesium 根据坐标值，显示点
大剑师兰特的GIS世界
02-28 460
第011个本示例的目的是介绍如何在vue+cesium中根据给出的坐标值，显示出点图形。
【开源】Cesium场景效果大全（cesium+vue3+vite+vuex）
06-03 3983
今天再一次带来我的开源项目，这个项目主要收集了cesium在日常业务开发中常用到的一些场景效果的开发。这个项目我已开源，也欢迎感兴趣的小伙伴能够加入进来，一起参与共建（目前还是有一定的star基础的🤭）开源地址：https://github.com/tingyuxuan2302/cesium-vue3-vite如果觉得项目对你有帮助，希望可以随手点一个star，激励我去开源更多优秀的代码。如果有在做数字孪生或者GIS方面的同学也可以加我交流：brown_7778，我拉你进交流群。
【Cesium 编程第一篇】概述、环境搭建、界面介绍
前端知识分享喵
04-09 1万+
Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。Cesium 使用 WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebG
Cesium 入门教程（基于 vue3）
最新发布
2403_83182682的博客
03-17 2419
Cesium 是一个开源的 JavaScript 库，专门用于创建世界级的三维地球和地图可视化应用。它提供了强大的工具和功能，使开发者能够轻松地在浏览器中展示高分辨率的地形、影像以及三维模型。Cesium 支持多种数据格式，包括但不限于 3D Tiles、GeoJSON 和 glTF，这使得它成为处理地理空间数据的理想选择。无论是构建虚拟地球、城市规划模拟、还是气象数据分析，Cesium 都能提供必要的技术支持。此外，Cesium 还支持时间动态数据，允许用户通过时间轴查看历史数据变化或预测未来趋势。
Cesium简介
floating_heart的博客
06-26 3万+
Cesium框架简介，尚未全部完成
开源全球地理空间数据可视化框架——Cesium学习（2023.8.21）
热门推荐
I have a dream, here my dreams come true!
08-21 3万+
Cesium简介，便于后续学习及交流！
Cesium学习笔记
weixin_57468559的博客
10-15 7315
Cesium是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库，Cesium支持海量的三维模型数据，影像数据，地形高程数据，失量数据等丰富的地理教据的加载。在交通，规划，城市管理，地形仿真等领城有非常广泛的应用。Cesium为三维的GIS提供了一个高效的数据可视化平台。中文文档官网例子Cesium的特点①、跨平台，跨浏览器，无插件②、强大的地理数据可视化能力。Cesium自定义的3D Tiles数据格式，支持海量数据渲染。
cesium入门简介
qq_40098572的博客
02-17 4902
简介：Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。 主要功能： 1.使用3d tiles格式流式加载各种不同的3d数据，包含倾斜摄影模型、三维建筑物、CAD和BIM的外部和内部，点云数据。并支持样式配置和用户交互操作。 2.全球高精度地形数据可视化，支持地形夸张效果、以及可编程实现的等高线和坡度分析效果。 3.支持多种资源的图像
迈向三维：vue3+Cesium.js三维WebGIS项目实战
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
02-21 5615
WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧。
vue+cesium量算---测距测面测高
weixin_44614518的博客
08-08 1240
量算
Cesium 测量贴地 点、线、面、园
04-10
在本项目中，我们主要探讨的是使用Cesium进行地理空间数据的测量，包括点、线、面和圆的测量功能。Cesium是一个强大的开源JavaScript库，用于创建交互式的3D地球浏览器，它广泛应用于Web GIS领域。Vue.js是前端开发...
cesium全球高程、坡度、坡向及等高线功能实现
10-24
内含全球高程、坡度、坡向及等高线功能的实现，以及等高线间距和线宽的调节和等高线颜色的切换。需要自行配置cesium环境，修改js引用位置即可运行。
UE+EarthSDK2.0+Cesium学习指南（使用VScode）+实现效果和代码呈现
weixin_51983847的博客
08-21 1663
EarthSDK2.0快速入门文档:‌​​​​​‬​​‬⁠⁠‬​​​​​⁠⁠‌⁠​​​‌​​​​‌‍⁠​‬​‌​‌‍​⁠​‌​​​EarthSDK2.0快速入门教程 - 飞书云文档 (feishu.cn)EarthSDK2 JS API文档:EarthSDK2 JS API文档 (wolai.com)EarthSDK2 官方示例：示例首页 (earthsdk.com)Cesium示例：Hello World - Cesium SandcastleB站视频链接（地球可视化实验室）：https://www
Cesium 简介
镜花水月
11-18 6012
Cesium 是一个开源 JavaScript 库，用于 3D , 2D , 2.5D 地图可视化
Cesium简介及发展历史
纸飞机的旅行的博客
02-20 8609
Cesium简介及发展历史
1.cesium简介和环境搭建
玖玖年的程序猿
12-19 4601
了解Cesium的作用和搭建初始的Cesium
Cesium开发实战-创建你的第一个Cesium地球
南宫的CG世界
05-31 5547
开始系统化学习Cesium进入Web3D行业，创建自己的第一个Cesium场景，并了解实际项目中的使用情况。（作者曾开发市级智慧城市CIM平台）
新手学习Cesium的几点建议
cyber_room的博客
02-21 1198
初学者如何学习Cesium，本篇文章给出了几点建议，希望给初学者或有志于学习三维GIS的读者一点思考和启发
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值