cesium编程入门(三)开始使用cesium开发

Elusive Cesium编程入门

搭建最简的开发环境

通过上一节搭建环境，我们大概了解了三维球运行起来是什么样的，这一节来搭建一个最简单的能运行的helloworld，以后的代码也会在这一节的基础上慢慢增加

创建文件夹

mkdir cesium-test
cd cesium-test

引入编译成果

将cesium源码中的Build文件夹，拷入cesium-test

创建html

将cesium-1.4.0/Apps/ 中的HelloWorld.html 拷入cesium-test
使用vscode 等编辑器打开
修改js和css的文件路径

<script src="../Build/Cesium/Cesium.js"></script>

@import url(../Build/Cesium/Widgets/widgets.css);

修改为

<script src="Build/Cesium/Cesium.js"></script>

@import url(Build/Cesium/Widgets/widgets.css);

发布

文件修改完成，如果直接双击helloworld.html，会报错

这是因为网站需要通过发布才能正常运行，可选择地发布工具有很多，nodejs，php，iis…等，这里我使用了php来发布,
打开命令行工具，定位到cesium-test目录，执行php -S localhost:4111 (不一定非要写4111，端口号的范围从0到65535，尽量不要使用一些特定的端口，比如用于浏览网页服务的80端口，用于FTP服务的21端口等)

➜  cesium-test php -S localhost:4111
PHP 7.1.7 Development Server started at Sun Dec 24 20:42:17 2017
Listening on http://localhost:4111
Document root is /Users/elusive/Documents/githubs/cesium-test
Press Ctrl-C to quit.

打开浏览器，输入localhost:4111，就能看到熟悉的helloworld界面

代码库拉取代码搭建环境

到现在还有朋友说卡在这步，无法搭建环境，所以我新建了个代码库，里面是最简环境的代码，

请提前安装 node，yarn

打开命令行，依次执行命令：

git clone https://gitee.com/HQCode/CesiumXinEnv.git
cd CesiumXinEnv
yarn install
npm run start

执行完最后一句，会自动打开浏览器，显示三维球

可参考视频:

下一节我们来 介绍界面及小控件隐藏

最近红包有点大~~

53 thoughts to “cesium编程入门(三)开始使用cesium开发”

  1. 小白一只，不是很懂。要是能够针对我们这小小白出一些更加 详细的教程或者开一个视频课，帮助我们入门就更好了。

  4. 创建html语句时，路径只需要删除一个点，
    ../是根目录下两级
    ./是根目录
    /就会报错（我写的会报错，不清楚是不是我搞错了）

    1. 默认是bing地图，cesium不是最新版本的话，都需要自己申请bing map的key.
      你可以点击右上角问号左边的按钮，选择一个别的在线地图

  10. An error occurred while rendering. Rendering has stopped.
    SecurityError: The operation is insecure.
    _@file:///E:/HL/Build/Cesium/Cesium.js:500:1988
    k.prototype.update@file:///E:/HL/Build/Cesium/Cesium.js:500:26932
    w.prototype.update@file:///E:/HL/Build/Cesium/Cesium.js:535:12613
    f.prototype.update@file:///E:/HL/Build/Cesium/Cesium.js:541:2242
    Ze@file:///E:/HL/Build/Cesium/Cesium.js:545:11818
    it@file:///E:/HL/Build/Cesium/Cesium.js:545:16452
    we.prototype.render@file:///E:/HL/Build/Cesium/Cesium.js:545:24414
    A.prototype.render@file:///E:/HL/Build/Cesium/Cesium.js:557:17428
    t@file:///E:/HL/Build/Cesium/Cesium.js:557:5269

    用node.JS发布后出现了这个错误，百度了很久，也没有解决

  14. An error occurred while rendering. Rendering has stopped.
    SecurityError: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.
    Error: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.
    at new _ (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:500:1988)
    at k.update (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:500:26932)
    at w.update (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:535:12613)
    at f.update (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:541:2242)
    at Ze (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:545:11818)
    at it (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:545:16452)
    at we.render (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:545:24412)
    at A.render (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:557:17428)
    at t (file:///E:/cesium-demo/Cesium-test1/Build/Cesium/Cesium.js:557:5269)
    node之后怎么还是这样

    1. 用离线的球，或者用最新的包，或者换token
      离线球的代码：

      var viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: new Cesium.TileMapServiceImageryProvider({
      url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
      })
      });

        1. var viewer = new Cesium.Viewer(“cesiumContainer”, {
          imageryProvider: new Cesium.TileMapServiceImageryProvider({
          url: Cesium.buildModuleUrl(“Assets/Textures/NaturalEarthII”),
          })
          });


    1. var viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: new Cesium.TileMapServiceImageryProvider({
      url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
      }),
      baseLayerPicker: false,
      geocoder: false,
      });

发表评论