8、添加PolylineCollection线

本节演示添加线要素,使用第四节单击事件的例子,修改点击事件创建线要素。

1、重新修改地图默认位置

double r = glm::radians(-45.0);
Cesium::HeadingPitchRoll *orientation = new Cesium::HeadingPitchRoll(0.0, r, 0.0);
glm::dvec3 initialPosition1 = Cesium::Cartesian3::fromDegrees(113.0041, 22.9950, 1000);

viewer._scene->_camera->setView(orientation, initialPosition1);

2、修改Handler的点击函数mouseUp,创建PolylineCollection和线要素

static void mouseUp(void *handler, Cesium::ScreenEvent *event) {
    Handler *aggregator = (Handler *) handler;

    if (aggregator->polylines==NULL) {
        aggregator->polylines = new Cesium::PolylineCollection();
        aggregator->viewer->_scene->primitives()->add(aggregator->polylines);
        glm::dvec3 initialPosition1 = Cesium::Cartesian3::fromDegrees(113.00, 23.00);
        glm::dvec3 initialPosition2 = Cesium::Cartesian3::fromDegrees(113.01, 23.00);
        glm::dvec3 initialPosition3 = Cesium::Cartesian3::fromDegrees(113.01, 23.01);
        glm::dvec3 initialPosition4 = Cesium::Cartesian3::fromDegrees(113.00, 23.01);
        std::vector<glm::dvec3> position{initialPosition1, initialPosition2, initialPosition3, initialPosition4,
                                         initialPosition1};

        aggregator->polyline = aggregator->polylines->add(position);
        aggregator->polyline->width(5);
    }
}

2、运行点击地图即可看到线要素

 完整代码

/**
 * Created by IBM on 2021/3/3.
 */
#include <iostream>
#include <Widgets/Viewer/Viewer.h>
#include <Scene/PolylineCollection.h>
#include <Scene/Polyline.h>

class Handler {
public:
    Cesium::Viewer *viewer;
    Cesium::PolylineCollection *polylines = NULL;
    Cesium::Polyline *polyline = NULL;

    /**
     * 鼠标抬起事件
     * @param type
     * @param position
     */
    static void mouseUp(void *handler, Cesium::ScreenEvent *event) {
        Handler *aggregator = (Handler *) handler;

        if (aggregator->polylines==NULL) {
            aggregator->polylines = new Cesium::PolylineCollection();
            aggregator->viewer->_scene->primitives()->add(aggregator->polylines);
            glm::dvec3 initialPosition1 = Cesium::Cartesian3::fromDegrees(113.00, 23.00);
            glm::dvec3 initialPosition2 = Cesium::Cartesian3::fromDegrees(113.01, 23.00);
            glm::dvec3 initialPosition3 = Cesium::Cartesian3::fromDegrees(113.01, 23.01);
            glm::dvec3 initialPosition4 = Cesium::Cartesian3::fromDegrees(113.00, 23.01);
            std::vector<glm::dvec3> position{initialPosition1, initialPosition2, initialPosition3, initialPosition4,
                                             initialPosition1};
            aggregator->polyline = aggregator->polylines->add(position);
            aggregator->polyline->width(5);
        }
    }
};
int main(int argc, char *argv[]) {
    Handler *handler = new Handler();
    Cesium::Viewer viewer = Cesium::Viewer(500, 300);
    handler->viewer = &viewer;
    std::string url = "https://dev.virtualearth.net";
    std::string key = "AmXdbd8UeUJtaRSn7yVwyXgQlBBUqliLbHpgn2c76DfuHwAXfRrgS5qwfHU6Rhm8";
    Cesium::BingMapsImageryProvider *imageryProvider1 = new Cesium::BingMapsImageryProvider(url, key);
    viewer.imageryLayers()->addImageryProvider(imageryProvider1);
    double r = glm::radians(-45.0);
    Cesium::HeadingPitchRoll *orientation = new Cesium::HeadingPitchRoll(0.0, r, 0.0);
    glm::dvec3 initialPosition1 = Cesium::Cartesian3::fromDegrees(113.0041, 22.9950, 1000);
    viewer._scene->_camera->setView(orientation, initialPosition1);
    //创建事件
    Cesium::ScreenSpaceEventHandler *_eventHandler = new Cesium::ScreenSpaceEventHandler(handler);
    _eventHandler->setInputAction(&Handler::mouseUp, Cesium::ScreenSpaceEventType::LEFT_CLICK);//设置鼠标点击事件
    viewer.startAnimating(true);//启动opengl循环
    system("pause");
    return 0;
}

返回目录

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要使用Cesium PolylineCollection绘制线,您需要执行以下步骤: 1.创建Cesium Viewer对象 ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); ``` 2.创建PolylineCollection对象 ```javascript var polylineCollection = new Cesium.PolylineCollection(); ``` 3.创建PolylineGeometry对象 ```javascript var positions = Cesium.Cartesian3.fromDegreesArray([ -75.59777, 40.03883, -75.58833, 40.03683 ]); var polylineGeometry = new Cesium.PolylineGeometry({ positions: positions, width: 10.0 }); ``` 4.创建Material对象 ```javascript var material = Cesium.Material.fromType('Color'); material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 1.0); ``` 5.创建PolylineInstance对象 ```javascript var polylineInstance = new Cesium.PolylineInstance({ geometry: polylineGeometry, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) }, id: 'polyline', pickPrimitive: sceneMode === Cesium.SceneMode.SCENE3D ? true : false, appearance: new Cesium.PolylineMaterialAppearance({ material: material }) }); ``` 6.将PolylineInstance对象添加PolylineCollection对象中 ```javascript polylineCollection.add(polylineInstance); ``` 7.将PolylineCollection对象添加到场景中 ```javascript viewer.scene.primitives.add(polylineCollection); ``` 这样就可以在Cesium Viewer中绘制一条红色的宽度为10的折线。 ### 回答2: Cesium PolylineCollection是用于绘制线Cesium实体之一。 在使用Cesium PolylineCollection绘制线时,我们需要先创建一个PolylineCollection对象。首先,我们可以实例化一个PolylineCollection对象,并将其添加到场景中,这样才能显示出来。 然后,我们可以使用add方法来添加线段。这个方法需要我们提供表示线段的位置数组,位置数组中的每个元素都是Cartesian3对象,表示线段中的一个点。我们可以根据需要添加多个点,来创建一条有多个线段组成的线。 在添加线段后,我们可以根据需要设置线的样式,如线的颜色、宽度等。这些样式可以通过Polyline对象的属性进行设置。例如,我们可以通过设置Polyline的material属性来设定线的颜色和透明度。此外,我们还可以设置线的宽度、线帽样式、线段连接样式等。 当设置好线的样式后,我们需要调用PolylineCollection的update方法,来使这些设置生效。这个方法会触发重新渲染,将更新后的线段显示出来。 使用PolylineCollection绘制线的过程可以紧密结合Cesium中的其他功能来实现更加丰富的应用。例如,我们可以在PolylineCollection添加交互功能,实现鼠标点击、拖拽等操作来对线进行动态编辑。 综上所述,Cesium PolylineCollection是一个方便实用的工具,可以用于绘制线,通过设置线的样式和属性,可以实现不同风格的线段,并且可以与Cesium中的其他功能结合使用,实现更加丰富的应用场景。 ### 回答3: CesiumPolylineCollection是一种用于绘制线的工具。通过使用Cesium的API和一些特定的属性,我们可以很容易地绘制出线条。 首先,我们需要创建一个PolylineCollection对象。可以通过以下代码实现: ``` var polylineCollection = new Cesium.PolylineCollection(); ``` 接下来,我们可以使用PolylineCollection的add方法来添加线条。每条线需要指定一些属性,比如位置、颜色、宽度等。我们可以通过以下代码添加一条线: ``` var positions = Cesium.Cartesian3.fromDegreesArray([ -75.0, 35.0, -125.0, 35.0 ]); var polyline = polylineCollection.add({ positions: positions, width: 5, material: Cesium.Color.RED }); ``` 上述代码中,我们先使用Cesium的Cartesian3.fromDegreesArray方法创建了线条的起点和终点位置,这里的位置是以经度和纬度的形式给出的。然后,我们通过调用PolylineCollection的add方法来添加了一条线,指定了位置、宽度和颜色等属性。 最后,我们可以将PolylineCollection对象添加到场景中,这样就可以在三维地球上显示出线条了。代码如下: ``` viewer.scene.primitives.add(polylineCollection); ``` 上述代码中,viewer是Cesium.Viewer对象的实例,通过调用viewer.scene.primitives.add方法将PolylineCollection对象添加到场景的可视化图层中。 通过上述步骤,我们就可以使用CesiumPolylineCollection绘制出线条了。当然,我们还可以进一步探索Cesium的API,并根据需要调整线条的属性,来满足不同的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值