OpenLayer+WebGIS实时协作黑科技！多人同步标绘神器

jzshmyt

已于 2025-05-06 10:20:09 修改

阅读量224

点赞数 1

分类专栏： JAVASCRIPT 文章标签：前端 javascript node.js websocket

于 2025-05-02 11:00:01 首次发布

本文链接：https://blog.youkuaiyun.com/jzshmyt/article/details/147660675

版权

JAVASCRIPT 专栏收录该内容

10 篇文章

订阅专栏

基于OpenLayer的跨平台GIS协同标绘系统，GeoJSON+Socket.io OpenLayer实时协同全链路解决方案，WebGIS协同标绘痛点终结者！应急指挥/智慧城市必备!

系统功能及特点：

1、支持场景构建、场景保存、场景删除、场景列表显示、场景加载等管理功能；

2、支持多用户终端协同标绘，基于socket的事件监听和广播机制实现协同；

3、支持点、线、面、圆形等图形标绘（可扩展）；

4、支持标绘对象的选择、编辑、移动、删除等操作；

5、采用JSON.stringify将场景列表及场景数据持久化为 json 文件存储；

系统录屏演示：

基于ol的在线协同标绘系统

技术栈说明：

    <link rel="stylesheet" href="lib/openlayer/v10.5.0/ol.css">
    <script src="lib/openlayer/v10.5.0/dist/ol.js"></script>

  "dependencies": {
    "express": "^5.1.0",
    "socket.io": "^4.8.1",
    "uuid": "^11.1.0"
  }

源代码结构：

<!DOCTYPE html>
<html>
    <title>协同标绘系统</title>
    <link rel="stylesheet" href="lib/openlayer/v10.5.0/ol.css">
    <link rel="stylesheet" href="plot.css">
    <script src="lib/openlayer/v10.5.0/dist/ol.js"></script>
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
</head>
<body>
    <div class="scene-panel">
        <div class="scene-controls">
            <input type="text" id="sceneName" style="height:22px" placeholder="输入场景名称">
            <button onclick="saveScene()">保存场景</button> <button onclick="toggleScenes()">场景列表</button>|
            <div class="toolbar" style="display: inline;"><button data-type="Point">点</button>
                <button data-type="LineString">线</button><button data-type="Polygon">面</button>
                <button data-type="Circle">圆</button><button data-type="Arrow">箭头</button>
                <button id="delete-all">清空</button> | 
                <button id="select-btn" class="active">选择</button>
                <button id="modify-btn">编辑</button><button id="move-btn">移动</button><button id="delete-btn">删除</button>
            </div>
        </div>
        <div class="scene-list" id="sceneList"></div>
    </div>
    <div class="user-list" id="userList"></div>
    <div id="map"></div>
    <script src="plot-utils.js"></script>
    <script src="plot-scene.js"></script>
    <script src="plot-main.js"></script>
    <script src="plot-interaction.js"></script>
    <script src="plot-style.js"></script>

</body>

</html>