SuperMap iClient3D for Cesium修改标绘图标属性

最新推荐文章于 2025-03-27 11:54:44 发布

转载最新推荐文章于 2025-03-27 11:54:44 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/m0_46880026/article/details/144193686

文章标签：

#3d #javascript #开发语言

作者：Youngbeen7.7

一、前言

超图（SuperMap）与 Cesium 的深度融合，为用户提供了强大的动态标绘功能。通过将 SuperMap iServer 或 SuperMap iClient 与 Cesium 无缝集成，用户可以轻松实现空间数据的可视化、分析与交互式标绘。动态标绘的核心在于允许用户实时地在地图或三维场景中添加、修改、删除标绘对象（如点、线、面等）。这些标绘对象不仅可以从外部数据源加载，还能通过用户的交互操作动态生成。

在使用动态标绘功能时，用户可以通过标绘和属性面板轻松进行图标的添加与属性修改。尽管如此，在某些场景下，用户可能不希望依赖现有的面板来进行操作。那么，在没有加载标绘面板的情况下，如何实现图标的动态添加与属性修改呢？

本文将重点介绍如何通过代码实现动态添加图标以及修改图标属性，从而绕过标绘面板，直接在代码层面完成这些操作。

二、代码详解

1、初始化标号库

var viewer = new Cesium.Viewer('cesiumContainer');
//创建并添加Plottinglayer
viewer.plottingLayer = new cesium.PlottingLayer(scene, "plottingLayer");
viewer.scene.plotLayers.add(plottingLayer);
//获取Plotting实例
plotting = Cesium.Plotting.getInstance(serverUrl, scene);

2、使用 createSymbol 方法动态添加图标，这个方法可以创建不同类型的标号（如点、线、面等）并将其添加到场景中

var point = [new cesium.PlotPoint3D(91.2289399584463, 44.2810161553334, 0)];
plottingLayer.createSymbol(421, 30502, point});

3、使用 createSymbol 方法来创建和修改图标的默认属性，比如图标的颜色、大小、图片路径等。如果有些属性超出了配置项的范畴，通常会通过 options 配置项来初始化这些属性，并通过回调函数在后期进一步修改其他图标的内置属性

var testPoints = [];
testPoints.push(new cesium.PlotPoint3D(97.42946743034082, 28.0240600823256, 0));
plottingLayer.createSymbol(421, 43, testPoints, {
       lineColor: Cesium.Color.BLUE,//设置图标颜色
       lineWidth: 3,//设置图标线的宽度
       textContent: "测试测试测试"//设置图标文本
      }, function (result) {
        // 这个函数会在符号创建完成后被调用
        result.feature._display = true//显示隐藏
        result.feature._gridSymbolSize = { x: 30, y: 30 }//大小
        result.feature._symbolTextStyle._outline = false,//文字描边
        console.log("符号创建成功:", result.feature);
        // 可以在这里进行后续的操作
            })

4、如果想要对已经创建的图标进行属性修改，通常的方法是通过获取该图标的对象引用，然后直接修改它的属性

$('#clearbox').click(function () {
        var point1 = [new cesium.PlotPoint3D(44.2810161553334, 91.2289399584463, 0)];//修改位置
        obk.feature.localPoints=point1
        obk.feature.scale = 3 //修改大小
        obk.feature.gridLineWidth= 7//修改线宽
        obk.feature.symbolStyle.lineColor=Cesium.Color.RED//修改颜色
              });