SuperMap iClient3D for WebGL 如何导出、导入动态标绘内容

最新推荐文章于 2025-06-27 18:05:03 发布

supermapsupport

最新推荐文章于 2025-06-27 18:05:03 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

文章标签： webgl

原文链接：https://blog.youkuaiyun.com/m0_46756112/article/details/148633594

作者：Zhouyp

2.JSON数据转换为标绘对象并加入到当前标绘图层

四、完整示例

一、前言

动态标绘广泛应用于电力、通信和应急等多个行业和领域。在项目实施中，我们可以将标绘内容转换为JSON，搭配后端程序进行存储。也可从JSON数据恢复显示。一起来看看如何实现吧！

二、软件版本

前端：supermap-iclient3d-for-webgl_webgpu-11.3.0-250526-46235

后端：ASP.NET Web API 示例程序

三、核心代码

1.标绘内容导出为JSON

var jsonData = [];
plottingLayer.geoGraphicObjects.forEach(obj => {
    var objJsonStr = obj.toGeoJson();
    jsonData.push(objJsonStr);
});

2.JSON数据转换为标绘对象并加入到当前标绘图层

json.forEach(objJsonStr => {
    plottingLayer.geoJsonToGeoGraphicObject(JSON.parse(objJsonStr));
})

四、完整示例

下载并启动后端示例程序：https://gitee.com/zhouyp002/PlottingWebApplication

启动后端示例程序，粘贴下方代码到范例页面中点击运行按钮

<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Test">
    <meta name="SuperMap3D-sandcastle-labels" content="Geometries">
    <title>SuperMap GeometryConversionJson</title>

    <link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/sideBar.css">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen,projection" href="css/jquery-sticklr.css" />
    <script src="js/plotPanelControl/PlottingUI.Include.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="./js/config.js"></script>
    <link href="css/bootstrap-new.min.css" rel="stylesheet">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
    <script type="text/javascript"
        src="../../Build/SuperMap3D/ThirdParty/Workers/MGIS_SuperMap3D/MGIS_SuperMap3D.js"></script>


    <style type="text/css">
        .panel {
            height: 100%;
        }

        /*下拉框的高度*/
        .combo-p {
            height: 150px;
        }

        /*滚动条*/
        .propertygrid {
            overflow: auto;
        }

        #menuPlotting {
            position: absolute;
            top: 20%;
            z-index: 999999;
            border-radius: 4px;
            padding-top: 2px;
        }
    </style>

</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html"
    style="margin: 0px; overflow: hidden;background: #fff;height: 100%;">
    <div id="menu" style="position: absolute;width: 320px;height: 100%;border: 1px solid #3473b7;z-index: 98;">
        <div class="easyui-panel"
            style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;padding:5px; width: 100%;height: 100%">
            <div class="easyui-tabs" style="width: 100%;height: 100%">
                <div id="plotPanel" title="标绘面板" style="  height: 100%;overflow: hidden;"></div>
                <div id="stylePanel" title="属性面板" style="width: 320px;overflow: hidden"></div>
            </div>
        </div>
    </div>
    <div id="SuperMap3DContainer" class="fullSize" style="position: relative;left: 320px;width: 84%;height: 100%;">
        <div id='toolbar' class="param-container tool-bar">
            <div class="param-item">
                <button type="button" id="save" class="button black">保存</button>
                <button type="button" id="clear" class="button black">清除</button>
                <button type="button" id="load" class="button black">加载</button>
                <br>
                <p>提示</p>
                <span>
                    保存：将场景中的标绘内容导出为JSON<br>
                    清除：清除场景内的标绘内容<br>
                    加载：将JSON数据加载为场景中的标绘<br>
                </span>
                <br>
                <span id="success" style="display: none;">
                    保存成功！
                </span>
                <div style="width: 300px;max-height: 600px; overflow-y: auto;">
                    <span id="json">
                    </span>
                </div>
            </div>
        </div>
    </div>
    <script id="SuperMap3D_sandcastle_script">
        var scene, viewer, serverUrl, plotting;
        var plottingLayer;
        var plotEditControl;
        var plotDrawControl;
        var plotPanel;

        function onload(SuperMap3D) {
            'use strict';
            if (window.Cesium) {
                window.SuperMap3D = SuperMap3D;
            }
            viewer = new SuperMap3D.Viewer('SuperMap3DContainer');
            scene = viewer.scene;
            scene.lightSource.ambientLightColor = new SuperMap3D.Color(0.65, 0.65, 0.65, 1);
            serverUrl = "http://localhost:8090/iserver/services/plot-jingyong/rest/plot"
            InitPlot(viewer, serverUrl);
        }

        function InitPlot(viewer, serverUrl) {
            if (!viewer) {
                return;
            }
            plottingLayer = new SuperMap3D.PlottingLayer(scene, "plottingLayer");
            scene.plotLayers.add(plottingLayer);
            plotEditControl = new SuperMap3D.PlotEditControl(scene, plottingLayer);//编辑控件
            plotDrawControl = new SuperMap3D.PlotDrawControl(scene, plottingLayer);//绘制控件
            plotDrawControl.drawFinishEvent.addEventListener(function () {//标绘结束，激活编辑控件
                plotEditControl.activate();
            });

            plotting = SuperMap3D.Plotting.getInstance(serverUrl, scene);
            //标绘面板
            initPlotPanel("plotPanel", serverUrl, plotDrawControl, plotEditControl, plotting);
            stylePanel = new StylePanel('stylePanel', plotEditControl, plotting);

            try {
                var promise = scene.open("http://localhost:8090/iserver/services/3D-WorkSpace-6/rest/realspace");
                SuperMap3D.when(promise, function (layers) {
                }, function () {
                    var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                });
            }
            catch (e) {
                if (widget._showRenderLoopErrors) {
                    var title = '渲染时发生错误，已停止渲染。';
                }
            }

            $("#save").on("click", () => {
                // 导出标绘内容为JSON
                var jsonData = [];
                plottingLayer.geoGraphicObjects.forEach(obj => {
                    var objJsonStr = obj.toGeoJson();
                    jsonData.push(objJsonStr);
                });

                // 在界面中显示
                $("#json").text(JSON.stringify(jsonData, null, 2));

                // 发送到服务端进行落盘存储 ，可以修改为您自己的服务端接口
                fetch("http://localhost:5058/api/Plotting", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(jsonData)
                })
                    .then((response) => {
                        console.log("保存成功");
                        $("#success").show()
                        return response.json()
                    })
                    .catch((error) => {
                    });
            })

            $("#clear").on("click", () => {
                plottingLayer.removeAll();
            })

            $("#load").on("click", () => {
                // 从服务端请求标绘JSON数据，可以修改为您自己的服务端接口
                fetch("http://localhost:5058/api/Plotting")
                    .then((response) =>
                        response.json()
                    )
                    .then((json) => {
                        json.forEach(objJsonStr => {
                            plottingLayer.geoJsonToGeoGraphicObject(JSON.parse(objJsonStr));
                        })
                        console.log("加载成功:", data);
                    })
                    .catch((error) => {
                        console.error("Error:", error);
                    });
            })
        }
        if (typeof MGIS_SuperMap3D !== 'undefined') {
            window.startupCalled = true;
            onload(MGIS_SuperMap3D);
        }
    </script>
</body>

</html>