文章目录 一、绘制点 二、绘制面 三、绘制线 四、移除 Entity
< ! -- * @Author: HuKang* @Date: 2023 - 08 - 18 11 : 06 : 43 * @LastEditTime: 2023 - 08 - 25 09 : 16 : 59 * @LastEditors: HuKang* @Description: program- c* @FilePath: \global - data- display\src\views\program- c\index. vue
-- >
< template> < div> < div id= "cesiumContainer" > < / div> < / div>
< / template> < script setup lang= "ts" >
import * as Cesium from "cesium" ;
import { Viewer } from "cesium" ;
import cesium from "vite-plugin-cesium" ;
import { getSatellitecloudApi, getGenerateGridApi } from "@/api/servies" ; import { onMounted } from "vue" ;
import TOKEN from "@/utils/Tooken" ;
Cesium. Ion. defaultAccessToken = TOKEN;
}
const viewer = ref ( ) ;
const initViewer = ( ) => { viewer. value = new Cesium. Viewer ( "cesiumContainer" , { infoBox: false , } ) ; viewer. value . cesiumWidget. creditContainer. style. display = "none" ; viewer. value . scene. globe. depthTestAgainstTerrain = true ; const imageryProvider = new Cesium. UrlTemplateImageryProvider ( { url: "cesium-api/map/getMap/{x}/{y}/{z}.png" , credit : "mapname" , tilingScheme : new Cesium. GeographicTilingScheme ( { ellipsoid: Cesium. Ellipsoid. WGS84, } ) , maximumLevel : 18 , } ) ; viewer. value . scene. imageryLayers. addImageryProvider ( imageryProvider) ;
const datasource = new Cesium. CustomDataSource ( "" ) } ;
onMounted ( ( ) => { initViewer ( ) ;
} ) ;
< / script> < style scoped> < / style>
一、绘制点
1. 第一种
var pointentity = viewer. value . entities. add ( { id: "point1" , position : Cesium. Cartesian3. fromDegrees ( 109 , 34 ) , point : { pixelSize: 10 , color : Cesium. Color. YELLOW, outlineColor: Cesium. Color. RED, outlineWidth: 2 , } ,
} ) ;
2. 第二种
const pointentity2 = new Cesium. Entity ( { id: "point2" , position : Cesium. Cartesian3. fromDegrees ( 109 , 34 ) , point : { pixelSize: 10 , color : Cesium. Color. YELLOW, outlineColor : Cesium. Color. RED, outlineWidth : 2 , } ,
} ) ;
viewer. value . entites. add ( pointentity2)
二、绘制面
viewer. value. entities. add ( { id : 'polygontest' , name : 'mian' , polygon : { hierarchy : Cesium. Cartesian3. fromDegreesArray ( [ 109.080842 , 45.002073 , 105.91517 , 45.002073 , 104.058488 , 44.996596 , 104.053011 , 43.002989 , 104.053011 , 41.003906 , 105.728954 , 40.998429 , 107.919731 , 41.003906 , 109.04798 , 40.998429 , 111.047063 , 40.998429 , 111.047063 , 42.000709 , 111.047063 , 44.476286 , 111.05254 , 45.002073 , 109.080842 , 45.002073 ] ) , height : 100 , material : Cesium. Color. RED . withAlpha ( 0.5 ) , outline : true , outlineColor : Cesium. Color. BLUE , outlineWidth : 1 , fill : true }
} ) ;
三、绘制线
viewer. value. entities. add ( { id : 'polygontest' , name : 'line' , polygon : { positions : Cesium. Cartesian3. fromDegreesArray ( [ 109.080842 , 45.002073 , 105.91517 , 45.002073 , 104.058488 , 44.996596 , 104.053011 , 43.002989 , 104.053011 , 41.003906 , 105.728954 , 40.998429 , 107.919731 , 41.003906 , 109.04798 , 40.998429 , 111.047063 , 40.998429 , 111.047063 , 42.000709 , 111.047063 , 44.476286 , 111.05254 , 45.002073 , 109.080842 , 45.002073 ] ) , width : 2 , material : Cesium. Color. YELLOW , }
} ) ;
四、移除 Entity
var tempEntity = viewer. value. entites. getById ( "point1" ) ;
viewer. value. entities. remove ( tempEntity) ;
viewer. value. entities. removeById ( "point1" ) ;