webgis
文章平均质量分 86
Mr Robot
When I’m old and dying, I plan to look back on my life and say “wow, that was an adventure,” not “wow, I sure felt safe.”
山东南海岸程序猿,美国《时代周刊》2006年度风云人物;
《感动中国》2008年度人物;
联合国2019年度“地球卫士奖”
国际奥委会2022年”奥林匹克奖杯“获奖者
展开
-
AXios接受XML格式的webservice并解析成数据格式
AXios接受XML格式的webservice并解析成数据格式。原创 2023-12-14 10:41:27 · 325 阅读 · 0 评论 -
vue使用x2js对xml数据进行转换处理
为了以一种简单易用的方式访问XML数据,你可能不想编译一个C解析器,而是想寻找一个更方便的解决方案。xml2js是一个简单的XML到JavaScript对象转换器,支持双向转换。最简单的安装xml2js的方式是使用npm。只需执行npm install xml2js,npm将会下载xml2js及其所有依赖。xml2js也可以通过Bower进行安装,只需执行bower install xml2js,Bower将会下载xml2js及其所有依赖。#解析XML数据:使用xml2js库轻松进行XML解析。原创 2023-12-13 18:04:02 · 1142 阅读 · 0 评论 -
GIS跟踪监管系统电子围栏
单击“修改”按钮,在地图上拖动电子围栏几何顶点或中心,修改电子围栏要素(参考程序代码7-6),修改完成后弹出相应的对话框,可以修改电子围栏名称,单击“确认”按钮后通过Ajax请求将数据提交到后台服务,后台服务在数据库中更新该电子围栏数据,地图加载更新完成电子围栏要素。单击“新增”按钮,在地图上绘制电子围栏(参考程序代码7-3),绘制完成后弹出相应的对话框,输入电子围栏名称,单击“确认”按钮后通过Ajax请求将数据提交到后台服务,后台服务在数据库中新增一条电子围栏记录,地图上加载新增成功的电子围栏要素。原创 2023-09-17 22:39:14 · 465 阅读 · 0 评论 -
GIS跟踪监管系统单元信息更新
选择一个需要编辑单元的仓库,单击“编辑”按钮,将指定仓库的所有单元几何对象添加到单元编辑图层组,激活编辑单元几何对象。选择一个需要添加单元的仓库,单击编辑单元中的“新增”按钮,激活绘制单元几何对象,在指定仓库中绘制单元,同一楼层中单元与仓库都是采用矢量几何图形表示,对几何图形的操作具有一致性,下面所述内容有重复地将参考编辑仓库部分。• 单个物资定位:在本系统的搜索框中选择单个物资选项,在搜索框输入物资的名称,发送Ajax请求到后台服务,在数据库中查询该物资最新时间的位置信息,客户端地图上加载该物资。原创 2023-09-17 22:14:42 · 140 阅读 · 0 评论 -
天然气跟踪监管系统信息更新
创建一个矢量要素图层组并添加到地图中,注册一个绘制完成事件,当绘制多边形完成后,触发绘制完成事件,将绘制的矢量要素图层添加到矢量要素图层组中,绘制完成的矢量要素即可在地图上显示。此时地图上没有显示任何仓库,在界面右上角的工具栏中单击“仓库”下拉按钮,弹出“仓库”下拉列表,选择“编辑仓库”选项,弹出“编辑仓库”对话框,在该对话框中选择编辑仓库的工具,可以根据需求对仓库进行新增、编辑、删除等操作,如图所示。代码说明:创建编辑几何图形,将矢量要素图层组作为编辑图层组,激活编辑对象,对仓库的几何图形进行修改。原创 2023-09-17 21:50:31 · 109 阅读 · 0 评论 -
天然气跟踪监管系统功能模块实现
需要注意的是,为了便于系统维护,遵循W3C的界面、样式与行为分离的标准,本系统的功能实现代码编写到独立的js(map.js、tool.js)文件中,map.js是系统的主要功能内容,tool.js是封装的一些通用方法,样式代码编写到一个单独的css(style.css)文件中,在系统首页引用这3个文件。所示的搜索框进行模糊搜索,查询需要查看的仓库,当鼠标指针悬浮在搜索结果上时仓库标注会高亮显示(已聚类的仓库标注不会高亮显示),当单击搜索结果时地图缩放至该仓库的中心范围。原创 2023-09-17 21:29:13 · 196 阅读 · 0 评论 -
天然气跟踪监管系统具体实现
• tools.js:工具文件,存储全局变量及公共函数。• map.js:显示前端页面、交互JavaScript代码文件。• style.css:自定义样式文件。index.htm页面主要使用div层来搭建和实现框架,其结构如图7-9所示。整个框架使用层叠的div层搭建,“Ajax加载面板”用于Ajax加载的过渡效果,对应div容器为“loading”;“工具容器”功能面板的功能项容器对应div层为“content-container”,用于加载页面上的各种工具;原创 2023-09-17 21:18:33 · 145 阅读 · 1 评论 -
GIS跟踪监管系统
使用前端的搜索框选择仓库搜索,输入仓库的关键字(如仓库名称、仓库负责人等)进行模糊搜索,搜索结果以列表展示,单击列表中的仓库定位到此仓库在地图上的具体位置。使用Popup标注则帮助用户在地图层级较小时识别仓库,当鼠标指针悬浮在标注上时会高亮显示并弹出仓库基本信息,该信息有仓库名称、仓库所在行政区、仓库所属单位、仓库负责人、仓库面积、楼层数等,还包括仓库的操作提示及仓库内单元的操作向导。本系统的地图选用互联网公共地图服务天地图在线地图,默认加载天地图影像地图作为底图,实现天地图底图各类型图层的切换功能。原创 2023-09-16 23:43:51 · 177 阅读 · 0 评论 -
GIS前端编程-Leaflet插件发布
模块加载程序(RequireJS和Browserify)实现了模块系统,如AMD(Asynchronous Module Definition)模块和CommonJS模块,以允许用户模块化加载代码。用户根据一定的标准规范完成插件的功能和相关文件说明,然后上传文件,通过审核后即可正式完成插件的发布。Leaflet插件页面列出了几十个很好的插件,并且每周都有很多插件加入插件资源库中供用户使用。(2)确认类别:在docs/plugins.md文件中,找到插件应该插入的部分,添加与插件相关的信息和链接。原创 2023-09-16 23:34:15 · 320 阅读 · 0 评论 -
GIS前端编程-Leaflet前端扩展开发实践
随着遥感技术、全球定位系统、因特网和地理信息系统等现代信息技术之间的相互渗透,逐渐形成以地理信息系统为核心的集成化技术系统,并在资源调查、环境评估、区域发展规划、公共设施管理、交通安全、军事等领域得到了广泛应用。军标绘制与动态模拟是GIS在军事领域的应用,充分利用网络环境进行军事作战模拟、虚拟作战演习等。军标绘制与普通图形绘制有很大区别,需要绘制的军标图形种类众多且结构复杂,更重要的是军标图形需要表达一定的态势走向,并且需要实现客户端交互操作。原创 2023-09-15 17:40:41 · 600 阅读 · 0 评论 -
GIS前端编程-Leaflet插件扩展
GIS前端编程-Leaflet插件扩展Leaflet插件扩展基本原理Leaflet插件扩展开发方法1. L.Handler扩展2. L.Control扩展为了高效率地进行软件开发Leaflet插件扩展基本原理Leaflet是面向移动设备和Web的开源JavaScript库,具有设计简单、性能良好和可用性强的特点,它可以在所有主流的桌面平台和移动平台上高效运行。Leaflet支持插件扩展的开发方式,使其具有更加强大、丰富的功能体系。一个可复用的插件需要满足以下条件。(1)插件自身的作用域与用户当前的作用原创 2023-09-15 17:29:35 · 447 阅读 · 0 评论 -
GIS前端编程-航线动态模拟
leaflet.Polyline.SnakeAnim插件基于该思路进行编写,通过该插件可以便捷地实现水流模拟功能(插件下载地址为https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim)。Leaflet.MovingMarKer.js是Leaflet常用的迁移轨迹模拟插件之一,基于该插件可以实现多种迁移轨迹模拟效果(插件下载地址为https://github.com/ewoken/Leaflet.MovingMarker)。原创 2023-09-15 17:04:26 · 645 阅读 · 0 评论 -
GIS前端编程-地理事件动态模拟
Leaflet插件库提供了Leaflet.AnimatedMarker.js插件(插件下载地址为https://github.com/openplans/Leaflet.AnimatedMarker),该插件基于L.Marker进行了扩展,在Marker对象基础上增加了distance(移动距离)、interval(移动时间间隔)、autoStart(开启移动)等属性,供用户设置图片标注的移动参数,以实现轨迹移动功能。图形闪烁,即图形时隐时现的一种高亮显示效果,在WebGIS中有较为广泛的应用。原创 2023-09-15 12:24:26 · 148 阅读 · 0 评论 -
GIS前端编程—视频展示
各个互联网公共地图服务开放平台的模式大同小异,一般提供电子地图服务与个性化的应用服务(POI、定位、导航、出行等)API,以及各端开发的SDK,如百度地图、高德地图等。GeoServer支持OGC服务规范的系列服务,支持PostgreSQL、MySQL等数据库及ArcSDE、Shapefile等中间件和文件资源,能够将网络地图输出为JPEG、PNG、KML等多种图片格式和数据格式,可以运行在任何基于J2EE的容器,支持多种WebGIS前端框架,如OpenLayers等。地物的信息,这样会更加便捷、高效。原创 2023-09-15 09:33:11 · 116 阅读 · 0 评论 -
GIS前端—Popup标注视图
在不同缩放级别的地图上,标注显示效果是不一样的。即将这些标注集中用一个聚合标注显示,聚合标注上显示该位置所聚合的标注个数。Leaflet提供了L.Popup对象,用于添加Popup标注视图,通过setLatLng()方法设置Popup标注视图的位置,通过setContent()方法设置Popup标注视图的内容。例如,在某地添加一个图片标注,当单击该图片标注时,弹出Popup视图,显示其信息。本实例以天地图地图作为底图,在地图上添加一个图片标注,并关联一个Popup标注视图,显示地物的图文介绍,效果如图。原创 2023-09-15 09:26:46 · 319 阅读 · 0 评论 -
GIS前端—地图标注
地图标注的应用比较灵活,如果用户已知标注点准确的位置信息,则可以直接在该位置添加标注。另外,地图标注具有多样化的显示形式,常用的标注类型有图片标注、矢量图形标注、Popup标注视图、聚合标注等。简单的图片标注,即用一个小图片作为标注点,在地图上叠加显示。options表示图片标注的参数设置项,如是否允许使用鼠标拖曳图片标注、设置图片标注透明度、自定义图片标注等。(5)监听图形的鼠标单击事件和鼠标悬浮事件,在事件响应函数中获取鼠标位置,在该位置上添加Popup标注,展示该图形信息。原创 2023-09-15 09:19:33 · 625 阅读 · 0 评论 -
GIS前端-图形样式编辑
L.Path.Transform插件的实现过程繁杂,由于篇幅原因我们不再详细介绍该插件的具体实现方法,只向读者展示该插件的使用方法及效果。在GIS领域,电子地图发挥出了显著的作用,从衣、食、住、行各个方面影响着人们的日常生活,给人们带来极大的便利。在绘制图形时,如果没有自定义设置图形的样式,则会使用默认的样式进行绘制。本实例以天地图地图作为底图,在交互式绘制图形后,将图形的几何信息展示到面板中,主要实现步骤如下。(4)监听图形绘制完成事件,解析返回的参数,将获取的图形几何信息显示在面板中。原创 2023-09-15 09:03:32 · 283 阅读 · 0 评论 -
GIS前端-地图标绘与动画
监听鼠标双击事件,当双击地图时,完成图形的绘制功能。在Leaflet中,图形绘制的基类为L.Path,从该基类中派生出了多个子类,用于基本图形的绘制,包括L.Polyline、L.Polygon、L.Rectangle、L.Circle等。(4)在脚本函数drawGraphic()中实现几何图形的绘制功能,通过options设置所绘制的几何图形的参数,如边线颜色、透明度等。形绘制功能,即在地图容器中绘制几何图形,包括点、线、圆、矩形与多边形等,既可以通过鼠标交互绘制,也可以直接添加进程序中绘制好的图形。原创 2023-09-15 08:54:32 · 381 阅读 · 0 评论 -
GIS前端-地图事件编程
其实,所有事件调用的方法都是相似的,复杂的事件可以被看成多个简单事件的组合。Leaflet的地图事件主要有以下几类:图层操作事件、地图状态事件、交互事件和弹出框事件。对Leaflet的地图控件、地图操作和地图事件有了一定程度的了解,结合丰富的实例读者也会掌握各个基础功能的具体实现方法。在地图上的一切操作均要采用地图事件机制来实现,即通过鼠标、键盘等交互,触发地图相关事件,进而调用相关功能接口函数实现相应的GIS功能。弹出框事件,即某种行为触发的弹出框行为事件,常见的弹出框事件及其说明。原创 2023-09-14 14:07:18 · 421 阅读 · 0 评论 -
GIS前端编程 地图常用操作
(2)在地图容器div中添加按钮,并为按钮添加单击事件,在该按钮的单击事件方法中分别调用Map类中的getCenter()、getZoom()、getBounds()、getSize()方法来获取相应的显示参数。(2)在地图容器div中添加文本框及按钮,并为按钮添加单击事件,在该单击事件中实现地图显示级数控制的方法为map.setView()。(2)在地图容器的div中创建定位按钮,并为定位按钮添加相应的单击函数,在该单击函数中调用的定位方法为map.setView()。原创 2023-09-14 13:03:32 · 722 阅读 · 0 评论 -
webgis前端控件编程
地图版权的字样通常显示在地图的底部,清晰直观地展示该地图的归属单位。下面以封装好的全屏显示控件插件为例,实现全屏显示控件的加载显示,插件下载地址为https://github.com/Leaflet/Leaflet.fullscreen。本实例在天地图地图的基础上,加载Leaflet开发库中的图层管理控件,用户可以在天地图矢量图层和天地图影像图层之间进行切换,主要实现步骤如下。在天地图地图的基础上,通过插件封装的L.Control.MiniMap类来构造一个鹰眼控件,加载到地图中显示,主要实现步骤如下。原创 2023-09-14 12:34:46 · 248 阅读 · 0 评论 -
GIS前端-地图操作与交互
常用的基础功能通常是一个应用系统所必需的,如地图的缩放、导航、定位、弹出框等,它让一张静态的地图动起来,让地图承载更多的空间信息,并以友好的交互方式呈现给用户。如果在此基础上实现地图缩放控制、提供常用的测量等工具,并基于地图提供交通、饮食、住宿等一系列旅行信息的定位功能,同时实现兴趣点标注、导出图片等交互功能,才能使该旅游GIS系统富有生命力,能够为用户提供更多、更友好的地图服务。窗口坐标是指网页中地图逻辑坐标对应的屏幕坐标,它是根据网页中地图容器布局(大小与位置),将地图逻辑坐标转换得到的。原创 2023-09-14 11:57:06 · 674 阅读 · 0 评论 -
GIS地图服务数据可视化
下面介绍几种常见的地图服务,重点介绍利用Leaflet加载这些地图服务的方法,包括OSM、Bing地图、Google地图、天地图地图、百度地图、高德地图、智图、ArcGIS瓦片地图。(4)在脚本区域编写代码,实现一个加载地图的函数init(),即在该函数中分别创建Leaflet的Map类、Layer类(L.TileLayer)的对象,通过addTo()方法将图层加载到地图容器中,并在Map类的属性参数中设置参考坐标系、显示中心和显示级数等。(1)加载OSM的过程,先定义一个地图容器。原创 2023-09-14 11:11:47 · 484 阅读 · 0 评论 -
Webgis系统调试与发布
Web前端调试,一般使用浏览器的调试插件,如IE Developer ToolBar、Firebug等,通过浏览器调试插件可以查看和调整网页的样式、调试脚本功能、监控网络请求等内容,这是Web前端开发必备的调试工具。另外,集成开发环境提供了强大的调试功能,一般用户可以直接使用集成开发环境内置的调试工具调试Web后端代码,也可以在此工具中通过添加进程的方式调试JavaScript代码。Leaflet开发其实就是HTML+JavaScript的Web开发,其调试方法与一般的Web开发相同。原创 2023-08-26 10:47:30 · 246 阅读 · 0 评论 -
Leaflet开发入门
2016年9月27日,Leaflet 1.0版本发布,越来越多的开发者加入社区,成为Leaflet的忠实用户,使得Leaflet的生态逐渐壮大。在Leaflet的资源页面中,提供了当前最新版本的Leaflet开发库,Leaflet开发库分别提供了Leaflet开发必备的核心开发库、样式文件、图片资源。Leaflet是轻量级、跨平台的,其压缩库的容量约为30KB,非常适应移动端应用场景,并且PC上的所有效果均能在移动端上无缝呈现,可以轻松在iPad、iPhone和Android等移动端构建地图应用。原创 2023-08-26 10:42:48 · 320 阅读 · 0 评论