L1 kml加载及设置

本段为Cesium加载kml,生成entity数据形式,并通过material属性来实现想要的线性。

读取数据文件,需要根据数据格式创建一个合适的 DataSource ,它将负责解析配置的url里的数据,然后创建一个[EntityCollection]用来存储从数据里加载的每一个Entity 。DataSource 只是定义一些接口,依据数据格式的不同会有不同的解析过程。比如,KML使用KmlDataSource

一、加载kml的端口

Cesium.KmlDatasource.load();viewer.dataSources.add()

data Resource | String | Document | Blob A url, parsed KML document, or Blob containing binary KMZ data or a parsed KML document.
options Object An object with the following properties:
NameTypeDefaultDescription
camera Camera   The camera that is used for viewRefreshModes and sending camera properties to network links.
canvas Canvas   The canvas that is used for sending viewer properties to network links.
sourceUri String   optional Overrides the url to use for resolving relative links and other KML network features.
clampToGround Boolean false optional true if we want the geometry features (Polygons, LineStrings and LinearRings) clamped to the ground.
ellipsoid Ellipsoid Ellipsoid.WGS84 optional The global ellipsoid used for geographical calculations.

var promiseKml =new Cesium.KmlDataSource.load("地址",

     {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas,
     clampToGround:true//设置贴地 });
二、本地的地址加载
思路是使用input的file标签获取地址,暂时没有解决兼容性问题,待完善

三、加载kml并设置样式,目前采用的是entity加载方式,后面尝试primitive方式
promiseKml.then(function(kmlData) {
    viewer.dataSources.add(kmlData) ;
    var entities = kmlData.entities.values;

    for (let i = 0; i < entities.length; i++) {
        var entity = entities[i];
        //alert(entity.polyline);
        entity.polyline.show=true;
        entity.polyline.width=10;
        //1、发光线性
        entity.polyline.material= new Cesium.PolylineGlowMaterialProperty({
                            glowPower: 0.5,
                            color: Cesium.Color.BLUE
                        })
//         //2、箭头线
//         // entity.polyline.material=new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)
//         // 3、轮廓线
//         // entity.polyline.material= new Cesium.PolylineOutlineMaterialProperty({
//         //     color: Cesium.Color.BLUE,
//         //     outlineWidth: 10,
//         //     outlineColor: Cesium.Color.RED
//         // })
//         //4、虚线,虚线部分显示出来,那么可以做成间隔线的样式
//         entity.polyline.material= new Cesium.PolylineDashMaterialProperty({
//             color:Cesium.Color.RED,
//             gapColor:Cesium.Color.TRANSPARENT,
//             dashLength:20,
//             dashPattern:255
//         })
//     }   
}});
 
原文地址:https://www.cnblogs.com/xiaoguniang0204/p/11746579.html