lzugis——Arcgis Server for JavaScript API之POI
POI(Point Of Interest),感兴趣点,其实呢,严格意义上说应该不是POI,但是单位就这样叫了,我也就这样叫了,其实现的功能大致是这样的:用过百度地图的朋友们都知道你在百度地图时,当鼠标经过某个点时会显示这个对象的名称,点击该对象,会弹出该对象的详细信息。如下图所示:
实现后的效果呢就是这样子的,下面呢我来说说在Arcgis Server for JavaScript API下,我实现该效果的思路与想法。
首先,得有一个图层用于显示这些点对象,这个图层可以是切片,也可以是WMS,也可以是featurelayer,反正只要是能将这些东西在地图上显示出来就Ok了。
map = new Map("map",{ logo:false, center: [106.6854, 35.8364], slider: true });
var tiledLayer = new Tiled(tiledUrl); map.addLayer(tiledLayer);
接下来说说这些点究竟是怎么回事,其实呢,这些点呢就是一个JSON格式的数据,里面的每一个对象包含了该对象的属性信息,返回的JSON格式的大概如下:
{ total:3, layerpoi:[ {poiCode:'0',poiTitle:'wlmq',poix:9748157.53561782,poiy:5429353.112666599 }, {poiCode:'1',poiTitle:'hhht',poix:12453416.840686005,poiy:4997253.113785474 }, {poiCode:'2',poiTitle:'lz',poix:11528834.54654876,poiy:4319715.295065851 } ] }
注意,每一个对象必须得有一个id,name,x,y,前面这四个是必须的,其他的可有可无,至于说怎么返回,这个事情你自己考虑,怎么方便怎么来,asp.net可以用*.ashx,java可以考虑servlet或者别的,反正能返回这个JSON就Ok。那么,我何时请求让他返回呢,有两个时间:1、地图初始化加载的时候;2、地图的extent发生变化的时候。我们可以用ajax来实现:
function excuteData(dataUrl){ $.ajax({ type: "post", dataType: "JSON", url: dataUrl, data: {level: mapLevel, bbox: bbox}, success: function(json){ var data = json.layerpoi; total=json.total; if(total!=0){ for(var i in data){ var xmin,ymin,xmax,ymax; xmin=data[i].poix-offset; ymin=data[i].poiy-offset; xmax=data[i].poix+offset; ymax=data[i].poiy+offset; var poiExtent = new esri.geometry.Extent(xmin,ymin,xmax,ymax,map.spatialReference); poiArray[i] = new POI(data[i].poiType,data[i].poiTitle,data[i].poix,data[i].poiy,poiExtent); } } } }); }
分析上面的代码,ajax请求,传递的参数为level(地图的级别),bbox(地图当前的四至),意思就是通过当前地图的级别和四至判断当前可是范围内所包含的点对象的个数与信息,success后返回JSON,首先,判断total的个数是否为0,不为0,说明有点对象,这时,根据地图的比例尺计算一个合理的offset,根据x、y、offset给每一个点对象创建一个extent,你可以建一个对象类将这些对象点的信息存储起来:
function POI(code,title,x,y,extent){ this.code=code; this.title=title; this.x=x; this.y=y; this.extent=extent; }
接着,实现移动鼠标去判断鼠标当前所在点是否被对象点所包含,包含了,显示该对象的信息,并高亮显示给对象:
//鼠标移动事件 function mapMouseMove(evt){ var point = evt.mapPoint; for(var i = 0; i < poiArray.length; i++){ var extent=poiArray[i].extent; if(extent.contains(point)){ console.log("true"); poipoint = new esri.geometry.Point([poiArray[i].x,poiArray[i].y],map.spatialReference); var graphicMarker = new esri.Graphic(poipoint, pmsHover); map.graphics.add(graphicMarker); var font = new esri.symbol.Font(); font.setSize("10pt"); font.setFamily("微软雅黑"); var text = new esri.symbol.TextSymbol(poiArray[i].title); text.setFont(font); text.setColor(new dojo.Color([0,0,0,100])); text.setOffset(15,-20); var graphicLabel = new esri.Graphic(poipoint,text); map.graphics.add(graphicLabel); flag=i;
break; } else{ console.log("false"); map.graphics.clear(); flag=null; } } } map.on("mouse-move",mapMouseMove);
给地图添加鼠标移动事件,当移动到对象出现对象名称时,点击该对象,出现对象的详细信息,所以给地图添加click事件:
function mapClick(evt){ if(flag==null){ return; } else{ map.centerAt(poipoint); map.infoWindow.setTitle(poiArray[flag].title); map.infoWindow.setContent("类型:"+poiArray[flag].type +"<br>X:"+poiArray[flag].x +"<br>Y:"+poiArray[flag].y); map.infoWindow.show(poipoint); } } map.on("click",mapClick);
上面说了,请求返回JSON数据的时间有俩,所以还得给地图添加extent-change事件:
function extentChange(evt){ mapLevel=map.getLevel(); bbox=this.map.extent.xmin+","+this.map.extent.ymin+","+this.map.extent.xmax+","+this.map.extent.ymax; excuteData(dataUrl); } map.on("extent-change",extentChange);
这样,我所要的功能就基本上实现了,效果如下:
lzugis——Arcgis Server for JavaScript API之POI的更多相关文章
- lzugis——Arcgis Server for JavaScript API之自己定义InfoWindow
用过Arcgis Server for JavaScript API肯定知道InfoWIndow.你在用InfoWindow的时候会发现各种问题,比如不能全然显示的问题,遮盖对象的问题等等.所以呢我在 ...
- lzugis——Arcgis Server for JavaScript API之自定义InfoWindow
各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...
- lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)
同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow. 在上一讲中,实现了InfoWindow的显示,但是并没 ...
- lzugis——Arcgis Server for JavaScript API在自己的定义InfoWindow
你看到这个标题嫌烦.因为我最近一直与研究问题,相关文章使这些也可以只,同时要读我文章的朋友.我的文章能够给你带来帮助. 在相关的内部的前两篇文章,达到InfoWindow经div实现的东西,成Info ...
- Arcgis Server for JavaScript API之自定义InfoWindow
各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...
- ArcGIS server开发之API for js 本地部署
ArcGIS Server for javascript 本地部署 第一次使用arcgis server for js开发,在经验方面还有很多的不足,所以将自己在开发过程中遇到的问题写出来与大家共享. ...
- ArcGIS 10.2 JavaScript API本地部署离线开发环境
1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk ...
- ArcGIS Server for JavaScript 3.3 的安装部署
一.安装包下载 首先从官网下载ArcGIS API for JavaScript 3.3 的API和SDK,地址:http://support.esrichina.com.cn/2011/0223/9 ...
- How to CORS enable ArcGIS Server 10.2.1 to Access REST Services without Using proxy.ashx
http://gis.stackexchange.com/questions/86206/how-to-cors-enable-arcgis-server-10-2-1-to-access-rest- ...
随机推荐
- appium API java
原创内容,未经允许,禁止转载! driver.close();//关闭 driver.closeApp();//关闭应用,其实就是按home键把应用置于后台 driver.currentActivit ...
- 连接postgresql
# psycopg2 engine=create_engine('postgresql+psycopg2://scott:tiger@localhost/mydatabase')# python 连 ...
- Apache 工作模式配置优化
Apahce 工作模式配置 1.查看当前MPM工作模式 /usr/local/apache2/bin/apachectl -V Server version: Apache/2.4.27 (Unix) ...
- Nginx 301与302配置
说明 1.首先看一个完整代码示例,关于nginx 301 302跳转的. 301跳转设置: server { listen 80; server_name 123.com; rewrite ^/(.* ...
- 【I/O】常见输入输出
缓冲输入文件.输出文件 import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileReader; ...
- 《Maven实战》第10章 使用Maven进行测试
10.2maven-surefire-plugin插件 [生命周期]的[阶段]与[插件]的[目标]绑定 default生命周期的test阶段:使用单元测试框架运行测试 Maven内置绑定:defaul ...
- 初识 Zookeeper
云计算越来越流行的今天,单一机器处理能力已经不能满足我们的需求,不得不采用大量的服务集群.服务集群对外提供服务的过程中,有很多的配置需要随时更新,服务间需要协调工作,这些信息如何推送到各个节点?并且保 ...
- ElasticSearch高可用集群环境搭建和分片原理
1.ES是如何实现分布式高并发全文检索 2.简单介绍ES分片Shards分片技术 3.为什么ES主分片对应的备分片不在同一台节点存放 4.索引的主分片定义好后为什么不能做修改 5.ES如何实现高可用容 ...
- LeetCode——Diameter of Binary Tree
LeetCode--Diameter of Binary Tree Question Given a binary tree, you need to compute the length of th ...
- Hive-行转列(explode)
场景:通过parseHtml UDF解析一串HTML,返回一以 @@ 分割的字符串,使用split分割字符串进数组中,然后将数组的元素转列. 开始的写法 SELECT id, legal_person ...