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

 作者:Zhouyp

目录

一、前言

二、软件版本

三、核心代码

1.标绘内容导出为JSON

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>

### 回答1: SuperMap iClient 3D for WebGL 是一款基于 WebGL 技术的三维地图开发工具,主要用于构建具有三维效果的地图应用程序。该工具提供了丰富的 API 接口和示例代码,可以帮助开发者快速上手,实现各种三维地图功能,如地形展示、建筑物模型、动态效果等。同时,SuperMap iClient 3D for WebGL 还支持多种数据格式,包括 SuperMap iServer 数据、OGC 标准数据、KML、GeoJSON 等,可以满足不同应用场景的需求。 ### 回答2: SuperMap iClient3D for WebGL是一个基于WebGL技术的三维地图开发框架。它提供了一系列的API和工具,使开发人员能够更加轻松地构建出高质量的三维地图应用。下面,我将从以下几个方面介绍SuperMap iClient3D for WebGL教程。 一、环境配置 SuperMap iClient3D for WebGL的开发需要先配置开发环境,包括安装Node.js、下载安装SuperMap iServer、下载安装SuperMap iClient3D资源包、创建Web应用程序。 二、基本概念 在学习SuperMap iClient3D for WebGL之前,需要了解一些基本概念。这些概念包括:场景(Scene)、层(Layer)、覆盖物(Overlay)等。在使用SuperMap iClient3D for WebGL时需要理解这些概念。 三、API使用 SuperMap iClient3D for WebGL提供了众多的API,使用这些API能够快速构建出一个三维地图应用。这些API包括:场景相关的API,如创建场景、设置场景属性等;层相关的API,如加载图层数据、隐藏、显示图层等;覆盖物相关的API,如创建点、线、面等覆盖物。 四、进阶应用 在掌握SuperMap iClient3D for WebGL的基础之后,可以通过进阶应用来进一步加深对这个框架的理解。进阶应用包括地球的三维测量、地球的动态效果、地球的热点区域等。 总之,SuperMap iClient3D for WebGL是一个非常实用的三维地图开发框架。通过学习其教程,开发人员可以更加方便、快速地构建出高质量的三维地图应用。 ### 回答3: SuperMap iClient 3D for WebGL是一款基于WebGL技术的开源GIS JavaScript库,用于构建高效、功能强大的3D GIS应用程序。这个库支持在Web浏览器里实现高质量的三维可视化效果,包括三维地形、建筑物、模型、标签等。现在,我来为你们讲解一下关于SuperMap iClient 3D for WebGL的教程。 一、前置知识 在接触SuperMap iClient 3D for WebGL之前,建议你先学习基本的WebGL知识和JavaScript语言,也应该具备计算机图形学基础和3D模型制作知识。 二、环境配置 在使用SuperMap iClient 3D for WebGL前,我们需要进行环境配置,在编写和运行项目时可以根据需要安装一系列依赖项,例如Node.js、npm包管理器、Gulp自动化工具、webpack工具和TypeScript编译器等。 三、基本使用 SuperMap iClient 3D for WebGL提供了丰富的API以实现3D可视化应用程序的开发,其中包括地图、图层、标注、工具、渲染等方面。同时,它还提供了多种数据格式的支持,如XYZ、OGC、JSON、KML、GML等。此外,SuperMap iClient 3D for WebGL还支持多种操作和交互方式,如平移、旋转、缩放、选取、编辑等,让用户可以更加自由地探索和编辑地图数据。 四、示例应用 SuperMap iClient 3D for WebGL提供了一系列的示例应用程序,可以帮助用户更好的理解其使用方法和特点,其中包括一些经典的三维场景展示和实时数据可视化等。例如,用户可以体验到城市三维建模、天气预报、热力图、空气质量监控等实用的功能。此外,SuperMap iClient 3D for WebGL也提供了一些模板和组件,供用户快速搭建自己的3D GIS应用程序。 总之,SuperMap iClient 3D for WebGL是一款非常优秀的基于WebGL技术的GIS JavaScript库,具有开源、高效、功能强大、易用等特点,可以为用户提供丰富多彩的三维GIS应用程序。当然,在使用前,建议用户先了解基本的WebGL和JavaScript知识,同时还需配置好开发环境。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值