Cesium 上手不完全指北_cesium的methods写在哪里-程序员宅基地

技术标签: gis  可视化  webgl  vue  javascript  

Cesium 上手不完全指北

将最近学习的 CesiumJS 做一个系统梳理,从项目配置开始,记录常用 API 的使用。

环境搭建与安装

首先,什么是 CesiumCesium 是一款开源的基于 JavaScript3D 地图框架,即地图可视化框架。产品基于 WebGL 技术,可以使用 CesiumJS 创建虚拟场景的 3D 地理信息平台。其目标是用于创建以基于 Web 的地图动态数据可视化。在提升平台的性能、准确率、虚拟化能力、易用性方面提供各种支持。

更多介绍和信息可通过官网进行学习。

注册

Cesium ion 是一个提供瓦片图和 3D 地理空间数据的平台,Cesium ion 支持把数据添加到用户自己的 CesiumJS 应用中。使用二三维贴图和世界地形都需要 ion 的支持,如果没有自己的数据源需要 cesium 提供的数据源就需要申请 iontoken,具体可以通过以下链接申请 access token

在创建 Cesium Viewer 的时候,将 access token 填为自己的 access token 即可。

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';

项目搭建

进入项目搭建过程,项目选择在 Vue 平台上进行实现,首先创建项目安装 cesium 库:

vue create cesium-vue
cd cesium-vue
npm i cesium@1.61 --save

注意:目前使用 webpack 进行配置引用最新版本(1.71) cesium 暂时不能导入,实测 [email protected] 版本可以进行 import 导入。

项目配置

根目录下新建 vue.config.js 配置文件,对项目进行基本配置:

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
   
    
    publicPath: '',
    devServer: {
   
    
        port: 9999
    },
    configureWebpack: {
   
    
        output: {
   
    
            sourcePrefix: ' '
        },
        amd: {
   
    
            toUrlUndefined: true
        },
        resolve: {
   
    
            alias: {
   
    
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'cesium': path.resolve(__dirname, cesiumSource)
            }
        },
        plugins: [
            new CopyWebpackPlugin([{
   
     from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]),
            new CopyWebpackPlugin([{
   
     from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),
            new CopyWebpackPlugin([{
   
     from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),
            new CopyWebpackPlugin([{
   
     from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),
            new webpack.DefinePlugin({
   
     CESIUM_BASE_URL: JSON.stringify('./') }),
            new CopyWebpackPlugin([{
   
     from: path.join('./static', 'model'), to: 'model3D' }]),
            new CopyWebpackPlugin([{
   
     from: path.join('./static', 'images'), to: 'images' }])
        ]
    }
}

在根目录下创建 static 文件夹用于后续 modelimages 的存放。

组件实现

src/components/ 下新建 CesiumViewer.vue 进行组件实现:

<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
   
    
    name: 'CesiumViewer',
    mounted () {
   
    
        // token
        Cesium
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/akashi_sai/article/details/107742953

智能推荐

daas 数据即服务_什么是daas-程序员宅基地

文章浏览阅读1.3k次。展开全部DAAS,是数字音频分析系统,是一种基于PC的测试系统,支持DOS和WINDOWS操作系统,DaaS是Data-as-a-service(数据即服务),62616964757a686964616fe59b9ee7ad9431333431353365是继 IaaS、PaaS、SaaS之后又一个新的服务概念。数据即服务通过资源的集中化管理,为提升IT效率以及系统性能指明了方向。因此DaaS在过..._daas特点表现在

服务器电脑能用无线网卡,两台电脑可以同时用一个3G无线网卡上网-程序员宅基地

文章浏览阅读724次。首先,要对两台电脑进行设置。1、设置主机。打开网上邻居,找到3G网卡拨号连接,右键属性,点击高级。例如:然后在Internet 连接共享下面的方框内打勾。接着一直点确定。2、在网上邻居找到本地连接,右键属性,双击Internet 协议(TCP/IP)属性,如下图:这里要对IP及DNS进行设置。IP可以随你设置,我的设置如上图。当然你也可以把IP地址设置成192.168.1.X(X<225),..._服务器能用无线网卡吗

关于CentOS7的开机自启动_systemctl 开机延迟启动-程序员宅基地

文章浏览阅读1.9k次。rc.local ; systemctl_systemctl 开机延迟启动

date -u linux,Linux基础-程序员宅基地

文章浏览阅读1.6k次。date1.date "+%F %T"显示详细时间:年月日时分2.date -d yesterday显示昨天时间3.date -u同步UTC时间4.date -s '-1 year'年份设置为去年5.date -d "10 day" +%F显示为十天后时间实用: touch /data/date +%F.log在data目录下生成以日期为名的日志文件clock1.clock -s修改系统时间,以硬..._date -u

node复用依赖--复制node_modules与复制package.json_node_moudules可以复制吗-程序员宅基地

文章浏览阅读2.6k次。如果两个项目使用相同的依赖,可以直接复制node_modules,但是如果安装的依赖非常多,复制速度还是很慢的,这里介绍一种更快捷的方式——直接复制package.json_node_moudules可以复制吗

<2020>小白也能看懂的最详细在centos系统下的nginx安装及部署vue项目的教程-程序员宅基地

文章浏览阅读234次。前提:以下详细记录安装部署的过程,如若喜欢的话,请留下你宝贵的一赞????,闲话不多说了那就直奔主题吧~ 以下都用nginx-1.17.8版本为例 下载nginx压缩包:wgethttp://nginx.org/download/nginx-1.17.8.tar.gz(wget + name) 解压压缩包: tar -zxvf http://nginx.org/download...

随便推点

[BAPI]BAPI_GOODSMVT_CREATE中的GM_CODE movement indicator 汇总-程序员宅基地

文章浏览阅读114次。You can check table T158G for all GMCODE available.01 - MB01 - Goods Receipts for Purchase Order02 - MB31 - Goods Receipts for Prod Order03 - MB1A - Goods Issue04 - MB1B - Transfer Posti..._bapi_goodsmvt_create move indicator

linux 股票指南针,Android 利用方向传感器实现 指南针-程序员宅基地

文章浏览阅读73次。step1:新建一个项目Compass,并将一张指南针图片导入到res/drawable-hdpi目录中step2:设计应用的UI界面,main.xmlandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:gravity="center"&..._linux制作指南针程序

《C++ Primer》5th 课后练习 第三章 字符串、向量和数组 21~30_在100页的二分搜索程序中-程序员宅基地

文章浏览阅读238次。练习3.21 请使用迭代器重做3.3.3节的第一个练习。#include<iostream>#include<vector>#include<string>using namespace std;void check_and_print(vector<int> &vec, int num){ cout << "..._在100页的二分搜索程序中

USACO 3.3.3 Camelot解题报告-程序员宅基地

文章浏览阅读94次。这题本来是个很水的题,但是USACO的特点大家是知道的:细节折磨死你……这题也不例外,好想其实也挺好写。但是如果不是一把成就会很悲剧……还好我是幸运的,基本一会就过了…… 但是这个题还是碰到了相当的问题,就是说pascal当中有我们无敌的神器fillword和filldword。但是C++当中只有一个fill,这个东西还要算指针头和指针尾,着实很悲剧。所以逼得我不得不用memset,很..._7-54 3.3.3 camelot

梯度散度旋度常用基本关系_梯度叉乘-程序员宅基地

文章浏览阅读1.4w次,点赞4次,收藏29次。∇:向量微分算子、哈密尔顿算子、Nabla算子、劈形算子,倒三角算子是一个微分算子。Strictly speaking,∇del is not a specific operator, but rather a convenient mathematical notation for those three operators, that makes many equations ea..._梯度叉乘

Ubuntu上,使用Dockerfile_dockerfile ubuntu-程序员宅基地

文章浏览阅读3.9k次。docker官方文档对初学者极不友好,本文试图形成一篇学习者友好的入门指引。本文基于Ubuntu,docker在windows下有很多不同的用法,本文不涉及。本文只讲Dockerfile的使用,docker的安装和手工使用见https://blog.csdn.net/xiefeisd/article/details/884123341 hello world1.1 创建镜像$ ..._dockerfile ubuntu

推荐文章

热门文章

相关标签