webGIS实践（geoserver+openlayer+django）3_3_openlayer绘制矢量要素

最新推荐文章于 2021-11-03 10:26:12 发布
最新推荐文章于 2021-11-03 10:26:12 发布
阅读量355 收藏
点赞数
分类专栏： WEBGIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41310868/article/details/106167715
版权
本文介绍如何在webGIS应用中结合Geoserver、OpenLayers和Django，实现地图上的点、线、面和圆的绘制功能。支持几何对象吸附和手绘模式，提供了良好的用户交互体验。
摘要由CSDN通过智能技术生成

一、效果

下拉列表选择需要绘制的几何类型，支持点（Point）、线（LineString）、面（Polygon）、圆（Circle）。

点击绘图按钮后，可以在图面上绘制几何对象，支持吸附功能。

画线或多边形的时候，按住shift键，按下鼠标左键在地图上绘制，可以模拟手绘。

 

实际测试一下，施绘效果还不错。

 

二、代码

新建一个DrawOL.HTML。

 

<!DOCTYPE html>
<html lang&
最低0.47元/天 解锁文章
才华横溢吴道简
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webGIS实践（geoserver+openlayer+django）目录索引
吴道简的博客
05-17 579
webGIS实践（geoserver+openlayer+django）0_0_目标确立与拆解 https://blog.csdn.net/sinat_41310868/article/details/106152466 webGIS实践（geoserver+openlayer+django）1_0_实验数据获取与数据入库 https://blog.csdn.net/sinat_41310868/article/details/106152583 webGIS实践（geoserver+o..
webGIS实践（geoserver+openlayer+django）3_0_openlayer加载瓦片地图
吴道简的博客
05-16 957
本章开始地图的前端渲染。 因为geoserver内部嵌的前端是openlayer，所以先讲openlayer的使用。 但openlayer相对来说，还是要难一些，小众一些，所以不想用openlayer的，可以看后面的leaflet专题，脚本库不一样，实现效果一样。 本文主要看openlayer怎么加载地图。 一、js库代码下载 前端脚本库可以用网络资源，也可以下载下来，但openlayer官网不是很稳定，所以可以把examples、docs、sources都下载下来。 下载链接：https.
OpenLayers笔记2：点、线、面矢量要素的自定义渲染
getMoreTime的博客
04-02 6988
新建矢量图层ol.layer.Vector时，可以通过使用ol.style来自定义渲染地图矢量要素的样式； ol.style概述 在ol.style中默认可以配置的要素包括： Fill：填充的样式，对应的模块为ol.style.Fill； Geometry：地理属性，对应模块为ol.style.Style，使用GeometryFunction设置要素的地理位置、几何属性等； Image：图像的样式...
geoserver 样式（点，线，面）
03-16
用于geoserver样式的编辑，从代码中体会geoserver样式的书写规则，样式中通过filter类实现了样式的不同实现，将地图的表现更加的丰富
html5 统计图 等值线,浅谈WebGIS等值线模态前端展示生成绘制(算法经验)
weixin_39857153的博客
06-04 495
摘要：等值线是GIS制图中常见的功能，一般有两种思路：一种是先进行插值生成等值面栅格图，然后将等值面提取成等值线；另一种是进行插值后，直接再根据算法进行插值点连接生成一条尽量闭合以及平滑的曲线。在进行插值中，有很多算法可以选择，各种算法中也会有不同的参数需要调试，并且更具实际情况，比如地理环境因素等进行微调，最后建模。这里我们要讨论的是忽略一切外在因素，只根据坐标、等值字段值进行插值和展示的探讨。...
WEBGIS的基础知识
04-06
webGIS基础知识，供初学者了解，除此之外，还有WEBGIS的入门教程
webGIS实践（geoserver+openlayer+django）4_4_python django整合geoserver+openlayer前后端
吴道简的博客
05-17 899
接上文，前端页面访问django转发的WMS服务，而不直接访问geoserver发布的。 一、geoserver.py 添加两个方法： # 渲染geoserver页面 def geoserverget(request): return render(request, 'GeoserverOL.HTML') # 提交 gml到geoserver def geoserverpost(request): if request.POST: head = {"Co..
webGIS实践（geoserver+openlayer+django）3_2_openlayer查询渲染geojson矢量要素
吴道简的博客
05-16 650
在geoserver中，我们已经分析过getFeature的url了。 通过getFeature，访问类似如下的url，可以返回一个geojson。 http://localhost:8080/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=gismap%3Av6_time_pref_pgn
webGIS实践（geoserver+openlayer+django）3_4_openlayer选择修改矢量要素
吴道简的博客
05-17 273
一、效果 下拉列表操作方式中选择draw的时候，可以绘制要素；选择select的时候，可以选择要素；选择modify的时候，可以修改要素。 二、代码 新建一个ModifyOL.HTML。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>openlayer修改要素</title> ...
WebGis-ArcGis开发例子
weixin_30478757的博客
12-20 511
开发例子 转载于:https://www.cnblogs.com/zhangpan1244/archive/2012/12/20/2825828.html
webGIS实践（geoserver+openlayer+django）3_1_openlayer展绘点线面注记
吴道简的博客
05-16 425
上一篇已经讲了，怎么加载瓦片地图。 这篇就看看怎么简单的渲染矢量点线面数据。 最简单的，绘制点线面注记。 效果长这样： 新建一个文件FeatureOL.HTML。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>openlayer渲染矢量要素</title> &l...
使用QGIS绘制图形并发布服务到GeoServer
Xeon_CC的博客
11-03 3668
打开QGIS以后 新建shapefile 选择要保存的路劲，并自定义文件名，设置Geometry type为面Polygon 每一个面对应的字段有哪些可以自定义，这里就默认吧 创建以后，点击编辑就可以绘制多边形了 如果要调出常用形状的工具栏，那么右键工具条，勾选上如下图所示 开始绘图 可以查看表属性，并高亮显示对应的记录 这个用来选中某个图形进行操作 导出为shp文件 打开pgAdmin4，并新建一个名为testdb的数据库 先添加插件，添加一个名为postgis的插件 打开Po
GeoServer之高级符号与图层组
不睡觉的怪叔叔的博客
07-23 4187
目录   一、使用QGIS创建样式化图层描述符     1.发布WMS服务              2.在QGIS中配置符号     3.将样式输出为SLD文件     4.设置WMS图层应用SLD     5.设置WMS服务city_limits图层的默认样式 二、将多图层发布为WMS服务     1.先建图层组     2.在图层组中添加图层     3.设置坐标参照系...
GIS篇—搭建本地地图服务器(geoserver )和 leaflet 绘制多边形，点击事件等
用心做每件事
08-08 8027
因系统开发需求，要开发一个地图数据图层叠加，很简单，但是要求是在内网部署。这就说明了，不能用第三方地图服务器，如百度地图，天地图，谷歌等。那么问题就来了，要什么地图？这个时间我才知道GIS这个名词，我记得有段时间最可笑，自己去投了找GIS地图的岗位，刚开始以为对接百度地图开发就是GIS了，哈哈~原原谅我的无知。 结果，咨询了网友和百度GIS是一门学科，还有专门的考试...
WebGIS最佳实践-3 为GeoServer编写漂亮的Style
weixin_30613343的博客
05-14 345
凡是用过的人都知道，在GeoServer里面创建美观的Style是一件痛苦的事（如果有人觉得是种享受请不要反驳，当我哗众取宠就是了）。GeoServer直接支持OGC的SLD作为样式（Style）的描述。SLD是用XML描述的，而XML是由许多相互嵌套的“<"和">"搭建的。我很不喜欢手动编写XML，尤其是从空白文件开始编写，这是其一。其二，在GeoServer的Style页面...
Geoserver基础配图研究
zbcx_ZGIS的博客
08-30 3542
作者：刘端强 1面图层配图 1.1基本框架 这个是geoserver默认的polygon的代码，我们可以将它作为日后编辑面图层的基础框架。 AAAAAA是十六进制的颜色代码，现在我想将面改成别的颜色，我将其替换为#66CCFF，观察其效果： 1.3设置面边框 面的边框设置与颜色类似，不过边框作为一种线，是有宽度这个属性的，我们有时还需要设置其宽度。 我们发现，在设置面的颜色的...
geoserver样式（SLD方式）—— 实线、虚线样式
huzhenv5的博客
12-28 4208
geoserver默认使用SLD的方式定义style，下面将介绍如何使用sld的方式定义普通的直线和虚线样式。 普通直线样式： <FeatureTypeStyle> <Rule> <LineSymbolizer> <Stroke> <CssParameter...
使用Openlayers绘制Geoserver离线瓦片
许博文的专栏
11-25 1044
需求 将遥感影像tif数据通过Geoserver进行发布，为了加快服务器响应速度，我们使用Geoserver对遥感数据做了缓存处理，如下图，使用离线瓦片，我这里出现了中文不识别的问题，因此没法直接Submit去执行切片任务，F12查看元素，修改一下Form表单里的参数，将不正常显示的文字修改为实际的中文，再点Submit就提交成功了，要注意该页面有两个表单提交的地方，要修改对应的地方才可以。 代码 <html xmlns="http://www.w3.org/1999/xhtml"> &l
开源WebGIS与GeoServer、MapServer深度解析
"该资源主要涉及SHAPE投影文件在WebGIS开发中的应用，特别是与GeoServer和MapServer相关的开源WebGIS平台。投影文件为Transverse Mercator，具体描述了坐标系统和投影参数。同时，资源涵盖了开源WebGIS的基本概念、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值