cesium环境搭建篇（一）使用http-server搭建一个简单的cesium服务

最新推荐文章于 2023-05-22 12:24:08 发布
最新推荐文章于 2023-05-22 12:24:08 发布
阅读量998 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/can_yue_/article/details/115689899
版权
准备工作：
  1. Vscode
  2. Node.js
步骤：
  1. 配置好Node的环境，
  2. 打开cmd，全局安装http-server
npm install http-server -g
  1. 创建一个项目文件夹cesium-temp,在根目录下创建scripts文件夹，在cesium官网下载解压后的文件中Build/Cesium复制到scripts文件夹下
  2. cmd 进入到项目文件路径下执行
http-server -p 8082

在这里插入图片描述

执行后别关闭这个cmd窗口
  1. 将项目文件夹用Vscode打开，在根目录下创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CesiumApp</title>
    <script src="./scripts/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
    <style>
        html,
        body,
        #cesiumContainer {
          position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
        }
      </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
        	geocoder: false, // 查找位置工具，默认使用bing地图
       		navigationHelpButton: false, // 导航帮助按钮
        	animation: false, // 动画器件
	        timeline: false, // 时间线
        	fullscreenButton: false, // 全屏按钮

        	terrainProvider: Cesium.createWorldTerrain(), //地形
        	shadows: true, //阴影
        });
    </script>
    
</body>
</html>
  1. 最后在8082端口验证
Can_Yue_
关注
专栏目录
cesium服务部署
qq_39264988的博客
11-11 2042
Cesium开发1.cesium基于nodejs安装部署前言一、下载Cesium二、安装NodeJsnodejs三、部署四、发布五、访问 1.cesium基于nodejs安装部署 前言 cesium 可基于TomCat\IIS\NodeJs等发布，本文章主要基于nodejs发布 一、下载Cesium 在官网（https://cesium.com/cesiumjs/）下载开发包，解压后 二、安装NodeJs nodejs nodejs安装按照网上的教程安装即可本篇不再赘述，安装完后在终端（cmd控制台）
Cesium入门2 - Cesium环境搭建及第一个示例程序
Cesium的博客QQ2252224326
10-18 497
验证浏览器 Cesium需要浏览器支持WebGL，可以通过CesiumJS官网提供的一个HelloWorld例子来测试自己的浏览器是否支持Cesium。（推荐使用Chrome） 测试地址：CesiumJS – Cesium 选择IDE 官网中写到： If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most .
使用IIS创建Cesium本地服务器
遨游在太空
02-18 2193
研究学习Cesium少不了创建本地服务器。创建本地服务器有多种方式：IIS(微软windows系统自带)、Tomcat、Python、NodeJS。后面几种方式的创建请参考之前的博文：使用Tomcat架设Cesium本地服务器(含Nodejs,Python方法) 本文介绍使用微软自身的Web服务器组件(IIS)创建Cesium本地服务器，步骤非常简单。对IIS不熟悉的同学自行百度或谷歌。 Cesi...
Cesium加载ArcGIS Server服务实现属性过滤
wangyingying12的博客
05-22 812
图层过滤参数满足arcgis rest api 提供的export接口参数写法，并且最后调用的getDerivedResource方法就是采用了arcgis rest api的export接口，export接口本身是提供了属性过滤的。因此可以修改代码来添加属性过滤，为了避免破坏源码文件，可以在外部创建一个JS扩展文件（arcgisImageryServiceExt.js）来修改ArcGisMapServerImageryProvider的原型方法达到目的。在public/index.html中引用。
Cesium安装及运行
weixin_43167546的博客
07-14 447
Cesium三维可视化地图的安装及运行
【Cesium入门】二、创建一个极简的Cesium项目（Hello World）
ljy1998dsb的博客
04-04 3687
cesium HelloWorld
CesiumJS 1.82(发布时间 2021-06-01)
07-12
通过这些文件，开发者可以了解CesiumJS的基本结构，快速搭建一个运行示例，然后根据需求扩展和定制自己的WebGIS应用。同时，Cesium社区活跃，BimAngle等相关资源的共享，为开发者提供了一个良好的学习和交流平台，...
cesium使用webpack搭建react项目
最新发布
10-08
本文将详细讲解如何使用Webpack来搭建一个基于React的Cesium项目。 首先，我们需要安装必要的依赖。在命令行中，确保已经安装了Node.js和npm（Node包管理器），然后创建一个新的项目目录并进入该目录： ``` mkdir ...
cesium使用环境搭建--vue中安装并引用百度地图
weixin_43989837的博客
02-22 884
1，安装，安装1.60版本最好，1.40版本兼容百度地图有问题 npm install cesium@1.60 --save 2.配置文件，在config.vue.js中配置 -----plugins const path = require('path');//引入path模块 const CopyWebpackPlugin = require('copy-webpack-plugin');//引入path模块 const webpack = require("webpack"); functio
cesium学习1--环境搭建和配置
fb280930320的博客
04-16 7944
本文讨论如何配置学习环境预期目的:在webstrom中配置好开发环境，并运行达到下图效果 1）nodejs环境配置 很简单直接下载nodejs安装文件安装即可。 备注：由于node的资源在国内被墙的厉害，推荐采用cnpm替代npm来安装一些依赖库 安装cnpm方法：npm install -g cnpm --registry=https://registry.npm.taobao.org2）
Cesium实例
08-22
基于cesium库的3d立体地球仪模型动画代码，测试使用。
cesium 加载地形以及.tif格式转.terrain的方法
11-08
cesium 加载地形以及.tif格式转.terrain的方法，亲测。若有疑问请发邮件1129091381@qq.com询问
如何解决Cesium使用nginx代理加载离线地形数据过程中出现的跨域问题
HeyLoong的博客
02-15 3115
如何解决Cesium使用nginx代理加载离线地形数据过程中出现的跨域问题
java build path 空白,vue项目,run build 后,用http-server,打开后页面一直空白,也没报错,几个路径都改掉了...
weixin_35598388的博客
03-19 339
问题描述vue项目,run build 后,用http-server,打开后页面一直空白,也没报错,几个路径都改掉了问题出现的环境背景及自己尝试过哪些方法相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)utils.jsif (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-st...
Cesium学习（1）--geoserver+cesium创建离线环境下的web三维球
wjk的专栏
09-13 8721
基于geoserver搭建离线web球环境，采用cesium1.25版本，win10环境搭建，供大家参考。
Cesium本地影像服务处理和发布
qq_34447899的博客
10-09 3865
目录Cesium本地影像服务处理和发布关键资源步骤全能地图下载器1.安装软件2.下载影像瓦片数据3.影像服务发布4.使用服务91卫图助手1.安装软件2.下载影像瓦片数据3.影像服务发布4.使用服务 Cesium本地影像服务处理和发布 有时因网络受限，或者希望优化系统，避免网络资源的浪费，会需要在本地服务器发布影像服务以供系统使用。 本文将从本地影像数据的获取-处理-发布-使用逐步讲解操作步骤。 关键资源 全能地图下载器 91卫图助手 步骤 本教程将介绍这两款软件下载地图影像的方法以及发布方式和如何使用。
启动cesium官方示例
谢小鱼的博客
06-28 6560
一、下载cesium官方源码 点击cesium官网，下载源码 二、使用http-server启动服务 准备工具：nodejs、http-server、cesium源码。 nodejs：下载安装nodejs 安装http-server： npm install -g http-server 进入解压缩的cesium源码目录，用http-server启动cesium 在此目录输入cmd，然后回车，打开命令行工具 然后输入:hs -p 8081 可以看到启动成功，在浏览器输入http://127.
使用http-server零配置在本地开启http服务器
热门推荐
现在学习也不晚
06-12 4万+
在很多情况下，需要在本地开启http服务器来测试。所以就需要一个简单的省事好用的http服务器。以前的时候，都是使用php的本地环境，但是，自从学了nodejs，发现了http-server好东西。不用配置直接在当前文件夹内打开cmd，就能够使用，简单易用，轻松方便。 简介： http-server是一个简单的零配置命令行http服务器。它对于生产使用来说是足够强大的，但它的测试，本地
Cesium简介——环境搭建
gis_witch的博客
01-25 2741
本文主要介绍Cesium的简介和开发环境搭建的过程。
React+TypeScript+Cesium环境搭建及使用指南
资源摘要信息: "基于React+TypeScript+Cesium的基础环境搭建与使用说明" 本资源是一套完备的教学与实践指南，旨在帮助计算机专业相关的在校学生、专业老师及企业员工搭建和使用基于React、TypeScript和Cesium的项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值