(十二) WebGIS中矢量图层的设计

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1.前言

在前几章中我们已经了解了什么是矢量查询、屏幕坐标与地理坐标之前的转换以及要素的设计,有了这些知识,这一章里我们终于可以进行矢量图层的设计了。

在Catalog里创建一个FeatureClass时,我们能够选择是创建点图层或者线图层或者面图层等。所谓点图层,即该图层中的要素只能是点,其他几个图层顾名思义,也是如此。那么在WebGIS中,我们同样也可以按照ArcGIS里的这个设计思路来设计我们的矢量图层,虽然这个方法是肯定可行的,但是在实际的业务需求中,如果按照这种点图层等来严格控制的话,代码的灵活性以及简约性会大大的降低。那么到底我们该如何设计我们的矢量图层方能达到最好的效果呢?下面我们来一起谈谈。

2.提出几个需求

(1).有一段公路需要在地图上显示出来,并且公路上的每个节点也要明显的标注出来。

(2).需要显示出一个消防中队所在的位置,并且将其以服务半径作为缓冲得出的缓冲显示出来。

(3).希望显示出各个关注的人员在地图上的位置,并且鼠标移到人员图标上后,能够有气泡弹出,展示该人员的目前相关信息。

3.  分析需求

如果我们按照ArcGIS中点、线、面图层的思路来设计的话,第一个需求里,我们就需要设计出两个图层来,一个线图层,一个面图层。同样对第二个需求,我们也需要专门制作出一个点图层和一个面图层来。

现在,我们能否换一个思路来想呢,我们能否将点图层、线图层、面图层融合成一个业务图层呢?比如第一个需求,其实就只要线要素和点要素添加到同一个Canvas下即可了,一张以业务来划分的矢量图层就产生了。

同样,第二个问题的解决思路就是将点要素和面要素(圆要素)整合在一起便可。而第三个问题的解决思路就更简单了,只需要添加点(图标)要素即可。在要素的设计中我们已经详解了每个要素都是继承UIComponent的,都能监听鼠标事件,所以弹出气泡的需求也便自然而然的可以实现了。

4.设计图

 

5.设计流程图

 

6.由一个案例进行详解

这里,我们以之前提出的需求中的第一个道路显示问题来进行详解。

第一步,客户端列出请求参数,比如需要显示的道路的ID号等,然后向矢量服务发送请求。如果是最短路径分析,可以把起始点和终点作为参数,向后台的NA服务发送请求。

第二步,解析服务器返回的数据。得出数据中的各个要素的Geometry和Attribute。然后根据Geometry中的geometryType进行对应的要素的实例化,将Geometry和Attribute作为该实例化要素的属性。在此需求中,首先需要根据返回的线要素数据实例化相同个数的线要素。同时根据线要素的Geometry中的端点信息,实例化出点要素。

第三步,将所有实例化出的点要素和线要素添加到道路图层(Canvas)中,并触发每个要素的绘画函数。由于每个要素均有重绘以及坐标转换的内部实现,所以我们不需要在Canvas中再实现相同功能。

不过,这里我需要说明一个问题,在我们的自制图层中,我们还是需要监听地图事件来进行一些必须的操作的。而这个操作是跟地图平移有关系。否则在地图进行拖动后,该图层上的要素进行重绘时,会发生偏移问题。和上节提到的一样,地图中要素偏移问题我会在以后专门花一节跟大家来探讨。

7.总结

至此,在这个系列中,对栅格图层和矢量图层的设计以及所涉及到的内容我均已讲完了。对于地图的显示和一些基本的业务定制功能实现,我想大家应该都有一些思路了。在接下来的一个系列里,我想和大家一起探讨地图工具栏中基本功能的设计实现,比如放大、缩小、平移、全图、I查询、兴趣点查询、定位等。希望大家持续关注。祝大家节日快乐。

                                                                                                  ----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

活着便是为了受苦,为了历练,为了明白到底我们需要的是什么。

时间: 2024-10-22 00:21:27

(十二) WebGIS中矢量图层的设计的相关文章

(八)WebGIS中栅格图层的设计

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    前言 我们在上一章里了解到WebGIS中栅格图层的本质--地图图片.而从之前的第二章到第五章,我们详细的介绍了地图图片的获取原理和方法.所以在设计栅格图层前,我们已经知道了栅格图层中数据是如何获得的,剩下的便是怎样将这个过程用一种符合面向对象的设计原则来进行实现. 2.栅格数据获得的流程 这里我再次将栅格数据获得的流程描述一遍: 首先,得到屏幕范围内的地图

(十五)WebGIS中平移功能的设计和实现

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这一章我们将详细讲解WebGIS工具栏中另一个基础工具--平移工具(Pan).在介绍命令模式时,我们已经知道了此工具为Tool型的. 这个工具主要有如下两个功能: A.当切换到此工具上时,按下鼠标不放,移动鼠标时可以拖动地图. B.当切换到此工具上时,点击鼠标(鼠标不做平移),可以使地图平移,以点击处为中心. 2.设计 2.1 原理 我们已经知道,WebGI

(十四)WebGIS中地图放大缩小的设计和实现

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章中,我们给出了整个工具栏设计的核心,使用命令模式,并设计了具体工具类所继承的基类--Command类.从这一章开始我们便正式进入了具体工具类的设计和实现. 放大和缩小工具是最基础的工具之一,其操作分为三种: a.点击地图,进行放大缩小 b.拉框,进行放大缩小 c.滚轮调控放大缩小 针对这三种操作方式,我们进行了不同的代码逻辑设计. 2.分析 a.滚轮

(十六)WebGIS中偏移补偿量引发的问题之探讨

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章里讲解地图平移功能的实现时,我在最后提出了两个问题: A.在地图平移后,矢量图层的canvas的XY都发生了变化,此时根据地理坐标转换为屏幕坐标公式得出的屏幕坐标,在canvas上能将要素正确显示吗? B.矢量图层canvas的原点坐标XY有需要还原成初始的(0,0)的时候吗? 对这两个问题我给出的答案是:不能和需要. 在这一章里,我们将详细讲解得出

(十)WebGIS中地理坐标与屏幕坐标间的转换原理

 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 地图本身是拥有坐标的,一般可以大致分为平面坐标和经纬度坐标,在这里我们统称为地理坐标,比如北京,(115.9°E ,39.6°N)和(506340,304400)均是其地理坐标,只是表示形式不同而已. 我们在上一章讲解了矢量图层中数据的来源,最后提出了一个还未解决的问题,即当我们获得了矢量数据后,如何在屏幕中将这些数据里的地理(Geometry)坐标转换为

(十八)WebGIS中清空功能和地图定位功能的设计以及实现

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最简单的控制就是能对元素有选择的进行清空删除.在本节中,还将介绍WebGIS中另外一个常用功能,即地图定位功能.具体描述便是:当输入一个坐标点后,能够将地图缩放到该点处.下面我便就以上两个功能展开此章节的内容. 2.清空功能 2.1设计思路 根据功能点,我们可以将清空分为如下几个情形: a.清空某个或

(十九)WebGIS中I查询的原理及设计(包含AGS、GeoServer、Supermap)

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 我们在使用arcmap时,经常会用到被称为I查询的工具.具体功能便是,当激活I查询功能后,鼠标点击到某个要素上时,界面上会弹出一个对话框用来显示该要素的各属性信息.该功能截图如下:                         2.原理 在WebGIS中设计和实现该功能之前,我们有必要对该功能的原理做一个了解. 在OGC的WMS标准中规定了一个接口:Get

WebGIS中矢量切图的初步研究

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS领域,金字塔技术一直是一个基础性技术,WMTS规范专门制定了针对切片请求的格式.利用这种技术,前端可以快速展示出指定级别的地图或影像. 但是,由于切图本身是一张图片,图片上看似是兴趣点的要素根本无法进行前端交互.于是,针对兴趣点等矢量数据的展示,基本原理都是先获取到矢量的地理信息(比如GeoJson),在前端绘制(内核为一个element),于是该e

以项目谈WebGIS中Web制图的设计和实现

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景介绍 一般WebGIS项目中,前端展示数据的流程基本是先做数据入库.服务发布.然后前端调用展示.假设用户没有基本的GIS背景,需要将本地的excel或CSV等文件快速在地图上进行展示,此需求该如何解决? 目前市场上针对解决这种需求的产品已陆续出现,比如mapbox的studio,esri的portal,超图的地图慧以及由超图原项目经理离职后创办的地图无忧等产品.