從0開始的Cesium

第一章 Cesium學(xué)習(xí)入門之搭建Vite+Vue3+Cesium開發(fā)環(huán)境
第二章 Cesium學(xué)習(xí)入門之搭建Cesium界面預(yù)覽和小控件隱藏
第三章 Cesium學(xué)習(xí)入門之地形數(shù)據(jù)（DEM）的加載
第四章 Cesium學(xué)習(xí)入門之加載離線影像圖（tif）
第五章 Cesium學(xué)習(xí)入門之加載影像WMTS切片服務(wù)（ArcGIS/Geowebcache）
第六章 Cesium學(xué)習(xí)入門之添加Geojson數(shù)據(jù)（dataSource）

前言

在Cesium場景中添加三維圖元的方式有很多種，包括entity，dataSource，primitive，本文將著重講解cesium中GeoJson（dataSource）數(shù)據(jù)的處理

一、添加GeoJSON數(shù)據(jù)并自定義修改

1.添加GeoJson數(shù)據(jù)

viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load(url, //要加載的 url、GeoJSON 對象或 TopoJSON 對象。
        {
            stroke: Cesium.Color.HOTPINK, //折線和多邊形輪廓的默認(rèn)顏色。
            fill: Cesium.Color.PINK.withAlpha(0.5), //多邊形內(nèi)部的默認(rèn)顏色。
            strokeWidth: 3, //折線和多邊形輪廓的默認(rèn)寬度。
        }
    )
);

其中options參數(shù)在下圖

2.添加GeoJson數(shù)據(jù)并自定義修改

在開發(fā)過程中，經(jīng)常會遇到根據(jù)GeoJson數(shù)據(jù)添加圖片和文字注記類似的需求，一般來說，直接添加GeoJson數(shù)據(jù)cesium只會定義一種entity類型，所以我們需要按照需求自定義添加文章來源地址http://www.zghlxwxcb.cn/news/detail-601274.html

const promise = Cesium.GeoJsonDataSource.load(url)  //讀取geojson數(shù)據(jù)

    promise.then((dataSource) => {
        const entities = dataSource.entities.values //獲取dataSource中的entitis集合 
        for (const key in entities) {
            const entity = entities[key]  //遍歷集合中每一個實(shí)體entity，按照不同的類型去自定義修改
            if (entity.polyline) {  //如果是線數(shù)據(jù)類型
                const entitiyColor = Cesium.Color.fromBytes(red,green,blue)  //根據(jù)rbg顏色轉(zhuǎn)換成cesium支持的顏色
                entity.polyline.material = entitiyColor //復(fù)制到線材質(zhì)  
                entity.polyline.outline = false;  //取消外輪廓
                entity.polyline.clampToGround = true  //貼地線
                viewer.zoomTo(entity) //定位到實(shí)體
            } else if (entity.billboard) {
                entity.billboard = {
                    image: "img/gis.png", //修改圖片樣式
                    scale: 0.5,  //圖片縮放大小
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,  //貼地設(shè)置
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // //相對于對象的原點(diǎn)（注意是原點(diǎn)的位置）的水平位置
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM //相對于對象的原點(diǎn)的垂直位置，BOTTOM時錨點(diǎn)在下，對象在上
                }
                entity.label = {
                    text: entity.name,  //文字描述
                    font: '10pt Source Han Sans CN',    //字體樣式
                    fillColor: Cesium.Color.BLACK,        //字體顏色
                    backgroundColor: Cesium.Color.AQUA,    //背景顏色
                    showBackground: true,                //是否顯示背景顏色
                    style: Cesium.LabelStyle.FILL,        //label樣式
                    outlineWidth: 2,  //外輪廓寬度
                    verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
                    pixelOffset: new Cesium.Cartesian2(20, 0),//偏移
                    // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 20000000.0),
                    scaleByDistance: new Cesium.NearFarScalar(1000, 1, 20000000, 1.5),
                    // eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,//一個屬性，指定從相機(jī)到該距離時禁用深度測試的距離
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //貼地設(shè)置
                } 
            }

二、移除GeoJson（datasource）數(shù)據(jù)

1.從集合中移除一個datasource

viewer.dataSources.remove(datasource) //要刪除的數(shù)據(jù)源。

2.移除所有datasource

viewer.dataSources.removeAll()

到了這里，關(guān)于第六章 Cesium學(xué)習(xí)入門之添加Geojson數(shù)據(jù)（dataSource）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！