当前位置：首页 > news >正文

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

news 2025/5/4 12:24:37

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

系统功能及特点：

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

2、支持多用户终端协同标绘；

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>

查看全文

http://www.xdnf.cn/news/258859.html