leaflet+geoserve+jquery实现简单Webgis系统(附源码下载)

不要随地大便

已于 2022-06-05 09:13:56 修改

阅读量959

点赞数 1

文章标签： jquery 数据库 vscode ajax 前端框架

于 2022-06-03 09:42:14 首次发布

本文链接：https://blog.csdn.net/qq_48273925/article/details/125061672

版权

1.基于leaflet的小系统，源码1000多行，能注释的我都注释了，运行没有任何问题，源码下载链接在评论区；

2.里面用到了很多插件，大部分插件都是使用BootCDN的复制<script>标签，懒得下载到本地，因为系统本身非常小，不影响加载，所以大家得联网使用了；

3.大家如果使用过程中有什么问题或者建议希望能够提出来，这是我最希望看到的；

4.待优化地方：

4.1 未能使用LocalStorage实现缓存；

4.2 未能使用Postgres保存绘制图层并实现简单空间分析，只使用了turf插件库的简单函数，Node.js只会一点皮毛；

4.3 鼠标移入面要素会覆盖上面的线和点要素

4.4 绘制缓冲区无法对请求的要素图层使用，因为会对每个要素进行缓冲区分析，需要先合并，精力有限，没有去深入研究了；

4.5 很多细节可以处理好，比如样式设置，算法结构，正在学习Vue框架；

5.Jquery的Ajax请求geoserver需要大家自己已经配置好geoserver环境，再设置一下请求参数才可以请求到图层；

6.结构图：

7.Html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="#" />
    <title>leaflet</title>
    <!--    引用Leaflet的css和js库-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
    <!--    因为要使用gis server发布的底图服务，所以引入esri—leaflet插件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/esri-leaflet/3.0.3/esri-leaflet-debug.js"></script>
    <!--    加载draw插件绘制几何图形-->
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" rel="stylesheet">
    <!-- 加载Jquery插件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 开源的空间分析库turf(缓冲区用到) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
    <!-- 右键菜单插件 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.js"></script>
    <!-- 炫酷鼠标效果 -->
    <link href="./Leaflet.VisualClick-master/src/L.VisualClick.css" rel="stylesheet" type="text/css" />
    <script src="./Leaflet.VisualClick-master/src/L.VisualClick.js"></script>
    <!-- css文件引入 -->
    <link href="leaflet.css" rel="stylesheet">

</head>
<!-- 清除浏览器默认右键事件 -->
<body oncontextmenu="doNothing()">
    <div id="maid"></div>
    <!-- 工具栏容器 -->
    <div id="function">
        <ul>
            <li><a href="#" id="displayChart">显示参数列表</a></li>
            <li><a href="#" id="displayLanLat">显示经纬度</a></li>
            <li><a href="#" id="journal">打开日志</a></li>
            <!-- <li><button id="json">加载geojson</a></li> -->
            <li id="DELETE"><a href="#">删除图层</a>
                <ul>
                    <li><a href="#" class="delJson">清除所有geojson</a></li>
                    <li><a href="#" class="delDraw">清除所有绘制图形</a></li>
                    <li><a href="#" class="delBuffer">清除所有缓冲区</a></li>
                    <li><a href="#" class="delThis">删除指定图层</a></li>
                </ul>
            </li>
            <li><a href="#">其他功能</a>
                <ul>
                    <li><a href="#" class="location">定位至</a></li>
                    <li><a href="#" class="setStyle">设置样式</a></li>
                    <li><a href="#" class="drawBuffer">绘制缓冲区</a></li>
                    <li><a href="#" id="json">加载发布图层</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- 显示参数列表的窗口 -->
    <div id="chart" contenteditable="true">
        当前中心:<p id="center"></p><br>
        当前级数:<p id="zoom"></p><br>
        当前地图范围:<p id="bound"></p><br>
        当前视图范围:<p id="divinfo"></p>
    </div>
    <!-- 定位经纬度输入框窗口 -->
    <form id="inputLngLat">
        定位至:
        <input id="inputLng" type="number" placeholder="请输入经度:">
        <br>
        <input id="inputLat" type="number" placeholder="请输入纬度:">
        <br>
        <input id="sure" type="button" value="确定">
        <input id="cancel" type="button" value="取消">
    </form>
    <!-- 加载Geojson图层窗口 -->
    <form id="Geoserver">
        加载Geoserver发布的数据:
        <input id="workeSpaceName" placeholder="工作区名称:图层名称">
        <br>
        <input id="sure1" type="button" value="确定">
        <input id="cancel1" type="button" value="取消">
    </form>
    <!-- 创建日志显示图层 -->
    <textarea id="text" disabled="disabled"></textarea>
    <!-- 删除图层的窗口 -->
    <div id="delete">
        请选择待删除的图层:
        <br>
        <select class='delete'>
        </select>
        <br>
        <input id="sure2" type="button" value="确定">
        <input id="cancel2" type="button" value="取消">
    </div>
    <!-- 修改图层样式的窗口 -->
    <div id="restyle">
        请选择待修改样式的数据:
        <br>
        <select class='restyle'>
        </select>
        <br>
        请输入图层填充颜色RGB:
        <input class="fillColor" placeholder="默认颜色:红色">
        <br>
        请输入图层填充透明度(0-1):
        <input class="fillOpacity" placeholder="默认透明度:1">
        <br>
        是否绘制边框:
        <input class="stroke" placeholder="默认绘制">
        <br>
        请输入边框颜色RGB:
        <input class="color" placeholder="默认颜色:蓝色">
        <br>
        请输入边框厚度:
        <input class="weight" placeholder="默认厚度:1">
        <br>
        <input id="sure3" type="button" value="确定">
        <input id="cancel3" type="button" value="取消">
    </div>
    <!-- 绘制缓冲区信息输入框 -->
    <div id="buffer">
        请选择待绘制缓冲区图层:
        <br>
        <select class='buffer'>
        </select>
        <br>
        请输入缓冲区距离:
        <input class="radius">
        <br>
        请选择距离单位:
        <select class="units">
            <option>kilometers</option>
            <option>miles</option>
        </select>
        <br>
        请输入缓冲区名称:
        <input class="bufferName" type="text">
        <br>
        <input id="sure4" type="button" value="确定">
        <input id="cancel4" type="button" value="取消">
    </div>
    <!-- 由于多DOM进行大量操作，直接将.jsw文件放在这里 -->
    <script src="leaflet.js"></script>
</body>
</html>

8.效果演示视频（不知道为什么上传的很模糊,于是使用链接）：

简单webgis系统部分功能演示-CSDN直播自己搞的简单webgis系统部分功能演示https://live.csdn.net/v/213700

简单webgis系统部分功能演示-CSDN直播自己搞的简单webgis系统部分功能演示https://live.csdn.net/v/213702

简单webgis系统部分功能演示-CSDN直播自己搞的简单webgis系统部分功能演示https://live.csdn.net/v/213703

不要随地大便

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
6
评论
leaflet+geoserve+jquery实现简单Webgis系统(附源码下载)

1.源码1000多行，我运行没有任何问题，下载链接在评论区；2.里面用到了很多插件，大部分插件都是使用BootCDN的复制标签，懒得下载到本地，因为系统本身非常小，不影响加载，所以大家得联网使用了；3.没有用到Vue框架，这个框架还在学习中，里面也存在很多可以优化的地方（希望使用LocalStorage实现缓存，希望使用Postgres保存绘制图层并实现简单空间分析），大家如果使用过程中有什么问题或者建议希望能够提出来，这是我最希望看到的；4.Jquery的Ajax请求需要大家自己配置一下参........
复制链接

扫一扫