目标:创建第一个球和在球上面做好点线面和图片
创建项目之前先下载:
下载 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