cesium绘制几何体polygon,并直接标注label的小技巧

22 篇文章 1 订阅
7 篇文章 6 订阅

之前一直用openlayers,skyline,进行图形绘制图形,在绘制polygon的时候都是可以获取相应source的feature来获取几何体的中心坐标,但在cesium中却没有feature的说法,除了事件获取屏幕数据的时候才有才有feature,在cesium中的entity是很核心的对象,就找了半天才找到相应的属性方法,来获取entity的geometry的中心点坐标,直接上代码作为笔记:

function addSNCPolygonlayer() {
    var sncPolygon = Cesium.GeoJsonDataSource.load(
        './map/nanshanSNCPolygon.geojson', { clampToGround: true } //开启贴地  
    );
    sncPolygon.then(function (dataSource) {
        layerObject.sncPolygon = dataSource
        viewer.dataSources.add(dataSource);
        var entities = dataSource.entities.values;
        var colorHash = {};
        for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];debugger
            var name = entity.name;
            var color = colorHash[name];
            if (!color) {
                color = Cesium.Color.fromRandom({
                    alpha: 0.4
                });
                colorHash[name] = color;
            }
            // entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; //去掉地形遮挡
            entity.polygon.material = Cesium.Color.LIGHTGREEN.withAlpha(0.5);
            entity.polygon.outline = true;
            entity.polygon.outlineColor = Cesium.Color.LIGHTGREEN.withAlpha(1);
            entity.polygon.outlineWidth = 2;
            //注意这里..开始
            var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
            var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
            polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
            entity.position = polyCenter;
            // 注意这里..结束
            entity.label={
                // position:
                text:name,
                color : Cesium.Color.fromCssColorString('#fff'),
                font:'normal 32px MicroSoft YaHei',
                showBackground : true,
                scale : 0.5,
                horizontalOrigin : Cesium.HorizontalOrigin.LEFT_CLICK,
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 100000.0),
                disableDepthTestDistance : 10000.0
            }
        }
    });
    viewer.scene.postProcessStages.fxaa.enabled = false;//去锯齿 是文字清晰
    //  viewer.flyTo(district);
}

关注我,及时获取更多干货

 

  • 4
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值