https://blog.gmem.cc/cesium-study-note
Cesium简介
Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。
Cesium支持多种数据可视化方式，可以绘制各种几何图形、导入图片，甚至3D模型。同时，Cesium还支持基于时间轴的动态数据展示，例如，我们可以用它绘制卫星运行轨迹。
Cesium HelloWorld
下面的例子在浏览器中显示一个太空背景、具有地图覆盖的3D地球：
<div id="crayon-619d90c449e72999201336" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title">index.html</span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-mixed-highlight" title="Contains Mixed Languages"></span><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">XHTML</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449e72999201336-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-2">2</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-4">4</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-6">6</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-8">8</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-10">10</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-12">12</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-14">14</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-16">16</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-18">18</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-20">20</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-22">22</div><div class="crayon-num" data-line="crayon-619d90c449e72999201336-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e72999201336-24">24</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449e72999201336-1"><span class="crayon-n"><!DOCTYPE html></span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-2"><span class="crayon-r "><html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-3"><span class="crayon-r "><head></span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-4"><span class="crayon-r "><meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"utf-8"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-5"><span class="crayon-r "><meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"IE=Edge,chrome=1"</span><span class="crayon-r ">></span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-6"><span class="crayon-r "><meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-7"><span class="crayon-r "><title></span><span class="crayon-i ">Cesium Example</span><span class="crayon-r "></title></span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-8"><span class="crayon-i "><span class="crayon-ta"><script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"Cesium-1.7.1/Build/CesiumUnminified/Cesium.js"</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-9"><span class="crayon-r "><link </span><span class="crayon-e ">rel</span><span class="crayon-o">=</span><span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s ">"text/css"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"Cesium-1.7.1/Build/CesiumUnminified/Widgets/widgets.css"</span><span class="crayon-r ">></span><span class="crayon-r "></link></span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-10"><span class="crayon-i "><span class="crayon-ta"><style></span></span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-11"><span class="crayon-k ">html,body,#cesiumContainer </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-12"><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-13"><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-14"><span class="crayon-h"> </span><span class="crayon-e ">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-15"><span class="crayon-h"> </span><span class="crayon-e ">padding</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-16"><span class="crayon-h"> </span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">hidden</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-17"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-18"><span class="crayon-ta"></style></span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-19"><span class="crayon-r "></head></span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-20"><span class="crayon-r "><body></span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-21"><span class="crayon-i "> </span><span class="crayon-r "><div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"cesiumContainer"</span><span class="crayon-r ">></span><span class="crayon-r "></div></span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-22"><span class="crayon-i "> <span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"index.js"</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></span></div><div class="crayon-line" id="crayon-619d90c449e72999201336-23"><span class="crayon-r "></body></span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e72999201336-24"><span class="crayon-r "></html></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<div id="crayon-619d90c449e7b627233022" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title">index.js</span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-2">2</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-4">4</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-6">6</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-8">8</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-10">10</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-12">12</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-14">14</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-16">16</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-18">18</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-20">20</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-22">22</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-24">24</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-26">26</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-28">28</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-30">30</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-32">32</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-34">34</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-36">36</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-38">38</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-40">40</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-42">42</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-44">44</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-46">46</div><div class="crayon-num" data-line="crayon-619d90c449e7b627233022-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e7b627233022-48">48</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449e7b627233022-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-2"><span class="crayon-h"> </span><span class="crayon-v">animation</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否创建动画小器件，左下角仪表</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-3"><span class="crayon-h"> </span><span class="crayon-v">baseLayerPicker</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示图层选择器</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-4"><span class="crayon-h"> </span><span class="crayon-v">fullscreenButton</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示全屏按钮</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-5"><span class="crayon-h"> </span><span class="crayon-v">geocoder</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示geocoder小器件，右上角查询按钮</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-6"><span class="crayon-h"> </span><span class="crayon-v">homeButton</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示Home按钮</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-7"><span class="crayon-h"> </span><span class="crayon-v">infoBox</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示信息框</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-8"><span class="crayon-h"> </span><span class="crayon-v">sceneModePicker</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示3D/2D选择器</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-9"><span class="crayon-h"> </span><span class="crayon-v">selectionIndicator</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示选取指示器组件</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-10"><span class="crayon-h"> </span><span class="crayon-v">timeline</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示时间轴</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-11"><span class="crayon-h"> </span><span class="crayon-v">navigationHelpButton</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//是否显示右上角的帮助按钮</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-12"><span class="crayon-h"> </span><span class="crayon-v">scene3DOnly</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span><span class="crayon-c">//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-13"><span class="crayon-h"> </span><span class="crayon-v">clock</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Clock</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-c">//用于控制当前时间的时钟对象</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-14"><span class="crayon-h"> </span><span class="crayon-v">selectedImageryProviderViewModel</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">undefined</span><span class="crayon-sy">,</span><span class="crayon-c">//当前图像图层的显示模型，仅baseLayerPicker设为true有意义</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-15"><span class="crayon-h"> </span><span class="crayon-v">imageryProviderViewModels</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">createDefaultImageryProviderViewModels</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-c">//可供BaseLayerPicker选择的图像图层ProviderViewModel数组</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-16"><span class="crayon-h"> </span><span class="crayon-v">selectedTerrainProviderViewModel</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">undefined</span><span class="crayon-sy">,</span><span class="crayon-c">//当前地形图层的显示模型，仅baseLayerPicker设为true有意义</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-17"><span class="crayon-h"> </span><span class="crayon-v">terrainProviderViewModels</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">createDefaultTerrainProviderViewModels</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-c">//可供BaseLayerPicker选择的地形图层ProviderViewModel数组</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-18"><span class="crayon-h"> </span><span class="crayon-v">imageryProvider</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">OpenStreetMapImageryProvider</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-19"><span class="crayon-h"> </span><span class="crayon-v">credit</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-s">''</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-20"><span class="crayon-h"> </span><span class="crayon-v">url</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'//192.168.0.89:5539/planet-satellite/'</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-21"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-c">//图像图层提供者，仅baseLayerPicker设为false有意义</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-22"><span class="crayon-h"> </span><span class="crayon-v">terrainProvider</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">EllipsoidTerrainProvider</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-c">//地形图层提供者，仅baseLayerPicker设为false有意义</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-23"><span class="crayon-h"> </span><span class="crayon-v">skyBox</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">SkyBox</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-24"><span class="crayon-h"> </span><span class="crayon-v">sources</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-25"><span class="crayon-h"> </span><span class="crayon-v">positiveX</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Cesium-1.7.1/Skybox/px.jpg'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-26"><span class="crayon-h"> </span><span class="crayon-v">negativeX</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Cesium-1.7.1/Skybox/mx.jpg'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-27"><span class="crayon-h"> </span><span class="crayon-v">positiveY</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Cesium-1.7.1/Skybox/py.jpg'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-28"><span class="crayon-h"> </span><span class="crayon-v">negativeY</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Cesium-1.7.1/Skybox/my.jpg'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-29"><span class="crayon-h"> </span><span class="crayon-v">positiveZ</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Cesium-1.7.1/Skybox/pz.jpg'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-30"><span class="crayon-h"> </span><span class="crayon-v">negativeZ</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Cesium-1.7.1/Skybox/mz.jpg'</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-31"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-32"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-c">//用于渲染星空的SkyBox对象</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-33"><span class="crayon-h"> </span><span class="crayon-v">fullscreenElement</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-v">body</span><span class="crayon-sy">,</span><span class="crayon-c">//全屏时渲染的HTML元素,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-34"><span class="crayon-h"> </span><span class="crayon-v">useDefaultRenderLoop</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span><span class="crayon-c">//如果需要控制渲染循环，则设为true</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-35"><span class="crayon-h"> </span><span class="crayon-v">targetFrameRate</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">undefined</span><span class="crayon-sy">,</span><span class="crayon-c">//使用默认render loop时的帧率</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-36"><span class="crayon-h"> </span><span class="crayon-v">showRenderLoopErrors</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-c">//如果设为true，将在一个HTML面板中显示错误信息</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-37"><span class="crayon-h"> </span><span class="crayon-v">automaticallyTrackDataSourceClocks</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span><span class="crayon-c">//自动追踪最近添加的数据源的时钟设置</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-38"><span class="crayon-h"> </span><span class="crayon-v">contextOptions</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">undefined</span><span class="crayon-sy">,</span><span class="crayon-c">//传递给Scene对象的上下文参数（scene.options）</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-39"><span class="crayon-h"> </span><span class="crayon-v">sceneMode</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">SceneMode</span><span class="crayon-sy">.</span><span class="crayon-v">SCENE3D</span><span class="crayon-sy">,</span><span class="crayon-c">//初始场景模式</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-40"><span class="crayon-h"> </span><span class="crayon-v">mapProjection</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">WebMercatorProjection</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-c">//地图投影体系</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-41"><span class="crayon-h"> </span><span class="crayon-v">dataSources</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">DataSourceCollection</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-42"><span class="crayon-h"> </span><span class="crayon-c">//需要进行可视化的数据源的集合</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-43"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-44"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-45"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">canvas</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">canvas</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-46"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">clock</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">clock</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e7b627233022-47"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">camera</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e7b627233022-48"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">entities</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
可以加快时间的运行，并且模拟日光照射效果：
<div id="crayon-619d90c449e81323238777" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title">index.js</span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449e81323238777-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e81323238777-2">2</div><div class="crayon-num" data-line="crayon-619d90c449e81323238777-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e81323238777-4">4</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449e81323238777-1"><span class="crayon-c">//加快时钟的运行</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e81323238777-2"><span class="crayon-v">clock</span><span class="crayon-sy">.</span><span class="crayon-v">multiplier</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">0.1</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-cn">60</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-cn">60</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e81323238777-3"><span class="crayon-c">//阳光照射区域高亮</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e81323238777-4"><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">globe</span><span class="crayon-sy">.</span><span class="crayon-v">enableLighting</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
通过以下代码，可以设置镜头位置与指向，Cesium的Camera对象提供了多种操控镜头的方法：
<div id="crayon-619d90c449e86625762805" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title">index.js</span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449e86625762805-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-2">2</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-4">4</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-6">6</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-8">8</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-10">10</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-12">12</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-14">14</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-16">16</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-18">18</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-20">20</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-22">22</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-24">24</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-26">26</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-28">28</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-30">30</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-32">32</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-34">34</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-36">36</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-38">38</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-40">40</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-42">42</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-44">44</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-46">46</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-48">48</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-49">49</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-50">50</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-51">51</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-52">52</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-53">53</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-54">54</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-55">55</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-56">56</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-57">57</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-58">58</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-59">59</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-60">60</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-61">61</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-62">62</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-63">63</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-64">64</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-65">65</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-66">66</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-67">67</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-68">68</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-69">69</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-70">70</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-71">71</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-72">72</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-73">73</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-74">74</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-75">75</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-76">76</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-77">77</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-78">78</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-79">79</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-80">80</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-81">81</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-82">82</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-83">83</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-84">84</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-85">85</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-86">86</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-87">87</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-88">88</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-89">89</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-90">90</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-91">91</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-92">92</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-93">93</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-94">94</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-95">95</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-96">96</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-97">97</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-98">98</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-99">99</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-100">100</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-101">101</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-102">102</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-103">103</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-104">104</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-105">105</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-106">106</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-107">107</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e86625762805-108">108</div><div class="crayon-num" data-line="crayon-619d90c449e86625762805-109">109</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449e86625762805-1"><span class="crayon-c">//设置镜头位置与方向</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-2"><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">setView</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-3"><span class="crayon-h"> </span><span class="crayon-c">//镜头的经纬度、高度。镜头默认情况下，在指定经纬高度俯视（pitch=-90）地球</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-4"><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">116.3</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">39.9</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">100000000</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-c">//北京100000公里上空</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-5"><span class="crayon-h"> </span><span class="crayon-c">//下面的几个方向正好反映默认值</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-6"><span class="crayon-h"> </span><span class="crayon-v">heading</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-7"><span class="crayon-h"> </span><span class="crayon-v">pitch</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">90</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-8"><span class="crayon-h"> </span><span class="crayon-v">roll</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-9"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-10"><span class="crayon-c">//让镜头飞行（动画）到某个地点和方向</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-11"><span class="crayon-r">setTimeout</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-12"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-13"><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">flyTo</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-14"><span class="crayon-h"> </span><span class="crayon-v">destination</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">116</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">15</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">6000000</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-15"><span class="crayon-h"> </span><span class="crayon-v">orientation</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-16"><span class="crayon-h"> </span><span class="crayon-v">heading</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">15</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-17"><span class="crayon-h"> </span><span class="crayon-v">pitch</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">65</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-18"><span class="crayon-h"> </span><span class="crayon-v">roll</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-19"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-20"><span class="crayon-h"> </span><span class="crayon-v">duration</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-c">//动画持续时间</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-21"><span class="crayon-h"> </span><span class="crayon-v">complete</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-c">//飞行完毕后执行的动作</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-22"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-23"><span class="crayon-h"> </span><span class="crayon-e">addEntities</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-24"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-25"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-26"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1000</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-27"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-28"><span class="crayon-c">//监听键盘事件，用于平移或者旋转镜头</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-29"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">ellipsoid</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">globe</span><span class="crayon-sy">.</span><span class="crayon-v">ellipsoid</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-30"><span class="crayon-v">canvas</span><span class="crayon-sy">.</span><span class="crayon-v">onclick</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-31"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-32"><span class="crayon-h"> </span><span class="crayon-v">canvas</span><span class="crayon-sy">.</span><span class="crayon-e">focus</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-33"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-34"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-35"><span class="crayon-h"> </span><span class="crayon-v">looking</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-36"><span class="crayon-h"> </span><span class="crayon-v">rotateLeft</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-37"><span class="crayon-h"> </span><span class="crayon-v">rotateRight</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-38"><span class="crayon-h"> </span><span class="crayon-v">moveUp</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-39"><span class="crayon-h"> </span><span class="crayon-v">moveDown</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-40"><span class="crayon-h"> </span><span class="crayon-v">moveLeft</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-41"><span class="crayon-h"> </span><span class="crayon-v">moveRight</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-42"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-43"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">handler</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">ScreenSpaceEventHandler</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">canvas</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-44"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">getFlagForKeyCode</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">keyCode</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-45"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-46"><span class="crayon-h"> </span><span class="crayon-st">switch</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">keyCode</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-47"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-48"><span class="crayon-h"> </span><span class="crayon-st">case</span><span class="crayon-h"> </span><span class="crayon-s">'W'</span><span class="crayon-sy">.</span><span class="crayon-e">charCodeAt</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-c">//向下平移镜头</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-49"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'moveDown'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-50"><span class="crayon-h"> </span><span class="crayon-st">case</span><span class="crayon-h"> </span><span class="crayon-s">'S'</span><span class="crayon-sy">.</span><span class="crayon-e">charCodeAt</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-c">//向上平移镜头</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-51"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'moveUp'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-52"><span class="crayon-h"> </span><span class="crayon-st">case</span><span class="crayon-h"> </span><span class="crayon-s">'A'</span><span class="crayon-sy">.</span><span class="crayon-e">charCodeAt</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-c">//向右平移镜头</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-53"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'moveRight'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-54"><span class="crayon-h"> </span><span class="crayon-st">case</span><span class="crayon-h"> </span><span class="crayon-s">'D'</span><span class="crayon-sy">.</span><span class="crayon-e">charCodeAt</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-c">//向左平移镜头</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-55"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'moveLeft'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-56"><span class="crayon-h"> </span><span class="crayon-st">case</span><span class="crayon-h"> </span><span class="crayon-s">'Q'</span><span class="crayon-sy">.</span><span class="crayon-e">charCodeAt</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-c">//向右旋转镜头</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-57"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'rotateRight'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-58"><span class="crayon-h"> </span><span class="crayon-st">case</span><span class="crayon-h"> </span><span class="crayon-s">'E'</span><span class="crayon-sy">.</span><span class="crayon-e">charCodeAt</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-c">//向左旋转镜头</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-59"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'rotateLeft'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-60"><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-o">:</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-61"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">undefined</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-62"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-63"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-64"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'keydown'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">e</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-65"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-66"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">flagName</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">getFlagForKeyCode</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">e</span><span class="crayon-sy">.</span><span class="crayon-i">keyCode</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-67"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">typeof</span><span class="crayon-h"> </span><span class="crayon-v">flagName</span><span class="crayon-h"> </span><span class="crayon-o">!==</span><span class="crayon-h"> </span><span class="crayon-s">'undefined'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-68"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-69"><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-sy">[</span><span class="crayon-v">flagName</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-70"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-71"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-72"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'keyup'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">e</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-73"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-74"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">flagName</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">getFlagForKeyCode</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">e</span><span class="crayon-sy">.</span><span class="crayon-i">keyCode</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-75"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">typeof</span><span class="crayon-h"> </span><span class="crayon-v">flagName</span><span class="crayon-h"> </span><span class="crayon-o">!==</span><span class="crayon-h"> </span><span class="crayon-s">'undefined'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-76"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-77"><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-sy">[</span><span class="crayon-v">flagName</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-78"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-79"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-80"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">clock</span><span class="crayon-sy">.</span><span class="crayon-v">onTick</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">clock</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-81"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-82"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">cameraHeight</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">ellipsoid</span><span class="crayon-sy">.</span><span class="crayon-e">cartesianToCartographic</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-i">position</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">height</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-83"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">moveRate</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">cameraHeight</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-cn">100.0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-84"> </div><div class="crayon-line" id="crayon-619d90c449e86625762805-85"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-sy">.</span><span class="crayon-i">rotateLeft</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-86"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-87"><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">rotateLeft</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0.01</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-88"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-89"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-sy">.</span><span class="crayon-i">rotateRight</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-90"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-91"><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">rotateRight</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0.01</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-92"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-93"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-sy">.</span><span class="crayon-i">moveUp</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-94"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-95"><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">moveUp</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">moveRate</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-96"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-97"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-sy">.</span><span class="crayon-i">moveDown</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-98"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-99"><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">moveDown</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">moveRate</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-100"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-101"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-sy">.</span><span class="crayon-i">moveLeft</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-102"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-103"><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">moveLeft</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">moveRate</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-104"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-105"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">flags</span><span class="crayon-sy">.</span><span class="crayon-i">moveRight</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-106"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-107"><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">moveRight</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">moveRate</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e86625762805-108"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e86625762805-109"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
可以添加若干实体，实体可以用于组织多个可视化对象，下面的例子模拟了卫星波束的覆盖范围：
<div id="crayon-619d90c449e8b706896928" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title">index.js</span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-2">2</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-4">4</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-6">6</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-8">8</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-10">10</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-12">12</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-14">14</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-16">16</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-18">18</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-20">20</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-22">22</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-24">24</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-26">26</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-28">28</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-30">30</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-32">32</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-34">34</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-36">36</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-38">38</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-40">40</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-42">42</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-44">44</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-46">46</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-48">48</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-49">49</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-50">50</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-51">51</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-52">52</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-53">53</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-54">54</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-55">55</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-56">56</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-57">57</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-58">58</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-59">59</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-60">60</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-61">61</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-62">62</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-63">63</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-64">64</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-65">65</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-66">66</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-67">67</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-68">68</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-69">69</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-70">70</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-71">71</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-72">72</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-73">73</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-74">74</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-75">75</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-76">76</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-77">77</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-78">78</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-79">79</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-80">80</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-81">81</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-82">82</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-83">83</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-84">84</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-85">85</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-86">86</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-87">87</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-88">88</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-89">89</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-90">90</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-91">91</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-92">92</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-93">93</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-94">94</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-95">95</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-96">96</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-97">97</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-98">98</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-99">99</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-100">100</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-101">101</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-102">102</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-103">103</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-104">104</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-105">105</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-106">106</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-107">107</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-108">108</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-109">109</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-110">110</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-111">111</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-112">112</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-113">113</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-114">114</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-115">115</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-116">116</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-117">117</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-118">118</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-119">119</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-120">120</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-121">121</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-122">122</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-123">123</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-124">124</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-125">125</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-126">126</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-127">127</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-128">128</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-129">129</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e8b706896928-130">130</div><div class="crayon-num" data-line="crayon-619d90c449e8b706896928-131">131</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449e8b706896928-1"><span class="crayon-c">/**</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-2"><span class="crayon-c"> * 根据偏移量计算目标点经纬度</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-3"><span class="crayon-c"> * @param {} start 起始点经纬度数组，单位度</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-4"><span class="crayon-c"> * @param {} offset 东北方向的偏移量，单位米</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-5"><span class="crayon-c"> * @param {} 目标点经纬度数组，单位度</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-6"><span class="crayon-c"> */</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-7"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">offsetToLongLat</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">start</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">offset</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-8"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-9"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">er</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">6378137</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-10"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">lat</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">parseFloat</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">start</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-11"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">lon</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">parseFloat</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">start</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-12"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">dn</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">parseFloat</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">offset</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-13"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">de</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">parseFloat</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">offset</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-14"> </div><div class="crayon-line" id="crayon-619d90c449e8b706896928-15"><span class="crayon-h"> </span><span class="crayon-v">dLat</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">dn</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-v">er</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-16"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pi</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-v">PI</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-17"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">dLon</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">de</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">er</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">cos</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">pi</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-v">lat</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-cn">180</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-18"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-19"><span class="crayon-h"> </span><span class="crayon-v">lon</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">dLon</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-cn">180</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-v">pi</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">lat</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">dLat</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-cn">180</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-i">pi</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-20"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-21"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-22"><span class="crayon-c">/**</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-23"><span class="crayon-c"> * 通过绘制三角形模拟卫星光束效果</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-24"><span class="crayon-c"> * @param {} entities 实体集</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-25"><span class="crayon-c"> * @param {} stltPos 卫星三维坐标数组</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-26"><span class="crayon-c"> * @param {} points 地面点</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-27"><span class="crayon-c"> * @param {} color CSS颜色代码，例如#FF0000</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-28"><span class="crayon-c"> */</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-29"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">lightShinePolygon</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">entities</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">stltPos</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-30"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-31"><span class="crayon-h"> </span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">+=</span><span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-32"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-33"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-34"><span class="crayon-h"> </span><span class="crayon-v">stltPos</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">stltPos</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">stltPos</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-35"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-36"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-h"> </span><span class="crayon-o">==</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">.</span><span class="crayon-i">length</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-37"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-38"><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-39"><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-40"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-41"><span class="crayon-h"> </span><span class="crayon-st">else</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-42"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-43"><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-44"><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">3</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-45"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-46"><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-47"><span class="crayon-h"> </span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-48"><span class="crayon-h"> </span><span class="crayon-v">polygon</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-49"><span class="crayon-h"> </span><span class="crayon-v">hierarchy</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegreesArrayHeights</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-50"><span class="crayon-h"> </span><span class="crayon-v">perPositionHeight</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-51"><span class="crayon-h"> </span><span class="crayon-v">outline</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-52"><span class="crayon-h"> </span><span class="crayon-v">material</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromAlpha</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromCssColorString</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-cn">1</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-53"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-54"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-55"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-56"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-57"><span class="crayon-c">/**</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-58"><span class="crayon-c"> * 添加实体</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-59"><span class="crayon-c"> */</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-60"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">addEntities</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-61"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-62"><span class="crayon-h"> </span><span class="crayon-c">//卫星一</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-63"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-64"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">stltPos</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-65"><span class="crayon-h"> </span><span class="crayon-cn">110.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">40.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">2500000</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-66"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-67"><span class="crayon-h"> </span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-68"><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-v">fromDegrees</span><span class="crayon-sy">.</span><span class="crayon-e">apply</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">stltPos</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-69"><span class="crayon-h"> </span><span class="crayon-v">billboard</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-70"><span class="crayon-h"> </span><span class="crayon-v">image</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'images/satellite-1.png'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-71"><span class="crayon-h"> </span><span class="crayon-v">horizontalOrigin</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">HorizontalOrigin</span><span class="crayon-sy">.</span><span class="crayon-v">CENTER</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-72"><span class="crayon-h"> </span><span class="crayon-v">verticalOrigin</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">VerticalOrigin</span><span class="crayon-sy">.</span><span class="crayon-v">BOTTOM</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//垂直方向位置计算基准设为底部，默认中心</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-73"><span class="crayon-h"> </span><span class="crayon-v">width</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">92</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-74"><span class="crayon-h"> </span><span class="crayon-v">height</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">36</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-75"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-76"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-77"><span class="crayon-h"> </span><span class="crayon-c">//一个多边形覆盖范围</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-78"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-79"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">color</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'#FF0000'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-80"><span class="crayon-h"> </span><span class="crayon-c">//模拟光照效果的若干多边形</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-81"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-82"><span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">48</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">110</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">40</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">115</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">40</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">120</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">43</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">120</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">55</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-83"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-84"><span class="crayon-h"> </span><span class="crayon-e">lightShinePolygon</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">entities</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">stltPos</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-85"><span class="crayon-h"> </span><span class="crayon-c">//地面多边形</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-86"><span class="crayon-h"> </span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-87"><span class="crayon-h"> </span><span class="crayon-v">polygon</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-88"><span class="crayon-h"> </span><span class="crayon-v">hierarchy</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegreesArray</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">points</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-89"><span class="crayon-h"> </span><span class="crayon-v">outline</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-90"><span class="crayon-h"> </span><span class="crayon-v">outlineColor</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromAlpha</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromCssColorString</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-cn">4</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-91"><span class="crayon-h"> </span><span class="crayon-v">material</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromAlpha</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromCssColorString</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-cn">3</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-92"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-93"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-94"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-95"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-96"><span class="crayon-h"> </span><span class="crayon-c">//一个圆形覆盖范围</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-97"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-98"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">r</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">600000</span><span class="crayon-sy">;</span><span class="crayon-c">//半径</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-99"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">color</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'#0000FF'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-100"><span class="crayon-h"> </span><span class="crayon-c">//圆心</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-101"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">ecLong</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">110.0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-102"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">ecLat</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">30.0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-103"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">ec</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">ecLong</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">ecLat</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-104"><span class="crayon-h"> </span><span class="crayon-c">//模拟光照效果的若干多边形</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-105"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-106"><span class="crayon-h"> </span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-h"> </span><span class="crayon-cn">360</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">+=</span><span class="crayon-h"> </span><span class="crayon-cn">30</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-107"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-108"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">coord</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">offsetToLongLat</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-109"><span class="crayon-h"> </span><span class="crayon-v">ecLong</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">ecLat</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-110"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-111"><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">cos</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-v">PI</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-cn">180</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-v">r</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">sin</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-v">PI</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-cn">180</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-i">r</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-112"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-113"><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">coord</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-114"><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">coord</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-115"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-116"><span class="crayon-h"> </span><span class="crayon-e">lightShinePolygon</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">entities</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">stltPos</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">points</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-117"><span class="crayon-h"> </span><span class="crayon-c">//圆</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-118"><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-119"><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">ec</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-120"><span class="crayon-h"> </span><span class="crayon-v">ellipse</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-121"><span class="crayon-h"> </span><span class="crayon-v">semiMinorAxis</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">r</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-122"><span class="crayon-h"> </span><span class="crayon-v">semiMajorAxis</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">r</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-123"><span class="crayon-h"> </span><span class="crayon-v">height</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">0.0</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-124"><span class="crayon-h"> </span><span class="crayon-v">outline</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-125"><span class="crayon-h"> </span><span class="crayon-v">outlineColor</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromAlpha</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromCssColorString</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-cn">4</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-126"><span class="crayon-h"> </span><span class="crayon-v">material</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromAlpha</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromCssColorString</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-cn">3</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-127"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-128"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-129"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e8b706896928-130"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449e8b706896928-131"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
空间数据可视化
Cesium提供Entity API来绘制空间数据，例如点、标记、标签、线、3D模型、形状、立体形状（volume）。
Entity API简介
Cesium提供两类API：
- 面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识
- 高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、高级别的对象来管理一组相关性的可视化对象，其底层使用Primitive API
下面是Entity API的简单例子，用红色半透明区域标记出美国怀俄明州：
<div id="crayon-619d90c449e93403496494" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449e93403496494-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-2">2</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-4">4</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-6">6</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-8">8</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-10">10</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-12">12</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-14">14</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-16">16</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-18">18</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-20">20</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449e93403496494-22">22</div><div class="crayon-num" data-line="crayon-619d90c449e93403496494-23">23</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449e93403496494-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//创建一个查看器（Viewer widget）</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">wyoming</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//添加一个实体，仅需要传递一个简单JSON对象，返回值是一个Entity对象</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-3"><span class="crayon-h"> </span><span class="crayon-r">name</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Wyoming'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-4"><span class="crayon-h"> </span><span class="crayon-v">polygon</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-5"><span class="crayon-h"> </span><span class="crayon-v">hierarchy</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegreesArray</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-c">//一组地理坐标</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-6"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">109.080842</span><span class="crayon-sy">,</span><span class="crayon-cn">45.002073</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-7"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">105.91517</span><span class="crayon-sy">,</span><span class="crayon-cn">45.002073</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-8"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">104.058488</span><span class="crayon-sy">,</span><span class="crayon-cn">44.996596</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-9"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">104.053011</span><span class="crayon-sy">,</span><span class="crayon-cn">43.002989</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-10"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">104.053011</span><span class="crayon-sy">,</span><span class="crayon-cn">41.003906</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-11"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">105.728954</span><span class="crayon-sy">,</span><span class="crayon-cn">40.998429</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-12"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">107.919731</span><span class="crayon-sy">,</span><span class="crayon-cn">41.003906</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-13"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">109.04798</span><span class="crayon-sy">,</span><span class="crayon-cn">40.998429</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-14"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">111.047063</span><span class="crayon-sy">,</span><span class="crayon-cn">40.998429</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-15"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">111.047063</span><span class="crayon-sy">,</span><span class="crayon-cn">42.000709</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-16"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">111.047063</span><span class="crayon-sy">,</span><span class="crayon-cn">44.476286</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-17"><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">111.05254</span><span class="crayon-sy">,</span><span class="crayon-cn">45.002073</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-18"><span class="crayon-h"> </span><span class="crayon-v">material</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-v">RED</span><span class="crayon-sy">.</span><span class="crayon-e">withAlpha</span><span class="crayon-sy">(</span><span class="crayon-cn">0.5</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//材质</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-19"><span class="crayon-h"> </span><span class="crayon-v">outline</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//是否显示轮廓</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-20"><span class="crayon-h"> </span><span class="crayon-v">outlineColor</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-v">BLACK</span><span class="crayon-h"> </span><span class="crayon-c">//轮廓的颜色</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-21"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449e93403496494-22"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449e93403496494-23"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-e">zoomTo</span><span class="crayon-sy">(</span><span class="crayon-v">wyoming</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//缩放、平移视图使实体可见 </span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
形状与立体（Shapes and Volumes）
支持的形状与立体列表
| 形状 | 代码示例 |
| 立方体 (Boxes) |
|
| 圆和椭圆 (Circles Ellipses) |
|
| 走廊 (Corridor) |
|
| 圆柱和圆锥 (Cylinder Cones) |
|
| 多边形 (Polygons) |
|
| 多段线 (Polylines) |
|
| 多段线体 (Polyline Volumes) |
|
| 矩形 (Rectangles) |
|
| 球和椭球 (Spheres Ellipsoids) |
|
| 墙 (Walls) |
|
材质（Material）与轮廓（Outline）
多数形状均支持通过一致的方式来设置属性、控制外观：
- fill：布尔型，用于指定目标形状是否被填充
- outline：布尔型，用于指定是否绘制形状的边缘
- material：如果fill为true，该属性可以控制填充的材质类型
一个例外是多段线，可以设置outlineWidth 、outlineColor、glowPower 等属性。
高度与拉伸（Extrusion）
所有的形状均默认均是沿着地表的，目前圆形、椭圆、矩形可以在一定高度浮空显示，或者拉伸为Volume。
需要注意：Cesium总是使用米、弧度、秒为度量单位。下面是一个例子：
<div id="crayon-619d90c449ecb178190134" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ecb178190134-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ecb178190134-2">2</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ecb178190134-1"><span class="crayon-v">wyoming</span><span class="crayon-sy">.</span><span class="crayon-v">polygon</span><span class="crayon-sy">.</span><span class="crayon-v">height</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">200000</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//设置高度</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ecb178190134-2"><span class="crayon-v">wyoming</span><span class="crayon-sy">.</span><span class="crayon-v">polygon</span><span class="crayon-sy">.</span><span class="crayon-v">extrudedHeight</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">250000</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//设置拉伸高度</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
在Viewer中可用的Entity特性
除非显式禁用，点击实体后会显示SelectionIndicator小器件，以及一个信息框。通过设置Entity.description，可以在信息框中显示任何HTML内容。
镜头控制
zoomTo方法可以立即定位到某个位置，而flyTo则是通过动画方式转移到某个位置，这两个方法均可以传递EntityCollection对象，并且均是异步方法，返回一个Promises对象
默认情况下，镜头是朝北、45度倾斜查看地球。下面的代码可以让镜头朝东、倾斜三十度查看：
<div id="crayon-619d90c449ecf369913726" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ecf369913726-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ecf369913726-2">2</div><div class="crayon-num" data-line="crayon-619d90c449ecf369913726-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ecf369913726-4">4</div><div class="crayon-num" data-line="crayon-619d90c449ecf369913726-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ecf369913726-6">6</div><div class="crayon-num" data-line="crayon-619d90c449ecf369913726-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ecf369913726-8">8</div><div class="crayon-num" data-line="crayon-619d90c449ecf369913726-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ecf369913726-10">10</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ecf369913726-1"><span class="crayon-c">//镜头顺时针旋转九十度，即东向</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ecf369913726-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">heading</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-cn">90</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ecf369913726-3"><span class="crayon-c">//镜头倾斜30度俯视</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ecf369913726-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pitch</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">30</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ecf369913726-5"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-e">zoomTo</span><span class="crayon-sy">(</span><span class="crayon-v">wyoming</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">HeadingPitchRange</span><span class="crayon-sy">(</span><span class="crayon-v">heading</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">pitch</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">result</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ecf369913726-6"><span class="crayon-h"> </span><span class="crayon-c">//执行完毕后，进行的动作</span></div><div class="crayon-line" id="crayon-619d90c449ecf369913726-7"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">result</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//如果镜头切换成功，则result=true</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ecf369913726-8"><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">selectedEntity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">wyoming</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ecf369913726-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ecf369913726-10"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
有时需要镜头跟踪某个实体（使居中）而不是地球，可以使用如下代码：
<div id="crayon-619d90c449ed3093285329" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ed3093285329-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed3093285329-2">2</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ed3093285329-1"><span class="crayon-v">wyoming</span><span class="crayon-sy">.</span><span class="crayon-v">position</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">107.724</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">42.68</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed3093285329-2"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">trackedEntity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">wyoming</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//跟踪某个实体。如果调用zoomTo、flyTo自动取消跟踪</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
管理Entity
EntityCollection对象是一个从Entity Id到Entity的关联数组，其提供例如add、remove、removeAll之类的常规函数，用于添加或者删除某个Entity：
<div id="crayon-619d90c449ed8888358172" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-2">2</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-4">4</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-6">6</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-8">8</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-10">10</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-12">12</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-14">14</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-16">16</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-18">18</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-20">20</div><div class="crayon-num" data-line="crayon-619d90c449ed8888358172-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ed8888358172-22">22</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ed8888358172-1"><span class="crayon-c">//添加一个实体，并且提供ID</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-2"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-3"><span class="crayon-h"> </span><span class="crayon-v">id</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'182bdba4-2b3e-47ae-bf0b-83f6fde285fd'</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-5"><span class="crayon-c">//获取一个实体</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-6"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">entity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">getById</span><span class="crayon-sy">(</span><span class="crayon-s">'uniqueId'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-7"><span class="crayon-c">//获取一个实体，如果不存在则创建之</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-8"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">entity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">getOrCreateEntity</span><span class="crayon-sy">(</span><span class="crayon-s">'uniqueId'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-9"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-10"><span class="crayon-c">//当添加、删除、修改EntityCollection中的Entity时，可以获得事件通知</span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-11"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">onChanged</span><span class="crayon-sy">(</span><span class="crayon-v">collection</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">added</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">removed</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">changed</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-12"><span class="crayon-h"> </span><span class="crayon-c">//add、removed、changed是增删改的Entity数组</span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-13"><span class="crayon-h"> </span><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-h"> </span><span class="crayon-v">added</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-14"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-15"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-16"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-17"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-v">collectionChanged</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-v">onChanged</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-18"> </div><div class="crayon-line" id="crayon-619d90c449ed8888358172-19"><span class="crayon-c">//大批量操作时，临时禁用事件可以提高性能</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-20"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">suspendEvents</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ed8888358172-21"><span class="crayon-c">//执行各种Entity操作</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ed8888358172-22"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">resumeEvents</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
点、图标和标签
添加一个点、标签或者图标很简单：
<div id="crayon-619d90c449edc529534854" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449edc529534854-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-2">2</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-4">4</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-6">6</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-8">8</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-10">10</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-12">12</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-14">14</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-16">16</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-18">18</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-20">20</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-22">22</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-24">24</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449edc529534854-26">26</div><div class="crayon-num" data-line="crayon-619d90c449edc529534854-27">27</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449edc529534854-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-2"> </div><div class="crayon-line" id="crayon-619d90c449edc529534854-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">citizensBankPark</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-4"><span class="crayon-h"> </span><span class="crayon-r">name</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Citizens Bank Park'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-5"><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">75.166493</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">39.9060534</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-6"><span class="crayon-h"> </span><span class="crayon-v">point</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//点</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-7"><span class="crayon-h"> </span><span class="crayon-v">pixelSize</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">5</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-8"><span class="crayon-h"> </span><span class="crayon-v">color</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-v">RED</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-9"><span class="crayon-h"> </span><span class="crayon-v">outlineColor</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-v">WHITE</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-10"><span class="crayon-h"> </span><span class="crayon-v">outlineWidth</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">2</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-11"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-12"><span class="crayon-h"> </span><span class="crayon-v">label</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//文字标签</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-13"><span class="crayon-h"> </span><span class="crayon-v">text</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Citizens Bank Park'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-14"><span class="crayon-h"> </span><span class="crayon-v">font</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'14pt monospace'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-15"><span class="crayon-h"> </span><span class="crayon-v">style</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">LabelStyle</span><span class="crayon-sy">.</span><span class="crayon-v">FILL_AND_OUTLINE</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-16"><span class="crayon-h"> </span><span class="crayon-v">outlineWidth</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-17"><span class="crayon-h"> </span><span class="crayon-v">verticalOrigin</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">VerticalOrigin</span><span class="crayon-sy">.</span><span class="crayon-v">BOTTOM</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//垂直方向以底部来计算标签的位置</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-18"><span class="crayon-h"> </span><span class="crayon-v">pixelOffset</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Cartesian2</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">9</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-c">//偏移量</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-19"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-20"><span class="crayon-h"> </span><span class="crayon-v">billboard</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//图标</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-21"> <span class="crayon-h"> </span> <span class="crayon-h"> </span> <span class="crayon-h"> </span><span class="crayon-v">image</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'http://localhost:81/images/2015/02-02/Philadelphia_Phillies.png'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-22"> <span class="crayon-h"> </span> <span class="crayon-h"> </span> <span class="crayon-h"> </span><span class="crayon-v">width</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">64</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-23"> <span class="crayon-h"> </span> <span class="crayon-h"> </span> <span class="crayon-h"> </span><span class="crayon-v">height</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">64</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-24"> <span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449edc529534854-25"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449edc529534854-26"> </div><div class="crayon-line" id="crayon-619d90c449edc529534854-27"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-e">zoomTo</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-i">entities</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
3D模型
Cesium支持glTF格式的3D模型，glTF是WebGL、 OpenGL ES、 OpenGL的一种运行时模型格式，在Cesium中创建3D模型很简单：
<div id="crayon-619d90c449ee0604128823" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ee0604128823-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee0604128823-2">2</div><div class="crayon-num" data-line="crayon-619d90c449ee0604128823-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee0604128823-4">4</div><div class="crayon-num" data-line="crayon-619d90c449ee0604128823-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee0604128823-6">6</div><div class="crayon-num" data-line="crayon-619d90c449ee0604128823-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee0604128823-8">8</div><div class="crayon-num" data-line="crayon-619d90c449ee0604128823-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee0604128823-10">10</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ee0604128823-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee0604128823-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">entity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449ee0604128823-3"><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">123.0744619</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">44.0503706</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee0604128823-4"><span class="crayon-h"> </span><span class="crayon-v">model</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449ee0604128823-5"><span class="crayon-h"> </span><span class="crayon-v">uri</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'../../SampleData/models/CesiumGround/Cesium_Ground.gltf'</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee0604128823-6"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449ee0604128823-7"><span class="crayon-h"> </span><span class="crayon-v">scale</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-c">//和原始大小相比的缩放比例</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee0604128823-8"><span class="crayon-h"> </span><span class="crayon-v">minimumPixelSize</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-cn">100</span><span class="crayon-h"> </span><span class="crayon-c">//最小尺寸，防止太小而看不见</span></div><div class="crayon-line" id="crayon-619d90c449ee0604128823-9"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee0604128823-10"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">trackedEntity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">entity</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
默认情况下，模型竖直放置、并且面向东面。可以指定四元组（Quaternion）给Entity.orientation属性，以改变放置的方向：
<div id="crayon-619d90c449ee4947474805" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ee4947474805-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee4947474805-2">2</div><div class="crayon-num" data-line="crayon-619d90c449ee4947474805-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee4947474805-4">4</div><div class="crayon-num" data-line="crayon-619d90c449ee4947474805-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee4947474805-6">6</div><div class="crayon-num" data-line="crayon-619d90c449ee4947474805-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee4947474805-8">8</div><div class="crayon-num" data-line="crayon-619d90c449ee4947474805-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee4947474805-10">10</div><div class="crayon-num" data-line="crayon-619d90c449ee4947474805-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee4947474805-12">12</div><div class="crayon-num" data-line="crayon-619d90c449ee4947474805-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee4947474805-14">14</div><div class="crayon-num" data-line="crayon-619d90c449ee4947474805-15">15</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ee4947474805-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee4947474805-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">123.0744619</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">44.0503706</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//位置</span></div><div class="crayon-line" id="crayon-619d90c449ee4947474805-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">heading</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-cn">45.0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//绕垂直于地心的轴旋转</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee4947474805-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pitch</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-cn">15.0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//绕纬度线旋转</span></div><div class="crayon-line" id="crayon-619d90c449ee4947474805-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">roll</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-cn">0.0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//绕经度线旋转</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee4947474805-6"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">orientation</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Transforms</span><span class="crayon-sy">.</span><span class="crayon-e">headingPitchRollQuaternion</span><span class="crayon-sy">(</span><span class="crayon-v">position</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">heading</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">pitch</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">roll</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ee4947474805-7"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee4947474805-8"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">entity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">entities</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449ee4947474805-9"><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee4947474805-10"><span class="crayon-h"> </span><span class="crayon-v">orientation</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">orientation</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449ee4947474805-11"><span class="crayon-h"> </span><span class="crayon-v">model</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee4947474805-12"><span class="crayon-h"> </span><span class="crayon-v">uri</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'../../SampleData/models/CesiumGround/Cesium_Ground.gltf'</span></div><div class="crayon-line" id="crayon-619d90c449ee4947474805-13"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee4947474805-14"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ee4947474805-15"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">trackedEntity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">entity</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
例子中的heading（yaw）、pitch、roll对应了绕Z（垂直轴）、Y（维度方向）、X（经度方向）进行旋转，正数表示顺时针旋转（由于相对运动，在浏览器上看起来是地球在逆时针旋转），可以参考下图理解（人面向北面，摇头heading、点头pitch、歪头roll）：
属性系统
Cesium提供了一些快捷方式来设置属性，例如outline:true，但是尝试使用e.polygon.outline这样的形式来获取轮廓时，会得到一个ConstantProperty对象，如果不使用快捷方式，则需要编写更多的代码，例如：
<div id="crayon-619d90c449ee8836285397" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ee8836285397-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ee8836285397-2">2</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ee8836285397-1"><span class="crayon-v">polygon</span><span class="crayon-sy">.</span><span class="crayon-v">outline</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">ConstantProperty</span><span class="crayon-sy">(</span><span class="crayon-t">true</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ee8836285397-2"><span class="crayon-v">polygon</span><span class="crayon-sy">.</span><span class="crayon-v">outlineColor</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">ConstantProperty</span><span class="crayon-sy">(</span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-v">BLACK</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
所有属性的实例均是Property的子类型，引入属性类层次而不是使用基本类型的原因是，某些属性是随着时间而变化的。
要得到属性的原始值，需要调用Property.getValue()方法，例如：
<div id="crayon-619d90c449eec226973414" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449eec226973414-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449eec226973414-2">2</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449eec226973414-1"><span class="crayon-c">//获取当前时间点，多边形轮廓是否存在</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449eec226973414-2"><span class="crayon-v">polygon</span><span class="crayon-sy">.</span><span class="crayon-v">outline</span><span class="crayon-sy">.</span><span class="crayon-e">getValue</span><span class="crayon-sy">(</span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">clock</span><span class="crayon-sy">.</span><span class="crayon-v">currentTime</span><span class="crayon-sy">)</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
几何图形与外观
我们可以通过Primitive API来操控几何图形及其外观，或者绘制各种特殊的形状。需要先得到Scene对象，然后在其上添加Primitive对象：
<div id="crayon-619d90c449ef0147969284" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ef0147969284-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef0147969284-2">2</div><div class="crayon-num" data-line="crayon-619d90c449ef0147969284-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef0147969284-4">4</div><div class="crayon-num" data-line="crayon-619d90c449ef0147969284-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef0147969284-6">6</div><div class="crayon-num" data-line="crayon-619d90c449ef0147969284-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef0147969284-8">8</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ef0147969284-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef0147969284-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ef0147969284-3"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef0147969284-4"><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">primitives</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">RectanglePrimitive</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449ef0147969284-5"><span class="crayon-h"> </span><span class="crayon-c">//绘制矩形</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef0147969284-6"><span class="crayon-h"> </span><span class="crayon-v">rectangle</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Rectangle</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">100.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">20.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">90.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">30.0</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449ef0147969284-7"><span class="crayon-h"> </span><span class="crayon-v">material</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Material</span><span class="crayon-sy">.</span><span class="crayon-e">fromType</span><span class="crayon-sy">(</span><span class="crayon-s">'Dot'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-c">//设置材质</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef0147969284-8"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
Primitive由两个部分组成：
- 几何形状（Geometry）：定义了Primitive的结构，例如三角形、线条、点等
- 外观（Appearance ）：定义Primitive的着色（Sharding），包括GLSL（OpenGL着色语言，OpenGL Shading Language）顶点着色器和片段着色器（ vertex and fragment shaders），以及渲染状态（render state）
Cesium支持以下几何图形：
| 几何图形 | 说明 |
| BoxGeometry | 立方体 |
| BoxOutlineGeometry | 仅有轮廓的立方体 |
| CircleGeometry | 圆形或者拉伸的圆形 |
| CircleOutlineGeometry | 只有轮廓的圆形 |
| CorridorGeometry | 走廊：沿着地表的多段线，且具有一定的宽度，可以拉伸到一定的高度 |
| CorridorOutlineGeometry | 只有轮廓的走廊 |
| CylinderGeometry | 圆柱、圆锥或者截断的圆锥 |
| CylinderOutlineGeometry | 只有轮廓的圆柱、圆锥或者截断的圆锥 |
| EllipseGeometry | 椭圆或者拉伸的椭圆 |
| EllipseOutlineGeometry | 只有轮廓的椭圆或者拉伸的椭圆 |
| EllipsoidGeometry | 椭球体 |
| EllipsoidOutlineGeometry | 只有轮廓的椭球体 |
| RectangleGeometry | 矩形或者拉伸的矩形 |
| RectangleOutlineGeometry | 只有轮廓的矩形或者拉伸的矩形 |
| PolygonGeometry | 多边形，可以具有空洞或者拉伸一定的高度 |
| PolygonOutlineGeometry | 只有轮廓的多边形 |
| PolylineGeometry | 多段线，可以具有一定的宽度 |
| SimplePolylineGeometry | 简单的多段线 |
| PolylineVolumeGeometry | 多段线柱体 |
| PolylineVolumeOutlineGeometry | 只有轮廓的多段线柱体 |
| SphereGeometry | 球体 |
| SphereOutlineGeometry | 只有轮廓的球体 |
| WallGeometry | 墙 |
| WallOutlineGeometry | 只有轮廓的墙 |
使用Geometry和Appearance 具有以下优势：
- 性能：绘制大量Primitive时，可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU。合并Primitive由web worker线程执行，UI保持响应性
- 灵活性：Geometry与Appearance 解耦，两者可以分别进行修改
- 低级别访问：易于编写GLSL 顶点、片段着色器、使用自定义的渲染状态
同时，具有以下劣势：
- 需要编写更多地代码
- 需要对图形编程有更多的理解，特别是OpenGL的知识
使用来Geometry、Appearance 改写上面的例子，代码为：
<div id="crayon-619d90c449ef6910781878" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef6910781878-2">2</div><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef6910781878-4">4</div><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef6910781878-6">6</div><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef6910781878-8">8</div><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef6910781878-10">10</div><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef6910781878-12">12</div><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef6910781878-14">14</div><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449ef6910781878-16">16</div><div class="crayon-num" data-line="crayon-619d90c449ef6910781878-17">17</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449ef6910781878-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef6910781878-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449ef6910781878-3"><span class="crayon-c">//GeometryInstance是Geometry的一个容器</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef6910781878-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">instance</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">GeometryInstance</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449ef6910781878-5"><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">RectangleGeometry</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef6910781878-6"><span class="crayon-h"> </span><span class="crayon-v">rectangle</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Rectangle</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">100.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">20.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">90.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">30.0</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449ef6910781878-7"><span class="crayon-h"> </span><span class="crayon-v">vertexFormat</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">EllipsoidSurfaceAppearance</span><span class="crayon-sy">.</span><span class="crayon-v">VERTEX</span><span class="crayon-sy">_</span>FORMAT</div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef6910781878-8"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449ef6910781878-9"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef6910781878-10"><span class="crayon-c">//使用抽象的Primitive而不是RectanglePrimitive</span></div><div class="crayon-line" id="crayon-619d90c449ef6910781878-11"><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">primitives</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Primitive</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef6910781878-12"><span class="crayon-h"> </span><span class="crayon-v">geometryInstances</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">instance</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449ef6910781878-13"><span class="crayon-h"> </span><span class="crayon-c">//使用该外观，可以使矩形覆盖在地球表面，或者悬浮一定的高度</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef6910781878-14"><span class="crayon-h"> </span><span class="crayon-v">appearance</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">EllipsoidSurfaceAppearance</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449ef6910781878-15"><span class="crayon-h"> </span><span class="crayon-v">material</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Material</span><span class="crayon-sy">.</span><span class="crayon-e">fromType</span><span class="crayon-sy">(</span><span class="crayon-s">'Dot'</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449ef6910781878-16"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449ef6910781878-17"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
合并几何图形（Combing Geometries）
合并多个GeometryInstances 为一个Primitive可以极大的提高性能，下面的例子创建了2592一颜色各异的矩形，覆盖整个地球 ：
<div id="crayon-619d90c449efa236724572" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449efa236724572-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-2">2</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-4">4</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-6">6</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-8">8</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-10">10</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-12">12</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-14">14</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-16">16</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-18">18</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-20">20</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-22">22</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-24">24</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efa236724572-26">26</div><div class="crayon-num" data-line="crayon-619d90c449efa236724572-27">27</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449efa236724572-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-3"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">instances</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-5"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-6"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">lon</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">180.0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">lon</span><span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-h"> </span><span class="crayon-cn">180.0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">lon</span><span class="crayon-h"> </span><span class="crayon-o">+=</span><span class="crayon-h"> </span><span class="crayon-cn">5.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-7"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-8"><span class="crayon-h"> </span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">lat</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">90.0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">lat</span><span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-h"> </span><span class="crayon-cn">90.0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">lat</span><span class="crayon-h"> </span><span class="crayon-o">+=</span><span class="crayon-h"> </span><span class="crayon-cn">5.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-9"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-10"><span class="crayon-h"> </span><span class="crayon-v">instances</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">GeometryInstance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-11"><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">RectangleGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-12"><span class="crayon-h"> </span><span class="crayon-v">rectangle</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Rectangle</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">lon</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">lat</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">lon</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">5.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">lat</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">5.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-13"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-14"><span class="crayon-h"> </span><span class="crayon-v">attributes</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-15"><span class="crayon-h"> </span><span class="crayon-v">color</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ColorGeometryInstanceAttribute</span><span class="crayon-sy">.</span><span class="crayon-e">fromColor</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromRandom</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-16"><span class="crayon-h"> </span><span class="crayon-v">alpha</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">0.5</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-17"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-18"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-19"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-20"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-21"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-22"> </div><div class="crayon-line" id="crayon-619d90c449efa236724572-23"><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">primitives</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Primitive</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-24"><span class="crayon-h"> </span><span class="crayon-v">geometryInstances</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">instances</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//合并</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-25"><span class="crayon-h"> </span><span class="crayon-c">//某些外观允许每个几何图形实例分别指定某个属性，例如：</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efa236724572-26"><span class="crayon-h"> </span><span class="crayon-v">appearance</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">PerInstanceColorAppearance</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449efa236724572-27"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
选取几何图形（Picking）
即使多个 GeometryInstance被合并为单个Primitive，让然可以独立的被访问。我们可以为每一个GeometryInstance指定一个id，并且可以通过Scene.pick来判断该实例是否被选取：
<div id="crayon-619d90c449efe180118927" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449efe180118927-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-2">2</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-4">4</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-6">6</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-8">8</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-10">10</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-12">12</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-14">14</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-16">16</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-18">18</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-20">20</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-22">22</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-24">24</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-26">26</div><div class="crayon-num" data-line="crayon-619d90c449efe180118927-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449efe180118927-28">28</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449efe180118927-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-3"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">instance</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">GeometryInstance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-5"><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">RectangleGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-6"><span class="crayon-h"> </span><span class="crayon-v">rectangle</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Rectangle</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">100.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">30.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">90.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">40.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-7"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-8"><span class="crayon-h"> </span><span class="crayon-v">id</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'rectangle-1'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-9"><span class="crayon-h"> </span><span class="crayon-v">attributes</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-10"><span class="crayon-h"> </span><span class="crayon-v">color</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ColorGeometryInstanceAttribute</span><span class="crayon-sy">.</span><span class="crayon-e">fromColor</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-i">RED</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-11"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-12"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-13"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-14"><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">primitives</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Primitive</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-15"><span class="crayon-h"> </span><span class="crayon-v">geometryInstances</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">instance</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-16"><span class="crayon-h"> </span><span class="crayon-v">appearance</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">PerInstanceColorAppearance</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-17"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-18"> </div><div class="crayon-line" id="crayon-619d90c449efe180118927-19"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">handler</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">ScreenSpaceEventHandler</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-i">canvas</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-20"><span class="crayon-c">//设置单击事件的处理句柄</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-21"><span class="crayon-v">handler</span><span class="crayon-sy">.</span><span class="crayon-e">setInputAction</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">movement</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-22"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-23"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pick</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-e">pick</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">movement</span><span class="crayon-sy">.</span><span class="crayon-i">position</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-24"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">defined</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">pick</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">&&</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">pick</span><span class="crayon-sy">.</span><span class="crayon-v">id</span><span class="crayon-h"> </span><span class="crayon-o">===</span><span class="crayon-h"> </span><span class="crayon-s">'rectangle-1'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-25"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-26"><span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'矩形被选取'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449efe180118927-27"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449efe180118927-28"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ScreenSpaceEventType</span><span class="crayon-sy">.</span><span class="crayon-v">LEFT</span><span class="crayon-sy">_</span>CLICK<span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
几何图形实例（Geometry Instances）
上面的例子中，我们已经用到了GeometryInstances，注意GeometryInstance与Geometry的关系：前者是后者的容器，多个Instance可以共用一个Geometry，并且可以通过GeometryInstances.modelMatrix属性提供不同position、scale、rotate等位置、缩放、旋转信息。例如，下面的例子使用同一个Geometry绘制了两个Instance，一个位于另一个的上方：
<div id="crayon-619d90c449f03822342454" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f03822342454-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-8">8</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-10">10</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-12">12</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-14">14</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-16">16</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-18">18</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-20">20</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-22">22</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-24">24</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-26">26</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-28">28</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-30">30</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f03822342454-32">32</div><div class="crayon-num" data-line="crayon-619d90c449f03822342454-33">33</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f03822342454-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-3"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">ellipsoidGeometry</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">EllipsoidGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-5"><span class="crayon-h"> </span><span class="crayon-v">vertexFormat</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">PerInstanceColorAppearance</span><span class="crayon-sy">.</span><span class="crayon-v">VERTEX_FORMAT</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-6"><span class="crayon-h"> </span><span class="crayon-v">radii</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Cartesian3</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">300000.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">200000.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">150000.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-c">//三轴半径</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-7"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-8"><span class="crayon-c">//下方的实例</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-9"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">cyanEllipsoidInstance</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">GeometryInstance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-10"><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">ellipsoidGeometry</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-11"><span class="crayon-h"> </span><span class="crayon-v">modelMatrix</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Matrix4</span><span class="crayon-sy">.</span><span class="crayon-e">multiplyByTranslation</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Transforms</span><span class="crayon-sy">.</span><span class="crayon-e">eastNorthUpToFixedFrame</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">100.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">40.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Cartesian3</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">150000.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-12"><span class="crayon-h"> </span><span class="crayon-v">attributes</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-13"><span class="crayon-h"> </span><span class="crayon-v">color</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ColorGeometryInstanceAttribute</span><span class="crayon-sy">.</span><span class="crayon-e">fromColor</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-i">CYAN</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-14"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-15"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-16"><span class="crayon-c">//上方的实例</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-17"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">orangeEllipsoidInstance</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">GeometryInstance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-18"><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">ellipsoidGeometry</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-19"><span class="crayon-h"> </span><span class="crayon-v">modelMatrix</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Matrix4</span><span class="crayon-sy">.</span><span class="crayon-e">multiplyByTranslation</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Transforms</span><span class="crayon-sy">.</span><span class="crayon-e">eastNorthUpToFixedFrame</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">100.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">40.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Cartesian3</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">0.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">450000.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-20"><span class="crayon-h"> </span><span class="crayon-v">attributes</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-21"><span class="crayon-h"> </span><span class="crayon-v">color</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ColorGeometryInstanceAttribute</span><span class="crayon-sy">.</span><span class="crayon-e">fromColor</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-i">ORANGE</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-22"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-23"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-24"> </div><div class="crayon-line" id="crayon-619d90c449f03822342454-25"><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">primitives</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Primitive</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-26"><span class="crayon-h"> </span><span class="crayon-v">geometryInstances</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-27"><span class="crayon-h"> </span><span class="crayon-v">cyanEllipsoidInstance</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">orangeEllipsoidInstance</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-28"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-29"><span class="crayon-h"> </span><span class="crayon-v">appearance</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">PerInstanceColorAppearance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-30"><span class="crayon-h"> </span><span class="crayon-v">translucent</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-31"><span class="crayon-h"> </span><span class="crayon-r">closed</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f03822342454-32"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449f03822342454-33"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
更新单个GeometryInstance的属性
在添加到Primitive中以后，让然可以修改几何图形的某些属性：
- 颜色：如果Primitive设置了PerInstanceColorAppearance外观，则可以修改ColorGeometryInstanceAttribute类型的颜色
- 可见性：任何实例可以修改可见性
示例代码：
<div id="crayon-619d90c449f08358318817" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f08358318817-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-8">8</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-10">10</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-12">12</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-14">14</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-16">16</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-18">18</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-20">20</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-22">22</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-24">24</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-26">26</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-28">28</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-30">30</div><div class="crayon-num" data-line="crayon-619d90c449f08358318817-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f08358318817-32">32</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f08358318817-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-3"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">circleInstance</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">GeometryInstance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-5"><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">CircleGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-6"><span class="crayon-h"> </span><span class="crayon-v">center</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">95.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">43.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-7"><span class="crayon-h"> </span><span class="crayon-v">radius</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">250000.0</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-8"><span class="crayon-h"> </span><span class="crayon-v">vertexFormat</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">PerInstanceColorAppearance</span><span class="crayon-sy">.</span><span class="crayon-v">VERTEX</span><span class="crayon-sy">_</span>FORMAT</div><div class="crayon-line" id="crayon-619d90c449f08358318817-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-10"><span class="crayon-h"> </span><span class="crayon-v">attributes</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-11"><span class="crayon-h"> </span><span class="crayon-v">color</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ColorGeometryInstanceAttribute</span><span class="crayon-sy">.</span><span class="crayon-e">fromColor</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Color</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0.5</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-12"><span class="crayon-h"> </span><span class="crayon-v">show</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">ShowGeometryInstanceAttribute</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-c">//显示或者隐藏</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-13"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-14"><span class="crayon-h"> </span><span class="crayon-v">id</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'circle'</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-15"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-16"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">primitive</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Primitive</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-17"><span class="crayon-h"> </span><span class="crayon-v">geometryInstances</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">circleInstance</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-18"><span class="crayon-h"> </span><span class="crayon-v">appearance</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">PerInstanceColorAppearance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-19"><span class="crayon-h"> </span><span class="crayon-v">translucent</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-20"><span class="crayon-h"> </span><span class="crayon-r">closed</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-21"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-22"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-23"><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">primitives</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">primitive</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-24"> </div><div class="crayon-line" id="crayon-619d90c449f08358318817-25"><span class="crayon-c">//定期修改颜色</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-26"><span class="crayon-r">setInterval</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-27"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-28"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">attributes</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">primitive</span><span class="crayon-sy">.</span><span class="crayon-e">getGeometryInstanceAttributes</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'circle'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//获取某个实例的属性集</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-29"><span class="crayon-h"> </span><span class="crayon-v">attributes</span><span class="crayon-sy">.</span><span class="crayon-v">color</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ColorGeometryInstanceAttribute</span><span class="crayon-sy">.</span><span class="crayon-e">toValue</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Color</span><span class="crayon-sy">.</span><span class="crayon-e">fromRandom</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-30"><span class="crayon-h"> </span><span class="crayon-v">alpha</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span></div><div class="crayon-line" id="crayon-619d90c449f08358318817-31"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f08358318817-32"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">2000</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
外观（Appearances）
Primitive由两个重要部分组成：几何图形实例、外观，一个Primitive只能有一个外观，而可以有多个实例。几何图形定义了结构，外观定义了每个像素被如何着色，外观可能使用材质（Material）。这些对象的关系如下图所示：
Cesium支持下表列出的外观：
| 外观 | 说明 |
| MaterialAppearance | 支持各种Geometry类型的外观，支持使用材质来定义着色 |
| EllipsoidSurfaceAppearance | MaterialAppearance的一个版本。假设几何图形与地表是平行的，并且依此来进行顶点属性（vertex attributes）的计算 |
| PerInstanceColorAppearance | 让每个实例使用自定义的颜色来着色 |
| PolylineMaterialAppearance | 支持使用材质来着色多段线 |
| PolylineColorAppearance | 使用每顶点或者每片段（per-vertex or per-segment ）的颜色来着色多段线 |
外观定义了需要在GPU上执行的完整的GLSL顶点、片段着色器，通常不需要修改这一部分，除非需要定义自己的外观。
外观还定义了完整的render state，用于在绘制Primitive时控制GPU的状态，可以直接或者通过高层API来定义render state：
<div id="crayon-619d90c449f0d318234866" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f0d318234866-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f0d318234866-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f0d318234866-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f0d318234866-8">8</div><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f0d318234866-10">10</div><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f0d318234866-12">12</div><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f0d318234866-14">14</div><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f0d318234866-16">16</div><div class="crayon-num" data-line="crayon-619d90c449f0d318234866-17">17</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f0d318234866-1"><span class="crayon-c">//下面的外观可用于定义一个Viewer不可进入的不透明盒子</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f0d318234866-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">appearance</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">PerInstanceColorAppearance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f0d318234866-3"><span class="crayon-h"> </span><span class="crayon-v">translucent</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f0d318234866-4"><span class="crayon-h"> </span><span class="crayon-r">closed</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-619d90c449f0d318234866-5"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f0d318234866-6"><span class="crayon-c">//下面的代码效果同上</span></div><div class="crayon-line" id="crayon-619d90c449f0d318234866-7"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">translucent</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">PerInstanceColorAppearance</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f0d318234866-8"><span class="crayon-h"> </span><span class="crayon-v">renderState</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f0d318234866-9"><span class="crayon-h"> </span><span class="crayon-v">depthTest</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f0d318234866-10"><span class="crayon-h"> </span><span class="crayon-v">enabled</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-619d90c449f0d318234866-11"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f0d318234866-12"><span class="crayon-h"> </span><span class="crayon-v">cull</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f0d318234866-13"><span class="crayon-h"> </span><span class="crayon-v">enabled</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f0d318234866-14"><span class="crayon-h"> </span><span class="crayon-v">face</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">CullFace</span><span class="crayon-sy">.</span><span class="crayon-i">BACK</span></div><div class="crayon-line" id="crayon-619d90c449f0d318234866-15"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f0d318234866-16"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449f0d318234866-17"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
一旦外观被创建，其render state就不可再变，但是其材质是可以替换的。另外Primitive的外观也是不可修改的。
大部分外观具有flat、faceForward属性，可以间接的控制GLSL 着色器：
- flat：扁平化着色，不考虑光线的作用
- faceForward：布尔值，控制光照效果
Geometry与Appearance的兼容性
需要注意，不是所有外观和所有几何图形可以搭配使用，例如EllipsoidSurfaceAppearance与WallGeometry就不能搭配，原因是后者是垂直于地表的。
即使外观与几何图形兼容，它们还必须有匹配的顶点格式（vertex formats）—— 即几何图形必须具有外观可以作为输入的数据格式，在创建Geometry时可以提供VertexFormat。
为了简便，可以让Geometry计算所有顶点属性（vertex attributes），以使之适用于任何外观，但这样做效率较差：
<div id="crayon-619d90c449f11857303009" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f11857303009-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f11857303009-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f11857303009-3">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f11857303009-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">RectangleGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f11857303009-2"><span class="crayon-h"> </span><span class="crayon-v">vertexFormat</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">VertexFormat</span><span class="crayon-sy">.</span><span class="crayon-i">ALL</span></div><div class="crayon-line" id="crayon-619d90c449f11857303009-3"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
而如果我们使用外观EllipsoidSurfaceAppearance，其实只需要知道位置：
<div id="crayon-619d90c449f15492007732" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f15492007732-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f15492007732-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f15492007732-3">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f15492007732-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Ceisum</span><span class="crayon-sy">.</span><span class="crayon-e">RectangleGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f15492007732-2"><span class="crayon-h"> </span><span class="crayon-v">vertexFormat</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Ceisum</span><span class="crayon-sy">.</span><span class="crayon-v">VertexFormat</span><span class="crayon-sy">.</span><span class="crayon-v">POSITION</span><span class="crayon-sy">_</span>ONLY</div><div class="crayon-line" id="crayon-619d90c449f15492007732-3"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
大部分外观具有vertexFormat属性或者VERTEX_FORMAT 静态常量，创建形状时只需要使用这些顶点格式即可：
<div id="crayon-619d90c449f19511387456" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f19511387456-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f19511387456-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f19511387456-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f19511387456-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f19511387456-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f19511387456-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f19511387456-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f19511387456-8">8</div><div class="crayon-num" data-line="crayon-619d90c449f19511387456-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f19511387456-10">10</div><div class="crayon-num" data-line="crayon-619d90c449f19511387456-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f19511387456-12">12</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f19511387456-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">geometry</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Ceisum</span><span class="crayon-sy">.</span><span class="crayon-e">RectangleGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f19511387456-2"><span class="crayon-h"> </span><span class="crayon-v">vertexFormat</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Ceisum</span><span class="crayon-sy">.</span><span class="crayon-v">EllipsoidSurfaceAppearance</span><span class="crayon-sy">.</span><span class="crayon-v">VERTEX</span><span class="crayon-sy">_</span>FORMAT</div><div class="crayon-line" id="crayon-619d90c449f19511387456-3"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f19511387456-4"> </div><div class="crayon-line" id="crayon-619d90c449f19511387456-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">geometry2</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Ceisum</span><span class="crayon-sy">.</span><span class="crayon-e">RectangleGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f19511387456-6"><span class="crayon-h"> </span><span class="crayon-v">vertexFormat</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Ceisum</span><span class="crayon-sy">.</span><span class="crayon-v">PerInstanceColorAppearance</span><span class="crayon-sy">.</span><span class="crayon-v">VERTEX</span><span class="crayon-sy">_</span>FORMAT</div><div class="crayon-line" id="crayon-619d90c449f19511387456-7"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f19511387456-8"> </div><div class="crayon-line" id="crayon-619d90c449f19511387456-9"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">appearance</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Ceisum</span><span class="crayon-sy">.</span><span class="crayon-e">MaterialAppearance</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f19511387456-10"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">geometry3</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Ceisum</span><span class="crayon-sy">.</span><span class="crayon-e">RectangleGeometry</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f19511387456-11"><span class="crayon-h"> </span><span class="crayon-v">vertexFormat</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">appearance</span><span class="crayon-sy">.</span><span class="crayon-i">vertexFormat</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f19511387456-12"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
此外，两个形状必须具有匹配的vertexFormat，才能被合并到一个Primitive中。
3D模型
我们可以转换、加载并且在Cesium中使用3D模型。Cesium支持glTF（一个新兴的Web 3D模型工业标准）格式的3D模型，并且提供在线的 COLLADA - glTF转换工具。Cesium针对3D模型支持关键帧动画、皮肤、单独节点选取等特性。
Cesium自带了三个模型：飞机、车辆、人。下面的例子载入一个车辆模型：
<div id="crayon-619d90c449f1d188243371" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f1d188243371-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f1d188243371-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f1d188243371-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f1d188243371-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f1d188243371-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f1d188243371-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f1d188243371-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f1d188243371-8">8</div><div class="crayon-num" data-line="crayon-619d90c449f1d188243371-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f1d188243371-10">10</div><div class="crayon-num" data-line="crayon-619d90c449f1d188243371-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f1d188243371-12">12</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f1d188243371-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f1d188243371-2"><span class="crayon-c">//创建坐标</span></div><div class="crayon-line" id="crayon-619d90c449f1d188243371-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">coord</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Cartesian3</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">75.62898254394531</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">40.02804946899414</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f1d188243371-4"><span class="crayon-c">//创建一个东（X，红色）北（Y，绿色）上（Z，蓝色）的本地坐标系统</span></div><div class="crayon-line" id="crayon-619d90c449f1d188243371-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">modelMatrix</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Transforms</span><span class="crayon-sy">.</span><span class="crayon-e">eastNorthUpToFixedFrame</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">coord</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f1d188243371-6"><span class="crayon-c">// 改变3D模型的模型矩阵，可以用于移动物体</span></div><div class="crayon-line" id="crayon-619d90c449f1d188243371-7"><span class="crayon-c">// 物体的世界坐标 = 物体的模型坐标 * 世界矩阵</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f1d188243371-8"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">model</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">primitives</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Model</span><span class="crayon-sy">.</span><span class="crayon-e">fromGltf</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-c">//异步的加载模型</span></div><div class="crayon-line" id="crayon-619d90c449f1d188243371-9"><span class="crayon-h"> </span><span class="crayon-v">url</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'../../SampleData/models/CesiumGround/Cesium_Ground.gltf'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f1d188243371-10"><span class="crayon-h"> </span><span class="crayon-v">modelMatrix</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">modelMatrix</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//模型矩阵</span></div><div class="crayon-line" id="crayon-619d90c449f1d188243371-11"><span class="crayon-h"> </span><span class="crayon-v">scale</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">200.0</span><span class="crayon-h"> </span><span class="crayon-c">//缩放</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f1d188243371-12"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
Cesium自带的3个模型已经内嵌了动画关键桢，如果需要播放动画，可以在调用Model.fromGltf后添加以下代码：
<div id="crayon-619d90c449f21551786293" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f21551786293-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f21551786293-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f21551786293-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f21551786293-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f21551786293-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f21551786293-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f21551786293-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f21551786293-8">8</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f21551786293-1"><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">when</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">model</span><span class="crayon-sy">.</span><span class="crayon-i">readyPromise</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">model</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f21551786293-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f21551786293-3"><span class="crayon-h"> </span><span class="crayon-v">model</span><span class="crayon-sy">.</span><span class="crayon-v">activeAnimations</span><span class="crayon-sy">.</span><span class="crayon-e">addAll</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-c">//播放模型中全部动画，如果需要播放单个动画，可以调用add，传入动画id</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f21551786293-4"><span class="crayon-h"> </span><span class="crayon-v">loop</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ModelAnimationLoop</span><span class="crayon-sy">.</span><span class="crayon-v">REPEAT</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//直到被移出activeAnimations，一直播放</span></div><div class="crayon-line" id="crayon-619d90c449f21551786293-5"><span class="crayon-h"> </span><span class="crayon-v">speedup</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">0.5</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//加速播放</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f21551786293-6"><span class="crayon-h"> </span><span class="crayon-v">reverse</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h"> </span><span class="crayon-c">//逆序播放</span></div><div class="crayon-line" id="crayon-619d90c449f21551786293-7"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f21551786293-8"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
动画与Cesium的时钟系统同步化。
与其它Primitive一样，对3D模型的选取也是被支持的，当前点击的glTF node id、glTF mess一并被获取：
<div id="crayon-619d90c449f25151689910" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f25151689910-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f25151689910-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f25151689910-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f25151689910-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f25151689910-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f25151689910-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f25151689910-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f25151689910-8">8</div><div class="crayon-num" data-line="crayon-619d90c449f25151689910-9">9</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f25151689910-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">handler</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">ScreenSpaceEventHandler</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-i">canvas</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f25151689910-2"><span class="crayon-v">handler</span><span class="crayon-sy">.</span><span class="crayon-e">setInputAction</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">movement</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-619d90c449f25151689910-3"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f25151689910-4"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pick</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-e">pick</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">movement</span><span class="crayon-sy">.</span><span class="crayon-i">endPosition</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f25151689910-5"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">defined</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">pick</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">&&</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">defined</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">pick</span><span class="crayon-sy">.</span><span class="crayon-i">node</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">&&</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">defined</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">pick</span><span class="crayon-sy">.</span><span class="crayon-i">mesh</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f25151689910-6"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f25151689910-7"><span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'node: '</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">pick</span><span class="crayon-sy">.</span><span class="crayon-v">node</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-s">'. mesh: '</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">pick</span><span class="crayon-sy">.</span><span class="crayon-v">mesh</span><span class="crayon-sy">.</span><span class="crayon-i">name</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f25151689910-8"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-619d90c449f25151689910-9"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">ScreenSpaceEventType</span><span class="crayon-sy">.</span><span class="crayon-v">MOUSE</span><span class="crayon-sy">_</span>MOVE<span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
栅格图层
Cesium支持多种标准化格式的GIS瓦片服务，可以把栅格图层绘制到地球的表面。这些图层的亮度、对比度、色相均可以动态调整：
<div id="crayon-619d90c449f2a368600371" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-8">8</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-10">10</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-12">12</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-14">14</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-16">16</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-18">18</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-20">20</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-22">22</div><div class="crayon-num" data-line="crayon-619d90c449f2a368600371-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2a368600371-24">24</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f2a368600371-1"><span class="crayon-c">//初始化一个查看器，并且提供一个栅格图层</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Viewer</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'cesiumContainer'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-3"><span class="crayon-h"> </span><span class="crayon-v">imageryProvider</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">ArcGisMapServerImageryProvider</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-4"><span class="crayon-h"> </span><span class="crayon-v">url</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-5"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-6"><span class="crayon-h"> </span><span class="crayon-v">baseLayerPicker</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-7"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-8"><span class="crayon-c">//添加另外一个图层</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-9"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">layers</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">imageryLayers</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-10"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">blackMarble</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">layers</span><span class="crayon-sy">.</span><span class="crayon-e">addImageryProvider</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">TileMapServiceImageryProvider</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-11"><span class="crayon-h"> </span><span class="crayon-v">url</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'//cesiumjs.org/tilesets/imagery/blackmarble'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-12"><span class="crayon-h"> </span><span class="crayon-v">maximumLevel</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">8</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-13"><span class="crayon-h"> </span><span class="crayon-v">credit</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Black Marble imagery courtesy NASA Earth Observatory'</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-14"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-15"><span class="crayon-c">//设置图层的透明度</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-16"><span class="crayon-v">blackMarble</span><span class="crayon-sy">.</span><span class="crayon-v">alpha</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">0.5</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-17"><span class="crayon-c">//设置图层的亮度</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-18"><span class="crayon-v">blackMarble</span><span class="crayon-sy">.</span><span class="crayon-v">brightness</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">2.0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-19"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-20"><span class="crayon-c">//添加一个图层，在特定位置绘制一个图片</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-21"><span class="crayon-v">layers</span><span class="crayon-sy">.</span><span class="crayon-e">addImageryProvider</span><span class="crayon-sy">(</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">SingleTileImageryProvider</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-22"><span class="crayon-h"> </span><span class="crayon-v">url</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'../images/Cesium_Logo_overlay.png'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f2a368600371-23"><span class="crayon-h"> </span><span class="crayon-v">rectangle</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Rectangle</span><span class="crayon-sy">.</span><span class="crayon-e">fromDegrees</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">75.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">28.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">67.0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">29.75</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2a368600371-24"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
3D地形图
Cesium支持3D地形图、水体特效，下面的代码添加该特性：
<div id="crayon-619d90c449f2e853709705" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f2e853709705-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2e853709705-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f2e853709705-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f2e853709705-4">4</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f2e853709705-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">terrainProvider</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">CesiumTerrainProvider</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2e853709705-2"><span class="crayon-h"> </span><span class="crayon-v">url</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'//assets.agi.com/stk-terrain/world'</span></div><div class="crayon-line" id="crayon-619d90c449f2e853709705-3"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f2e853709705-4"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">terrainProvider</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">terrainProvider</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
需要注意的是，地形图、栅格图层是分别处理的，默认的栅格图层覆盖在地形图的上面。任何栅格图层均可与地形图搭配使用。
下面的代码可以启用光照、水体效果：
<div id="crayon-619d90c449f32565774920" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f32565774920-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f32565774920-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f32565774920-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f32565774920-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f32565774920-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f32565774920-6">6</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f32565774920-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">terrainProvider</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">CesiumTerrainProvider</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f32565774920-2"><span class="crayon-h"> </span><span class="crayon-v">url</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'//assets.agi.com/stk-terrain/world'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f32565774920-3"><span class="crayon-h"> </span><span class="crayon-v">requestVertexNormals</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f32565774920-4"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f32565774920-5"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">terrainProvider</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">terrainProvider</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f32565774920-6"><span class="crayon-v">viewer</span><span class="crayon-sy">.</span><span class="crayon-v">scene</span><span class="crayon-sy">.</span><span class="crayon-v">globe</span><span class="crayon-sy">.</span><span class="crayon-v">enableLighting</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
镜头
Cesium提供了以下默认鼠标行为：
- 单击并拖拽球体：旋转地球，镜头俯角不变
- 单击并拖拽空间：滚动roll、俯仰pitch镜头
- 右击并拖拽、中键滚动：缩放镜头
- 中键拖拽：沿着地表的点旋转镜头
调用camera.setView()可以设置相机的位置和方向：
<div id="crayon-619d90c449f36155991217" class="crayon-syntax crayon-theme-gmem-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style="margin-top: 0px; margin-bottom: 0px; font-size: 15px !important; line-height: 20px !important; height: auto;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 15px !important;height: 22.5px !important; line-height: 22.5px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code" style="display: none;"><div class="crayon-button-icon" style="background-size: 48px 128px; background-image: url("https://gmem.site/wp-content/plugins/crayon-syntax-highlighter/css/images/toolbar/buttons@2x.png");"></div></div><span class="crayon-language">JavaScript</span></div></div>
<div class="crayon-info" style="min-height: 21px !important; line-height: 21px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 15px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-619d90c449f36155991217-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f36155991217-2">2</div><div class="crayon-num" data-line="crayon-619d90c449f36155991217-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f36155991217-4">4</div><div class="crayon-num" data-line="crayon-619d90c449f36155991217-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f36155991217-6">6</div><div class="crayon-num" data-line="crayon-619d90c449f36155991217-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f36155991217-8">8</div><div class="crayon-num" data-line="crayon-619d90c449f36155991217-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f36155991217-10">10</div><div class="crayon-num" data-line="crayon-619d90c449f36155991217-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f36155991217-12">12</div><div class="crayon-num" data-line="crayon-619d90c449f36155991217-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-619d90c449f36155991217-14">14</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 15px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-619d90c449f36155991217-1"><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">setView</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f36155991217-2"><span class="crayon-h"> </span><span class="crayon-v">positionCartographic</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Cartographic</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">longitude</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">latitude</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f36155991217-3"><span class="crayon-h"> </span><span class="crayon-v">heading</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">headingAngle</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f36155991217-4"><span class="crayon-h"> </span><span class="crayon-v">pitch</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">pitchAngle</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-619d90c449f36155991217-5"><span class="crayon-h"> </span><span class="crayon-v">roll</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">rollAngle</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f36155991217-6"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f36155991217-7"> </div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f36155991217-8"><span class="crayon-c">//确保指定的东西南北范围进入视野</span></div><div class="crayon-line" id="crayon-619d90c449f36155991217-9"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">west</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">77.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f36155991217-10"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">south</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">38.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f36155991217-11"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">east</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">72.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f36155991217-12"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">north</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">toRadians</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">42.0</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-619d90c449f36155991217-13"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">extent</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-e">Extent</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">west</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">south</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">east</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">north</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-619d90c449f36155991217-14"><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">viewExtent</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">extent</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">Cesium</span><span class="crayon-sy">.</span><span class="crayon-v">Ellipsoid</span><span class="crayon-sy">.</span><span class="crayon-i">WGS84</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
Camera
相机对象表示当前镜头的位置（position）、方向（orientation）、参考坐标系（reference frame）、视见体（View Frustum）。
move*、zoom*方法用于沿着镜头的原点（orientation ）或者一个给定的矢量来变换（translate）镜头的位置。移动过程中方向保持固定：
look*、twist*方法用于依照direction、up、right向量来旋转方向，旋转过程中位置保持不变：
rotate*方法用于依据给定的矢量来变换位置、旋转方向。