——王嘉彬(Esri中国上海分公司)

1、背景

1.1、主流互联网地图应用的现状

  在目前主流的互联网地图应用中,如 Google Map(图 1)、搜狗地图(图2),POI 兴趣点的文字标注越来越多的应用了“活动地图标注”技术。相较于传统的静态地图标注,活动地图标注可以接受鼠标事件,用户既可以在地图上通过把鼠标指针移动到标注文字上或 POI 点获取简要信息,也可直接点击标注文字或 POI点以获取更为详细的 POI 信息,并能完成与该 POI 点相关的其它功能,从而为用户提供了良好的操作体验。

图 1

图 2

1.2、基于 ArcGIS Server的地图应用现状

  目前,基于 ArcGIS Server 的互联网地图应用还都没有提供上述的功能和效果,地图标注还只是单纯的在底图上显示,仅起到美化和充实地图的作用。这样的应用模式,可以在一定程度上提高用户的使用体验,但在用户的实际使用中仍会带来很多不方便的地方,例如当用户通过地图漫游找到了自己需要的地图要素,但是他无法直接使用看到的内容,仍然需要通过搜索框或 Identify 之类工具才能获得地图要素的信息,操作繁琐,在一定程度上给用户流畅的使用应用带来了影响。对于面向公众的地图应用,应用的主要内容就是 POI 兴趣点,而 POI 兴趣点的主要表达方式就是地图标注,如果仅是把 POI 兴趣点标注显示在占应用程序窗口绝大部分空间的底图上,那对用户真正有用的功能就只能通过占应用程序窗口很小一部分的工具条或对话框来实现,这会使整个应用显得相对死板,如基于arcgisonline.cn提供的地图服务所建立的应用(图3)、辽宁省地理信息平台(图4),等等。而如果能在地图应用中使用活动地图标注技术,则会使整个底图“活”起来,提升用户体验。

图3

图4

2、在 ArcGIS Server中实现活动地图标注

  在 ArcGIS 中并没有直接提供对应的工具来实现活动地图标注。如果要在基于ArcGIS Server 的地图应用中实现活动地图标注,首先需要获得地图标注的位置信息,即标注文字的外接矩形。通过将标注文字的外接矩形在客户端添加到GraphicLayer可以为地图标注提供鼠标事件的响应,  例如当用户把鼠标移动到标注文字的上面,显示出“手形”的鼠标指针效果,表示这是一个可供深入查询的信息入口。

2.1、生成 Annotation图层

  在ArcMap可以将地图标注转换为 Annotation 图层,获取标注的外接矩形。但是如果直接在ArcMap中将图层标注转换为 Annotation 会无法与最终的地图切片中的标注重合,因为地图切片过程中标注的计算范围与ArcMap中不同。为了能够使得 Annotation 图层能够与最终切图上的地图标注完全重合,需要使用工具“Tiled Labels To Annotation”(如图5)。该工具能够按照地图切片时使用的“超大切片”范围计算标注的位置,所以通过该工具计算的Annotation 中的标注要素范围能够与地图切片上的标注完全重合。但是在使用该工具前需要提供切片的分块方案(Polygon Index Layer)。

图5

2.2、生成切片地图的分块方案

  切片地图的分块方案是切片地图中每一块切片所表示的地理范围,是一组矩形的面要素。在ArcMap中可以通过工具“Map Server Cache Tiling Scheme To Polygons”(图6)生成分块方案。利用该工具,我们可以获取地图服务的每块切片的地理范围面要素所组成的 Feature  Class。而该 Feature Class 就是“Tiled Labels To Annotation”工具所需要的分块方案。

图6

2.3、生成不同地图切片等级下的 Annotation

  通过上述 2.1 与 2.2 的步骤,只能生成地图切片某一级别下的 Annotation 图层,但地图放大或缩小后,随着地图切片标注的变化,需要有不同的 Annotation图层配合当前地图切片等级使用。可以通过重复 2.1 与 2.2 的步骤生成不同地图切片等级下的 Annotation。

2.4、在地图应用中使用 Annotation实现活动地图标注

  将上述的 Annotation 图层发布为地图服务,在 web 应用中新增对应的FeatureLayer,设置FeatureLayer的数据源为 Annotation 图层的地图服务,并将FeatureLayer的 symbol设置为透明。并通过设置FeatureLayer的Infotemplate与鼠标响应事件处理函数,就能在基于 ArcGIS Server 的地图应用中实现具有不同功能的活动地图标注(图7)。

图7

[转] 基于ArcGISServer实现活动地图标注的更多相关文章

  1. 基于flash-marker.js 的地图标注闪烁代码调试

    修改网上流传的flash-marker.js (function (global, factory) { typeof exports === 'object' && typeof m ...

  2. iOS开发之百度地图的集成——地图标注&POI检索

    本篇分为两部分: 一.地图标注 第一步:首先创建 BMKMapView 视图 第二步:在视图完全显示出来后设置,并实现代理方法 第三步:运行程序,此时大头针效果可以正常显示 二.POI检索 第一步:延 ...

  3. ios开发,地图标注聚集。搜索标注title功能

    最近在做地图功能,要实现的就是地图标注聚集,还有搜索地图 地图标注通常都是大头针.如果地图缩小到一定范围的时候,会显示密密麻麻的大头针.这样会显的难看 所以设计了一定区域范围内的大头针,缩小的时候给聚 ...

  4. 一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  5. 51地图标注接口(EZMarker API)

    功能 在很多时候,您需要您的用户标出一个位置,比如:一个房地产网站,用户在登记新楼盘的时候,就需要在地图上标出这个楼盘的位置,这个时候就可以用到本接口. 地图标注接口(EZMarker API)是我要 ...

  6. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  7. 百度地图标注及结合ECharts图谱数据可视化

    本示例中根据企业位置经纬度,在页面右侧百度地图中标注企业名称.同时页面左侧ECharts图谱饼状图用于统计企业行业与注册资本.当右侧百度地图缩放拖拽,左侧ECharts图谱根据右侧地图上出现的企业动态 ...

  8. 基于GMap.Net的地图解决方案

    一 地图的加载与显示 关于GMap的介绍与使用可以看我以前的文章: GMap.Net开发之在WinForm和WPF中使用GMap.Net地图插件 GMap.Net是.Net下一个地图控件,可以基于Ht ...

  9. 百度地图Api详解之地图标注

    标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个标注,不论地图移动.缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置. ...

随机推荐

  1. day6_1

    一.加密模块 1.hashlib >>> data=hashlib.md5() >>> data.update(b'hello') >>> pri ...

  2. 谈谈我对DSP和FPGA的看法

    1.DSP 在DSP里,你是一个软件设计者,硬件已经完全固化,你所要做的,就是在这个固定的硬件平台实现算法改进与优化, DSP的关键优势在于能够运行多种算法的灵活性: 2.FPGA 对于FPGA来说, ...

  3. 【练习】数据移动---parfile导出表中指定行:

    要求: ①创建存放数据的文件: ②使用默认的bad文件生成方式: ③使用truncate选项方式. 1.准备条件: [oracle@host03 ~]$ mkdir datadump [oracle@ ...

  4. 关于 presentViewController 时机

    类似微信.QQ这些应用如果用户没有登录,会弹出登录界面,如果 presentViewController 是写在  viewDidAppear 之前,会有警告 Presenting view cont ...

  5. c++操作符重载

    一.类型转换操作符(type conversion operator)[1] 参考: [1]. C++类型转换操作符(type conversion operator): http://www.cpp ...

  6. 【转】关于LWF——线性工作流

    1.什么是LWF? LWF全称Linear Workflow,中文翻译为线性工作流.“工作流”在这里可以当作工作流程来理解.LWF就是一种通过调整图像Gamma值,来使得图像得到线性化显示的技术流程. ...

  7. 百度地图API示例之移动地图

    级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  8. javascript在调试bug的奇淫技巧(Chrome, Firebug, Filddle 调试)

    Fiddler Fiddler调式使用知多少(一)深入研究 微信fiddle 微信fiddle Chrome Google Chrome 官方 Chrome - 基础 Chrome - 进阶 Chro ...

  9. 解决阿里云数据库RDS报错The table '/home/mysql/data3015/tmp/#sql_13975_23' is full

    查询任何一条语句都显示 The table '/home/mysql/data3015/tmp/#sql_13975_23' is full 查看了下数据库利用磁盘空间没有满, 阿里云的处理方式: 1 ...

  10. XidianOJ 1172 Hiking

    题目描述 BlacKin and GKCY are going hiking together. Besides their personal items, there are some items ...