利用Cesium创建一个earth

IT小鹏

已于 2022-10-18 17:18:51 修改

阅读量796

点赞数

分类专栏： cesium 文章标签： vue.js javascript

于 2021-09-16 17:55:12 首次发布

本文链接：https://blog.csdn.net/qq_45987428/article/details/120326596

版权

cesium 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

目标：创建第一个球和在球上面做好点线面和图片
创建项目之前先下载：
下载 vue脚手架 vue cli 4.0+

1 node_modes 文件夹下创建 earthsdk 文件夹放入开发包（这里面earthsdk文件在星天地培训文件中可以找到）
在这里插入图片描述

并在开发包的dist文件夹的XbsjEarth-Plugins文件下创建threejs 文件夹
放入three.min.js

2脚手架根目录创建 vue.config.js 文件写入如下内容

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    configureWebpack: config => {
        const cwp = new CopyWebpackPlugin([
            {
                from: './node_modules/cesium/Build/Cesium', // 调试时，将Cesium换成CesiumUnminified
                to: 'js/Cesium',
                toType: 'dir'
            },
            {
                from: './node_modules/earthsdk/dist/XbsjCesium',
                to: 'js/earthsdk/XbsjCesium',
                toType: 'dir'
            },
            {
                from: './node_modules/earthsdk/dist/XbsjEarth',
                to: 'js/earthsdk/XbsjEarth',
                toType: 'dir'
            },
        ]);
        config.plugins.push(cwp);
    }
}

3 再main.js 修改vue加载顺序
等待earth相关js加载完毕再去加载vue实例

 import Vue from 'vue'
 import App from './App.vue'
 Vue.config.productionTip = false
// new Vue({
//   render: h => h(App),
// }).$mount('#app')
if (typeof XE !== "undefined") {
  //如果XE存在，说明EarthSDK已载入
  //eslint-disable-next-line no-console
  console.log("当前正在使用EarthSDK开发！");
  /**eslint-disable  
   * 
  */
  function startup() {
    new Vue({
      render: h => h(App),
    }).$mount('#app')
  }
  //1 XE.ready()会加载Cesium.js 等其他资源，注意ready（）返回一个Promis对象。
  XE.ready().then(() =>{
    //加载标绘插件
    return XE.HTML.loadJS('.js/earthsdk/dist/XbsjEarth-Plugins/plottingSymbol/plottingSymbol.js');
  }).then(() =>{
    //加载标绘插件
    return XE.HTML.loadJS('.js/earthsdk/dist/XbsjEarth-Plugins/plottingSymbol2/plottingSymbol2.js');
   // return XE.HTML.loadJS('earth_test\node_modules\earthsdk\dist\XbsjEarth-Plugins\plottingSymbol2\plottingSymbol2.js');
  }).then(() =>{
    //加载标绘插件
    return XE.HTML.loadJS('.js/earthsdk/dist/XbsjEarth-Plugins/customPrimitive/customPrimitive.js');
  }).then(() =>{
    //加载标绘插件
    return XE.HTML.loadJS('.js/earthsdk/dist/XbsjEarth-Plugins/customPrimitiveImage/customPrimitiveImage.js');
  }).then(() =>{
    //加载webgl
    return XE.HTML.loadJS('.js/earthsdk/dist/XbsjEarth-Plugins/threejs/three.min.js');
  }).then(() =>{
    startup()
  });
}else if (typeof Cesium !== 'undefined'){
  //如果XE不存在，存在Cesium，则此时用纯Cesium进行开发
  console.log('当前正在使用Cesium开发！')
  new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')
}

4 Public下的index.html 引入earthsdk.js

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>地球</title>
 
  <!--强制提前加载Cesium.js， 其中Cesium相关路径可以换成自定义的-->
  <!--<script src="./js/Cesium/Cesium.js"><script>-->
  <!--<link rel="stylesheet" href="./js/Cesium/Widgets/widgets.css">-->
  <!--使用EarthSDK进行开发-->
  <script type="text/javascript" src="./js/earthsdk/XbsjEarth/XbsjEarth.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    #app {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5 编写earth地图组件

<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; heitht: 100%"></div>
  </div>
</template>
<script>
/**eslint-disable */
//1 创建Earth的vue组件
var EarthComp = {
  data() {
    return {
      _earth: undefined,
      //注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
    };
  },
  //1.1 资源创建
  mounted() {
    //1.1.1 创建地球
    var earth = new XE.Earth(this.$refs.earthContainer);
    //1.1.2添加默认地球影像
    earth.sceneTree.root = {
      children: [
        {
          czmObject: {
            name: "默认离线影像",
            xbsjType: "Imagery",
            xbsjImageryProvider: {
              createTileMapServiceImageryProvider: {
                url: XE.HTML.cesiumDir + "Assets/Textures/NaturalEarthII",
                fileExtension: "jpg",
              },
              type: "createTileMapServiceImageryProvider",
            },
          },
        },
      ],
    };
    this._earth = earth;
    //仅为调试方便用
    window.earth = earth;
    //点
    earth.czm.viewer.entities.add({
      polyline: {
        // fromDegrees返回给定的经度和纬度值数组（以度为单位），该数组由Cartesian3位置组成。
        positions: Cesium.Cartesian3.fromDegreesArray([
          120.9677706, 30.7985748, 110.2, 34.55,
        ]),
        // 宽度
        width: 2,
        // 线的颜色
        material: Cesium.Color.WHITE,
        // 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
        zIndex: 10,
        // 是否显示
        show: true,
      },
    });
    //线
    //entities.add(entity)
    earth.czm.viewer.entities.add({
      // fromDegrees（经度，纬度，高度，椭球，结果）从以度为单位的经度和纬度值返回Cartesian3位置
      position: Cesium.Cartesian3.fromDegrees(108, 34, 10),
      point: {
        // 点的大小（像素）
        pixelSize: 5,
        // 点位颜色，fromCssColorString 可以直接使用CSS颜色
        color: Cesium.Color.fromCssColorString("#ee0000"),
        // 边框颜色
        outlineColor: Cesium.Color.fromCssColorString("#fff"),
        // 边框宽度(像素)
        outlineWidth: 2,
        // 是否显示
        show: true,
      },
    });
    //面
    earth.czm.viewer.entities.add({
      polygon: {
        // 获取指定属性（positions，holes（图形内需要挖空的区域））
        hierarchy: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            120.9677706, 30.7985748, 110.2, 34.55, 120.2, 50.55,
          ]),
          holes: [
            {
              positions: Cesium.Cartesian3.fromDegreesArray([
                119, 32, 115, 34, 119, 40,
              ]),
            },
          ],
        },
        // 边框
        outline: true,
        // 边框颜色
        outlineColor: Cesium.Color.RED,
        // 边框尺寸
        outlineWidth: 4,
        // 填充的颜色，withAlpha透明度
        material: Cesium.Color.GREEN.withAlpha(0.5),
        // 是否被提供的材质填充
        fill: true,
        // 恒定高度
        height: 5000,
        // 显示在距相机的距离处的属性，多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          1000,
          10000000
        ),
        // 是否显示
        show: true,
        // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
        zIndex: 10,
      },
    });
    // 这是一个图片
    earth.czm.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
      billboard: {
        image: require("../assets/logo.png"),
      },
    });
  },
  //1.2资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  },
};
export default EarthComp;
</script>

创建earth的gitee地址
https://gitee.com/gongsaipeng/earth.git

提供几个学习cesium的网站，可以看着网站的例子进行操作
EarthSDk 官网 http://earthsdk.com

EarthSDk
API http://earthsdk.com/#/help

EarthSDk 案例
http://earthsdk.com/v/last/Apps/Examples/?menu=true&url=./startup-createEarth.html

IT小鹏

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用Cesium创建一个earth

目标：创建第一个球和在球上面做好点线面和图片创建项目之前先下载：下载 vue脚手架 vue cli 4.0+1 node_modes 文件夹下创建 earthsdk 文件夹放入开发包（这里面earthsdk文件在星天地培训文件中可以找到）并在开发包的dist文件夹的XbsjEarth-Plugins文件下创建threejs 文件夹放入three.min.js2脚手架根目录创建 vue.config.js 文件写入如下内容// vue.config.jsconst CopyWebpa
复制链接

扫一扫