vue+cesium+ts

已于 2023-12-01 18:07:03 修改
阅读量147 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-12-01 18:05:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72102746/article/details/134733775
版权
  • npm install cesium   

  •  在终端安装cesium

  • 在vite.config.ts中引入

  • 1.import cesium from 'vite-plugin-cesium'

  • 2.在组件中：plugins: [

        cesium(),

        vue(),

  • cesium搜索框改为中文输入地址经纬度

  • 切换地图图层控件自定义图层天地图或其他图层也可以

// 切换地图
function map () {
  // 影像标注
  const customImageryProviderbz = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://t{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=' + token,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
    layer: 'tdtBasicLayer',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
  })
  // const tdtImageryProvider = new Cesium.ProviderViewModel({
  //   name: '卫星路网图层',
  //   iconUrl: 'https://fh.dji.com/assets/img/satellite@3x.0026b4db.png',
  //   tooltip: '卫星路网图层',
  //   creationFunction: function () {
  //     return new Cesium.WebMapTileServiceImageryProvider({
  //       url: 'http://t0.tianditu.com/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=' + token,
  //       subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
  //       layer: 'tdtBasicLayer',
  //       style: 'default',
  //       format: 'image/jpeg',
  //       tileMatrixSetID: 'GoogleMapsCompatible',
  //     })
  //   }
  // })
  // providerViewModels.push(tdtImageryProvider)

  const customImageryProviderwx = new Cesium.ProviderViewModel({
    name: '卫星图层',
    iconUrl: 'https://fh.dji.com/assets/img/satellite@3x.0026b4db.png',
    tooltip: '卫星图层',
    creationFunction: function () {
      return new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t{s}.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=' + token,
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
        layer: 'tdtBasicLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
      })
    }
  })

  providerViewModels.push(customImageryProviderwx)
  const tdtModel = new Cesium.ProviderViewModel({
    name: '标准图层',
    iconUrl: 'https://fh.dji.com/assets/img/streets@3x.d07c7065.png',
    tooltip: '标准图层',
    creationFunction: function () {
      return new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://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=' + token,
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
        layer: 'tdtBasicLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
      })
    }
  })
  providerViewModels.push(tdtModel)
}

  • 引入地图与鹰眼视图与地形图

  • <script lang="ts" setup>

import * as Cesium from 'cesium'
import type { NavigationOptions } from 'cesium-navigation-es6'
import CesiumNavigation from 'cesium-navigation-es6'
import 'cesium/Build/Cesium/Widgets/widgets.css'

import type { NavigationOptions } from 'cesium-navigation-es6'
(window as any).Cesium = Cesium
let viewer: any
let viewer1: any
onMounted(() => {
  map()
  // 初始化地图
  creatviewer()
})

// 初始化地图
async function creatviewer () {
  // cesium 初始化
  viewer = new Cesium.Viewer('cesiumContainer', {

    geocoder: new OpenStreetMapNominatimGeocoder(),
    // geocoder: true, // 搜索框
    homeButton: true, // home键返回初始位置
    baseLayerPicker: true, // 地图选择器
    sceneModePicker: true, // 选择视角的模式（球体、平铺、斜视平铺）
    animation: false, // 时间
    fullscreenButton: false, // 全屏按钮
    timeline: false, // 底部时间线
    navigationHelpButton: false, // 导航提示
    imageryProviderViewModels: providerViewModels,
    terrainProviderViewModels: providerTerrainViewModels,
  })
  // 创建鹰眼地图
  viewer1 = new Cesium.Viewer('eye', {
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
  })

  viewer1.cesiumWidget.creditContainer.style.display = 'none'
  const control = viewer1.scene.screenSpaceCameraController
  control.enableRotate = false
  control.enableTranslate = false
  control.enableZoom = false
  control.enableTilt = false
  control.enableLook = false
  const syncViewer = function () {
    viewer1.camera.flyTo({
      destination: viewer.camera.position,
      orientation: {
        heading: viewer.camera.heading,
        pitch: viewer.camera.pitch,
        roll: viewer.camera.roll
      },
      duration: 0.0
    })
  }
  viewer.scene.preRender.addEventListener(syncViewer)
  const imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://t{s}.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=' + token,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
    layer: 'tdtBasicLayer',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
  })

  viewer1.imageryLayers.addImageryProvider(imageryProvider)
  viewer.geocoder.viewModel.searchText = ''
  viewer.geocoder.viewModel.search()
  // 深度检测
  viewer.scene.globe.depthTestAgainstTerrain = true
  // 去除版权信息
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  // 2.5D 哥伦布模式
  viewer.scene.morphToColumbusView(0)
  viewer.sceneModePicker.viewModel.duration = 0.0// 去掉二三维切换动画效果

  // viewer.imageryLayers.removeAll()
  // viewer.imageryLayers.get(0).show = false// 删除底图
  // 3D图层
  const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(
    Cesium.IonResource.fromAssetId(1),
    {
      requestWaterMask: true,
      requestVertexNormals: true,
    }
  )
  viewer.terrainProvider = terrainProvider
  viewer1.terrainProvider = terrainProvider
  // 添加影像标注
  const tdtImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://t{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=' + token,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
    layer: 'tdtImgBasicLayer',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
  })

  viewer.imageryLayers.addImageryProvider(tdtImageryProvider, 1)
  viewer1.imageryLayers.addImageryProvider(tdtImageryProvider, 1)
//本地导入
  // viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
  //   url: '/public/cia_w/{z}/{x}/{y}.png',
  //   minimumLevel: 0,
  //   maximumLevel: 18,
  // }))

  // selectmaps(viewer)// 切换地图图层

  navigationHelp(viewer)// 插件
  loading(viewer)// 加载进度
  initaddress(viewer)// 初始位置
  handleMouse(viewer)// 实时经纬度
  handleMouses(viewer)
  inithome(viewer)// home键位置
  restrictZoomRange(viewer)// 限制缩放范围
  getpointpage(viewer)// 获取项目下标注点
  // removeposition(viewer)// 键盘移动视图
  tilesetload()
}



</script>

    指北针插件与其他方法

  • // home初始位置
function inithome (viewer: any) {
  const homeButton = viewer.homeButton.viewModel
  // 设置HomeButton的初始位置和朝向
  homeButton.command.beforeExecute.addEventListener(function (commandInfo: any) {
    // 设置地图的初始位置（济南市的经纬度和高度）
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(117.1201, 36.6512, 140000), // 高度设置为100000米（可根据需要调整）
      orientation: {
        heading: Cesium.Math.toRadians(0), // 设置初始朝向的角度（0度表示正北）
        pitch: Cesium.Math.toRadians(-90), // 设置初始俯仰角度（-90度表示正下方）
        roll: 0 // 设置初始横滚角度
      }
    })
    // 停止默认的HomeButton行为
    commandInfo.cancel = true
  })
}

// 监听鼠标移动事件点击经纬度高度
function handleMouses (viewer: any) {
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
  handler.setInputAction(function (movement: any) {
    const pick = movement.position
    const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene)
    const ellipsoid = viewer.scene.globe.ellipsoid
    const cartographic = ellipsoid.cartesianToCartographic(cartesian)
    const latitude = Cesium.Math.toDegrees(cartographic.latitude)// 纬度
    const longitude = Cesium.Math.toDegrees(cartographic.longitude)// 经度
    const HAE = cartographic.height
    const positions = [Cesium.Cartographic.fromDegrees(longitude, latitude)]
    Cesium.sampleTerrain(viewer.terrainProvider, 11, positions).then(function (updatedPositions) {
      const height = updatedPositions[0].height
      console.log('经度：' + longitude + '\n纬度：' + latitude + '\n椭圆体高度：' + HAE + '\n海拔高度：' + height)
      renderInformationOnPages(longitude, latitude, height, HAE)
    })
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  // LEFT_CLICK
  // MOUSE_MOVE
}

// 实时经纬度
function handleMouse (viewer: any) {
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)

  handler.setInputAction(function (movement) {
    const pick = movement.endPosition
    const cartesian = viewer.scene.pickPosition(pick)
    if (cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      const latitude = Cesium.Math.toDegrees(cartographic.latitude)
      const longitude = Cesium.Math.toDegrees(cartographic.longitude)

      renderInformationOnPage(longitude, latitude)
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
}

// 进入地图定位初始位置
function initaddress (viewer: any) {
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(117.1201, 36.6512, 140000), // 经度、纬度、高度
    orientation: {
      heading: Cesium.Math.toRadians(0), // 方向角度（0度表示正北）
      pitch: Cesium.Math.toRadians(-90), // 俯仰角度（-90度表示正下方）
      roll: 0 // 横滚角度
    }
  })
}

// 加载进度
function loading (viewer: any) {
  let loadedTiles = 0
  const increasingTiles = 0 // 用于递增加载瓦片数
  let maxLoadedTiles = 0
  // 监听Cesium加载事件
  viewer.scene.globe.tileLoadProgressEvent.addEventListener(function (tilesLoaded: any) {
    // 更新已加载和总瓦片数量
    loadedTiles = tilesLoaded
    maxLoadedTiles = Math.max(maxLoadedTiles, tilesLoaded)
    // console.log(loadedTiles, maxLoadedTiles, '111111111111111111111')
    // 计算加载百分比
    const percentage = 100 - ((loadedTiles / maxLoadedTiles) * 100)

    // 在页面上显示加载百分比
    updateLoadingPercentage(percentage)
    if (loadedTiles === 0) {
      loadedTiles = 0
      maxLoadedTiles = 0
    }
  })
}

// 指北针比例尺等控件
function navigationHelp (viewer: any) {
  options.enableCompass = true // 指北针
  options.enableZoomControls = true // 放大缩放控件
  options.enableDistanceLegend = true// 比例尺
  options.enableCompassOuterRing = true// 指北针外环
  // options.resetTooltip = '重置视图'
  options.zoomInTooltip = '放大'
  options.zoomOutTooltip = '缩小'
  function createCesiumNavigation (viewer: any, options: any) {
    return new CesiumNavigation(viewer, options)
  }
  createCesiumNavigation(viewer, options)
}

// 渲染页面经纬度
function renderInformationOnPage (longitude: any, latitude: any) {
  const infoElement = document.getElementById('address')
  if (infoElement) {
    // infoElement.innerHTML = `lon: ${longitude}\nlat：${latitude}\nASL：${height}\nHAE${HAE} `
    infoElement.innerHTML = `lon: ${longitude}\nlat：${latitude} `
  }
}

// 点击出现经纬度海拔高度椭圆体高度
function renderInformationOnPages (longitude: any, latitude: any, height: any, HAE: any) {
  const infoElement = document.getElementById('address')
  if (infoElement) {
    infoElement.innerHTML = `lon: ${longitude}\nlat：${latitude}\nASL：${height}\nHAE${HAE} `
    // infoElement.innerHTML = `lon: ${longitude}\nlat：${latitude} `
  }
}

// 更新页面上的加载百分比
function updateLoadingPercentage (percentage: any) {
  const loadingPercentageElement = document.getElementById('loadingPercentage')
  if (loadingPercentageElement) {
    loadingPercentageElement.textContent = `加载进度: ${percentage.toFixed(2)}%`
  }
}

    鼠标控制键盘移动

  • // 键盘移动视图
function removeposition (viewer: any) {
  const scene = viewer.scene
  const canvas = viewer.canvas
  canvas.setAttribute('tabindex', '0') // needed to put focus on the canvas
  canvas.onclick = function () {
    canvas.focus()
  }
  const ellipsoid = scene.globe.ellipsoid

  // disable the default event handlers
  scene.screenSpaceCameraController.enableRotate = false
  scene.screenSpaceCameraController.enableTranslate = false
  scene.screenSpaceCameraController.enableZoom = false
  scene.screenSpaceCameraController.enableTilt = false
  scene.screenSpaceCameraController.enableLook = false

  let startMousePosition
  let mousePosition
  const flags = {
    looking: false,
    moveForward: false,
    moveBackward: false,
    moveUp: false,
    moveDown: false,
    moveLeft: false,
    moveRight: false,
  }

  const handler = new Cesium.ScreenSpaceEventHandler(canvas)

  handler.setInputAction(function (movement) {
    flags.looking = true
    mousePosition = startMousePosition = Cesium.Cartesian3.clone(
      movement.position
    )
  }, Cesium.ScreenSpaceEventType.LEFT_DOWN)

  handler.setInputAction(function (movement) {
    mousePosition = movement.endPosition
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

  handler.setInputAction(function (position) {
    flags.looking = false
  }, Cesium.ScreenSpaceEventType.LEFT_UP)

  function getFlagForKeyCode (keyCode) {
    switch (keyCode) {
      case 'W'.charCodeAt(0):
        return 'moveForward'
      case 'S'.charCodeAt(0):
        return 'moveBackward'
      case 'Q'.charCodeAt(0):
        return 'moveUp'
      case 'E'.charCodeAt(0):
        return 'moveDown'
      case 'D'.charCodeAt(0):
        return 'moveRight'
      case 'A'.charCodeAt(0):
        return 'moveLeft'
      default:
        return undefined
    }
  }

  document.addEventListener(
    'keydown',
    function (e) {
      const flagName = getFlagForKeyCode(e.keyCode)
      if (typeof flagName !== 'undefined') {
        flags[flagName] = true
      }
    },
    false
  )

  document.addEventListener(
    'keyup',
    function (e) {
      const flagName = getFlagForKeyCode(e.keyCode)
      if (typeof flagName !== 'undefined') {
        flags[flagName] = false
      }
    },
    false
  )

  viewer.clock.onTick.addEventListener(function (clock) {
    const camera = viewer.camera

    if (flags.looking) {
      const width = canvas.clientWidth
      const height = canvas.clientHeight

      // Coordinate (0.0, 0.0) will be where the mouse was clicked.
      const x = (mousePosition.x - startMousePosition.x) / width
      const y = -(mousePosition.y - startMousePosition.y) / height

      const lookFactor = 0.05
      camera.lookRight(x * lookFactor)
      camera.lookUp(y * lookFactor)
    }

    // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
    const cameraHeight = ellipsoid.cartesianToCartographic(
      camera.position
    ).height
    const moveRate = cameraHeight / 100.0

    if (flags.moveForward) {
      camera.moveForward(moveRate)
    }
    if (flags.moveBackward) {
      camera.moveBackward(moveRate)
    }
    if (flags.moveUp) {
      camera.moveUp(moveRate)
    }
    if (flags.moveDown) {
      camera.moveDown(moveRate)
    }
    if (flags.moveLeft) {
      camera.moveLeft(moveRate)
    }
    if (flags.moveRight) {
      camera.moveRight(moveRate)
    }
  })
}

    中文搜索框

  • // 中文搜索
function OpenStreetMapNominatimGeocoder () { }
OpenStreetMapNominatimGeocoder.prototype.geocode = function (input: any) {
  const endpoint = 'https://nominatim.openstreetmap.org/search'
  const resource = new Cesium.Resource({
    url: endpoint,
    queryParameters: {
      format: 'json',
      q: input,
    },
  })

  return resource.fetchJson().then(function (results: any) {
    let bboxDegrees
    return results.map(function (resultObject: any) {
      bboxDegrees = resultObject.boundingbox
      return {
        displayName: resultObject.display_name,
        destination: Cesium.Rectangle.fromDegrees(
          bboxDegrees[2],
          bboxDegrees[0],
          bboxDegrees[3],
          bboxDegrees[1]
        ),
      }
    })
  })
}

    切换地图图层叠加天地图

  • // 切换地图
function map () {
  // 影像标注
  const customImageryProviderbz = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://t{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=' + token,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
    layer: 'tdtBasicLayer',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
  })
  // const tdtImageryProvider = new Cesium.ProviderViewModel({
  //   name: '卫星路网图层',
  //   iconUrl: 'https://fh.dji.com/assets/img/satellite@3x.0026b4db.png',
  //   tooltip: '卫星路网图层',
  //   creationFunction: function () {
  //     return new Cesium.WebMapTileServiceImageryProvider({
  //       url: 'http://t0.tianditu.com/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=' + token,
  //       subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
  //       layer: 'tdtBasicLayer',
  //       style: 'default',
  //       format: 'image/jpeg',
  //       tileMatrixSetID: 'GoogleMapsCompatible',
  //     })
  //   }
  // })
  // providerViewModels.push(tdtImageryProvider)

  const customImageryProviderwx = new Cesium.ProviderViewModel({
    name: '卫星图层',
    iconUrl: 'https://fh.dji.com/assets/img/satellite@3x.0026b4db.png',
    tooltip: '卫星图层',
    creationFunction: function () {
      return new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t{s}.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=' + token,
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
        layer: 'tdtBasicLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
      })
    }
  })

  providerViewModels.push(customImageryProviderwx)
  const tdtModel = new Cesium.ProviderViewModel({
    name: '标准图层',
    iconUrl: 'https://fh.dji.com/assets/img/streets@3x.d07c7065.png',
    tooltip: '标准图层',
    creationFunction: function () {
      return new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://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=' + token,
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 天地图服务器子域
        layer: 'tdtBasicLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
      })
    }
  })
  providerViewModels.push(tdtModel)
}

  • 用到的文档：cesium中文网：   Index - Cesium Documentation

  • Cesium入门之四：基于Vue3+Vite+Cesium构建三维地球场景-腾讯云开发者社区-腾讯云

  • cesium教程：鼠标键盘事件 | Cesium 入门教程

  • 示例代码

  • Cesium Sandcastle

今天也要加油吖!!
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
DEJA_VU3D - Cesium功能集 之 084-补充：材质类
总得学点什么的博客
10-26 641
本片主要是对前面材质相关博文涉及到的MaterialProperty类定义的补充，包含源代码
Cesium+Vue项目环境搭建(不需要改动任何配置)
weixin_43812586的博客
08-05 4579
最简单的Cesium+Vue项目搭建方式
Cesium之汉化
最新发布
shanshanqwertyuiop的博客
04-21 253
Cesium提示默认是英文，我们可以将其汉化。
vue3+ts集成cesium插件实现3D地图
欧呦
03-14 793
pnpm install cesium@版本号。
最新版cesium+vue3+ts+vite实现鼠标画点标记采集
u012425087的博客
06-19 584
点击点采集，进行标记点，同时控制台输出点的经纬度。备注：其他鼠标事件可以自行扩展。
Vue+Ts+Cesium：自定义初始控件和底图
weixin_63499848的博客
04-13 686
紧接上文，上篇文章谈到Cesium学习中最基本的地球加载。最终实现的页面我们发现有很多视图控件，在我们日常的学习中这些控件往往排不上用场，或者大部分是用不着的。为了最初呈现的页面的美观性我们可以不显示这些控件。同时，我们也不一定要使用Cesium默认的底图，本文使用天地图提供的底图作为自定义底图示例。本篇内容并不难，更多是避免编写重复且繁杂的代码，学习Cesium一个简洁且有效的起步能让自己的心情舒畅不少。
Cesium的学习之路（二）：底图切换
往事随风的博客
11-23 7051
前言： 为什么第一个想到的是这个功能？？ 因为在我看来，所有的gis应用，图层的控制显隐切换，是根本离不开的，也是最基础的。 这一节的实现思路就是： 实现加载天地图影像，天地图矢量，天地图地形图，然后绑定图层切换按钮，实现底图的切换。 一、加载天地图等WMTS图层 在cesium中加载wmts图层需要用到 Cesium 中的 WebMapTileServiceImageryProvider 类，先贴代码，在一 一 解释（加载天地图需要自己申请key） //天地图矢量 //天地图矢量 tha
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
这段基于 Vue.js 的 Cesium 地图应用示例展示了如何使用 Cesium.js 创建一个具有自定义配置的 3D 地球视图。Cesium.js 是一个开源 WebGL 虚拟地球引擎，可以构建交互式的 3D 地图应用。示例中的底图和注记图层来自...
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
Vue3+vite+ts+cesium+route简易项目模板
04-24
Vue3+vite+ts+cesium+route简易项目模板是一个高效、现代的前端开发环境，专为构建3D地理空间应用而设计。这个项目利用了一系列先进的技术和工具，以提升开发效率和代码质量。 首先，Vue3是这个项目的核心，它是Vue...
基于vue3+vite+ts+cesium搭建的基本环境，包括所有源代码，可以直接运行
03-09
本文将详细讲解基于Vue3、Vite、TypeScript和Cesium构建的基础开发环境，以及如何运行和打包项目。首先，让我们逐一了解这些技术的核心特点和它们在项目中的作用。 Vue3是Vue.js框架的最新版本，它带来了许多性能...
vue3-ts-cesium-express
04-02
vue3-铯-ts 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
基于Cesium实现的风场（局部）效果，VUE3+TS+Cesium，包括完整demo和源代码，代码未加密/未压缩
08-03
基于Cesium实现的风场（局部）效果，VUE3+TS+Cesium，包括完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述： https://wangjianlei.blog.csdn.net/article/details/131624028 代码不易，略收小费，...
Ceisium展示——图层切换展示
虎康的博客
09-27 321
Cesium 中添加 自定义 对图层的切换。
cesium底图切换
UPCgiser
07-31 3500
cesium作为三维开源框架，实现底图切换也是很容易的。 let osm = new Cesium.UrlTemplateImageryProvider({ url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" }); let mapbox = new Ce...
Vue+Ts+Cesium：坐标转换和点击事件
weixin_63499848的博客
04-14 1297
本篇文章涉及到Cesium的坐标系统以及坐标之间的转换。利用ScreenSpaceEventHandler类进行点击事件的处理。这点后面会经常用到。
Cesium入门04-图层变换
weixin_40289902的博客
03-25 1863
之前有发过关于必应图层的显示，那个只是通过申请秘钥的方式来获取图层，这次是引用不同的地图源。 这个文章包含两个内容： 1、小控件的调用 2、关于BaseLayerPicker的图层调用 一、小控件 在最第二章‘构建球体’的最后，有提到一些关于viewer视图下的小框架，例如Geocoder(查询)、BaseLayerPicker(图层更换)、timeline(底部时间轴）之类。这里举个例子： va...
cesium 实战记录（一） 底图动态配置，前端实现切换
往事随风的博客
08-05 3834
cesium 实战记录（一） 底图动态配置，前端实现切换
使用ts封装Cesium浮动弹窗效果
weixin_40555345的博客
01-11 1090
使用API文档： Popup：返回浮动弹窗实例。 new Popup(options); 参数(options)： Name Require Default Description lng:number true -- 浮动弹窗定位位置经度。 lat:number true -- 浮动弹窗定位位置纬度。 alt:number true -- 浮动弹窗定位位置高度。
vue+cesium
08-29
Vue Cesium 是一个基于 Vue.js 和 Cesium.js 的开源库，用于在 Web 应用程序中创建 3D 地图。它提供了一组 Vue 组件，使开发者可以轻松地集成 Cesium 的功能和交互性到 Vue.js 应用程序中。 使用 Vue Cesium，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值