(十八)WebGIS中清空功能和地图定位功能的设计以及实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处: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中清空功能和地图定位功能的设计以及实现的更多相关文章
- 漫谈程序员(十八)windows中的命令subst
漫谈程序员(十八)windows中的命令subst 用法格式 一.subst [盘符] [路径] 将指定的路径替代盘符,该路径将作为驱动器使用 二.subst /d 解除替代 三.不加任何参数键入 ...
- (十五)WebGIS中平移功能的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这一章我们将详细讲解WebGIS工具栏中另一个基础工具——平 ...
- (十九)WebGIS中I查询的原理及设计(包含AGS、GeoServer、Supermap)
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 我们在使用arcmap时,经常会用到被称为I查询的工具.具体 ...
- (十六)WebGIS中偏移补偿量引发的问题之探讨
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章里讲解地图平移功能的实现时,我在最后提出了两个问题: ...
- (十二) WebGIS中矢量图层的设计
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...
- (十)WebGIS中地理坐标与屏幕坐标间的转换原理
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 地图本身是拥有坐标的,一般可以大致分为平面坐标和经纬度坐标, ...
- (十四)WebGIS中地图放大缩小的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章中,我们给出了整个工具栏设计的核心,使用命令模式,并 ...
- 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能
定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...
- 【MUI】百度地图定位功能
博主最近进行一款APP开发,需要用到定位功能,经过一番折腾,终于搞定,不废话,代码如下 mui.plusReady(function() { var longitude, latitude; //va ...
随机推荐
- JeeSite学习笔记~代码生成原理
1.建立数据模型[单表,一对多表,树状结构表] 用ERMaster建立数据模型,并设定对应表,建立关联关系 2.系统获取对应表原理 1.怎样获取数据库的表 genTableForm.jsp: < ...
- SQL Server定时自动抓取耗时SQL并归档数据发邮件脚本分享
SQL Server定时自动抓取耗时SQL并归档数据发邮件脚本分享 第一步建库和建表 USE [master] GO CREATE DATABASE [MonitorElapsedHighSQL] G ...
- ASP.NET MVC 和 Ruby 相结合的Web框架Oak
在http://www.asp.net/mvc/open-source 上有个项目Oak: Frictionless development for ASP.NET MVC single page w ...
- Apache许可协议Open RIA Services
Jeff Handley's进行了多年的项目--基于一份开源许可发布WCF RIA Services.遵循Apache 2许可,捐赠给Outercurve基金会的ASP.NET Open Source ...
- 剑指Offer面试题:32.数字在排序数组中出现的次数
一.题目:数字在排序数组中出现的次数 题目:统计一个数字在排序数组中出现的次数.例如输入排序数组{1,2,3,3,3,3,4,5}和数字3,由于3在这个数组中出现了4次,因此输出4. 二.解题思路 2 ...
- The Similarities and Differences Between C# and Java -- Part 1(译)
原文地址 目录 介绍(Introduction) 相似点(Similarities) 编译单位(Compiled Units) 命名空间(Namespaces) 顶层成员(类型)(Top Level ...
- 让浏览器不再显示 https 页面中的 http 请求警报
HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错: Mix ...
- EasyPR--开发详解(3)高斯模糊、灰度化和Sobel算子
在上篇文章中我们了解了PlateLocate的过程中的所有步骤.在本篇文章中我们对前3个步骤,分别是高斯模糊.灰度化和Sobel算子进行分析. 一.高斯模糊 1.目标 对图像去噪,为边缘检测算法做准备 ...
- Html5 实现灯笼绘制
最近在学习Html5,就用JavaScript在Canvas试着绘制了一个灯笼,并作了简要的说明. 具体绘制思路在页面上有说明,不再赘述,代码如下: <script type="tex ...
- wpf ListView DataTemplate方式的鼠标悬停和选中更改背景色
今天使用wpf技术弄一个ListView的时候,由于需求需要,需要ListView显示不同的数据模板,很自然的使用了DataTemplate方式来定义多个数据模板,并在ListView中使用ItemT ...