文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处: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/

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

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

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    前言 我们在上一章里了解到WebGIS中栅格图层的本质—— ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这一章我们将详细讲解WebGIS工具栏中另一个基础工具——平 ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章中,我们给出了整个工具栏设计的核心,使用命令模式,并 ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章里讲解地图平移功能的实现时,我在最后提出了两个问题: ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 地图本身是拥有坐标的,一般可以大致分为平面坐标和经纬度坐标, ...

  6. 三十二、Java图形化界面设计——布局管理器之CardLayout(卡片布局)

    摘自 http://blog.csdn.net/liujun13579/article/details/7773945 三十二.Java图形化界面设计--布局管理器之CardLayout(卡片布局) ...

  7. OpenJDK源码研究笔记(十二):JDBC中的元数据,数据库元数据(DatabaseMetaData),参数元数据(ParameterMetaData),结果集元数据(ResultSetMetaDa

    元数据最本质.最抽象的定义为:data about data (关于数据的数据).它是一种广泛存在的现象,在许多领域有其具体的定义和应用. JDBC中的元数据,有数据库元数据(DatabaseMeta ...

  8. (转)SpringMVC学习(十二)——SpringMVC中的拦截器

    http://blog.csdn.net/yerenyuan_pku/article/details/72567761 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter, ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

随机推荐

  1. .net 文件上传大小的设置

    直接在配置文件web.config 中进行如下配置,主要需要明白的就是 配置的 单位是 Byte,  所以一定计算清楚,不然会在这里纠结很久!!! <configuration> < ...

  2. POJ1753 Flip Game(bfs、枚举)

    链接:http://poj.org/problem?id=1753 Flip Game Description Flip game is played on a rectangular 4x4 fie ...

  3. JavaScript鼠标经过图片的放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 常用的一些复杂SQL语句

    1.根据表中的birthday统计年龄段人数: //以下代码表示查询出来后的结果集添加一列字段 cast('20以下' as char) as age SELECT COUNT((DATE_FORMA ...

  5. TCP三次握手四次挥手

    看到一篇总结很好的TCP三次握手,学习一下,原文链接. 建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,S ...

  6. 编译安装PHP的参数 --with-mysql --with-mysqli --with-apxs2默认路径

    编译安装PHP时指定如下几个参数说明: --with-apxs2=/usr/local/apache/bin/apxs //整合apache,apxs功能是使用mod_so中的LoadModule指令 ...

  7. ffmpeg编译与移植问题

    1.下载ffmpeg. 下载网址:http://www.ffmpeg.org/download.html 2.解压缩 tar -zxvf ffmpeg-2.0.1.tar.gz 3.配置,生成Make ...

  8. C#_技巧:.net下C++调用C#的dll

    C#编译一个dll,比如命名空间为Csharp,里面有个类A,字段x,产生一个Csharp.dll C++ 配置,让C++支持CLR C++调用方法: #include <iostream> ...

  9. windows或mac上对iOS设备截图

    1.需要在设备上安装插件“设置”--“开发者”的选项 2.启动"com.apple.mobile.screenshotr"服务 3.和设备scoket通讯,拿到截图.

  10. SQL Server2014 哈希索引原理

    SQL Server2014 哈希索引原理 翻译自:http://www.sqlservercentral.com/blogs/sql-and-sql-only/2015/09/08/hekaton- ...