ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> ArcGIS JavaScript api实现点聚合

ArcGIS JavaScript api实现点聚合

来源:网络整理     时间:2015-01-01     关键词:

本篇文章主要介绍了"ArcGIS JavaScript api实现点聚合",对于Javascript教程感兴趣的同学可以参考一下: 概述关于web gis中解决前端显示过多要素(点、线、面)时响应时间和美观的问题,现在已知的两种方式:一种是点云(baidu地图中的小红点,其实不是显示了所有的...

概述

关于web gis中解决前端显示过多要素(点、线、面)时响应时间和美观的问题,现在已知的两种方式:一种是点云(baidu地图中的小红点,其实不是显示了所有的结果)另一种方式就是:点聚合(把临近的点聚合成一个大点显示)。这里只说点聚合,首先看下Google文章中给出的不聚合和聚合的效果对比。


左图是没有点聚合的显示效果,有没有密集恐惧症的感觉。这种简单点标记的还可以勉强接受,如果是飞机、汽车、船舶的标记密集显示在这里,那么整个系统的界面美观度和用户可操作性就差到极限了。

在早期的版本中ArcGIS javascript api是没有实现这个功能的,但是Flex和Silverlight的api中都是有的。总有一种选择了javascript,但是javascript却要被ESRI抛弃的感觉,汗...而且最近ESRI的下载网站已经没有javascript的下载包了,明白的亲们给个明白的说法吧...

接下来让我们一起看下javascript api的实现。

arcgis实现效果图


arcgis实现点聚合

arcgis javascript api的点聚合是通过提供一个ClusterLayer的定制图层实现的,具体的说明可以参见esri给出的示例https://developers.arcgis.com/javascript/jssamples/layers_point_clustering.html。

使用时,只需要把示例代码下载包中的ClusterLayer.js放到工程的js目录,添加正确的引用路径,然后创建ClusterLayer并像其他图层一样添加到Map中即可使用。

创建ClusterLayer时传入的参数如下:

参数名参数说明
data传入聚合图层的数据数组。每个数据必须包含x,y,attributes三个属性
labelColor标记上显示的文字颜色,默认为#FFF(白色)
labelOffset标记文字的垂直方向偏移量,请根据标记图标的大小来设置合适的值
resolution分辨率,即屏幕像素和地图像素之间的比例关系,使用map.extent.getWidth() / map.width即可
showSingles当鼠标左键点击一个聚合后标记时,是否显示出聚合此标记的所有实际点
singleSymbol当鼠标左键点击一个聚合后标记时,显示出的聚合标记包含的所有实际点的显示样式
singleTemplate聚合标记选中后,弹出的属性显示框中显示内容的显示模板
webmap声明地图是否来源于ArcGIS.com
spatialReference加入到ClusterLayer的点标记的空间坐标系统,默认是102100(web mercator)

关于更具体的实现方式和使用方式,可以到官网去看https://developers.arcgis.com/javascript/jssamples/layers_point_clustering.html。

与其他web类库对比

对于经常使用OpenLayer的朋友可能要笑话了,因为OpenLayer不仅很早就提供了支持,并且可以实现动画效果。所谓的动画效果就是:当地图缩放的时候,图层上的点缓慢的从上一个聚合点移动到当前的聚合点。这是一种很好的用户体验,这种效果Google地图、高德地图也都有,百度地图似乎没有(印象看到了百度官方的一个回帖,这里作者偷懒不去追查了 ; ) )。

arcgis javascript api比其他好的一个地方是,点击时弹出的对话框可以直接使用InfoTemplate,对于习惯InfoTemplate的用户,应该用起来是很方便的。而且,InfoTemplate很是强大(3.11以后已经解决了之前不能正确显示多要素的要素属性,缩放后多要素的要素位置不正确等问题),在里面放置各种东西都可以,消息、图片、视频随意。。

深度阅读

这里有一个比较好的博文,介绍了其他类库的:

《Cluster面面观》http://blog.163.com/ice_gbin/blog/static/175471755201341613352964/

《handle large amounts of markers in google map》http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/

《Animated marker cluster strategy for OpenLayers》http://acuriousanimal.com/blog/2012/08/19/animated-marker-cluster-strategy-for-openlayers/

以上就介绍了ArcGIS JavaScript api实现点聚合,包括了方面的内容,希望对Javascript教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_103248.html

相关图片

相关文章