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

1.背景

当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最简单的控制就是能对元素有选择的进行清空删除。在本节中,还将介绍WebGIS中另外一个常用功能,即地图定位功能。具体描述便是:当输入一个坐标点后,能够将地图缩放到该点处。下面我便就以上两个功能展开此章节的内容。

2.清空功能

2.1设计思路

根据功能点,我们可以将清空分为如下几个情形:

a.清空某个或者指定个数元素

b.清空某类或多类元素

c.清空所有元素

在之前的矢量图层原理章节中,我已经就WebGIS中的矢量图层原理做了详细的讲解,其核心便是一个矢量图层对应一个Canvas,而元素均是以element的方式添加到其中。所以,对以上清空所涉及到的三种情形,这里可以做出如下设计:

a.根据childname在Canvas中清除该对应element。

b.如果是删除一个Canvas中的某些类,此时应将childname的命名方式进行规范,即:catalogname_childname,删除时根据catalogname来删除Canvas中的对应类element。如果要删除的类将好根据Canvas进行了区分,此时直接清空该类所对应的canvas即可。

c.遍历所有的canvas,清空所有canvas中的element。

2.2具体实现

为了便于对所有的canvas进行管理。具体实现时,有必要做一个管理canvas的类,该类提供获取指定canvas,删除指定canvas,清空指定canvas等管理功能。

如果将此管理类本身设计成一个继承与Canvas的类,将其他Canvas均视作element添入其中,那么其本身就已经具有了对canvas的管理。并且还有一个优点在于,由于其他矢量canvas均是其element,鼠标对canvas的操作可以只用在此图层上进行监听即可。

3.地图定位功能

用过arcmap的朋友应该用过arcmap中的地图定位工具,其能够在输入了X和Y坐标后,将地图缩放到该坐标处。Arcmap中该工具界面如下所示:

3.1设计思路

在设计该功能时,我们首先还是要对瓦片换算有个基本的了解(可查看此系列的第三章节)。这里我直接给出整个流程图:

3.2具体实现

在arcmap中,鼠标在地图上移动时,地图右下角会显示出此时鼠标所在的地理坐标。在WebGIS中,我们也可以加上此功能,但是展示的方式需要设计。

在设计地图定位功能时,我将拾取鼠标地理坐标的功能也融入到了此功能中:

a.鼠标移动时,XY输入框会实时显示鼠标所在处的地理坐标。

b.点击定位按钮,地图会缩放到输入框XY坐标处。

效果图如下:

4.总结

在此章中,我跟大家一起探讨了WebGIS中两个基本的功能,地图清空以及地图定位。在下一章节中,我们开始探索WebGIS中一个很重要的功能,I查询。并且探讨如何能使I查询变得可配置、可扩展、以及如何界面展现。

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

(十八)WebGIS中清空功能和地图定位功能的设计以及实现的更多相关文章

  1. 漫谈程序员(十八)windows中的命令subst

    漫谈程序员(十八)windows中的命令subst 用法格式 一.subst [盘符] [路径]  将指定的路径替代盘符,该路径将作为驱动器使用 二.subst /d 解除替代 三.不加任何参数键入  ...

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

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

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 我们在使用arcmap时,经常会用到被称为I查询的工具.具体 ...

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

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

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...

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

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

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

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

  8. 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能

    定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...

  9. 【MUI】百度地图定位功能

    博主最近进行一款APP开发,需要用到定位功能,经过一番折腾,终于搞定,不废话,代码如下 mui.plusReady(function() { var longitude, latitude; //va ...

随机推荐

  1. >hibernate的四种状态

    hibernate的四种状态 1.临时状态 与数据库中没有相对应的数据,也不在session的管理之中,一般是新new出来的对象 2.持久化状态 对象在session的管理中,最后会在事务提交后,在数 ...

  2. C#_基础,初始化器

    对象初始化器 在没有对象初始化器之前,我们创建一个对象大概需要经过这么两个步骤,首先new一个对象,然后给每个字段赋值.而有了对象初始化器之后,原本需要几行代码才能完成的任务变成一行代码就可以完成,简 ...

  3. ASP.NET Core中使用URL重写

    ASP.NET Core 1.1 Preview 1 中新增了 URL Rewriting middleware ,终于可以进行 URL 重写了,实际使用体验一下. 首先要将 ASP.NET Core ...

  4. angularjs 指令详解 - template, restrict, replace

    通过指令机制,angularjs 提供了一个强大的扩展系统,我们可以通过自定义指令来扩展自己的指令系统. 怎样定义自己的指令呢? 我们通过 Bootstrap UI来学习吧.这个项目使用 angula ...

  5. Hibernate 延迟加载原理

        如何简单的理解延迟加载?开发中常见的org.hibernate.LazyInitializationException no session错误又是怎么产生的?下面通过一个简单的例子来解析一下 ...

  6. 辛巴学院-Unity-剑英陪你零基础学c#系列(三)计算与类型

    辛巴学院:正大光明的不务正业. 中秋节快乐,每逢佳节倍思亲,尤其是那素未谋面的老婆,对吧,屌丝们.   今天我们来探索一下C#里面奇怪的计算,奇怪的类型. 奇怪的计算 当我刚刚接触计算机编程的时候,一 ...

  7. C语言 · 回文数

    问题描述 1221是一个非常特殊的数,它从左边读和从右边读是一样的,编程求所有这样的四位十进制数. 输出格式 按从小到大的顺序输出满足条件的四位十进制数.   方案一: int main(){ int ...

  8. ZooKeeper典型应用场景

    ZooKeeper典型应用场景一览 数据发布与订阅(配置中心) 发布与订阅模型,即所谓的配置中心,顾名思义就是发布者将数据发布到ZK节点上,供订阅者动态获取数据,实现配置信息的集中式管理和动态更新.例 ...

  9. iOS开发--应用崩溃日志揭秘(二)

    场景 4: 吃棒棒糖时闪退! 用户邮件说, “当rage master吃棒棒糖时应用就闪退…” 另一用户说, “我让rage master 吃棒棒糖,没几次应用就闪退了!”崩溃日志如下: Incide ...

  10. jQuery DateTimePicker 日期和时间插件

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...