L1 kml加载及设置

Posted 2021-03-24 xiaoguniang0204

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

一、加载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: Name Type Default Description 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
//         })
//     }   
}});