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- ...
随机推荐
- Delphi 正则表达式语法(8): 引用子表达式 - 也叫反向引用
Delphi 正则表达式语法(8): 引用子表达式 - 也叫反向引用 //准备: 我们先写一个搜索所有英文单词的表达式 var reg: TPerlRegEx; begin reg := TP ...
- Team Foundation 中的错误和事件消息
Visual Studio Team System Team Foundation 中的错误和事件消息 Team Foundation 通过显示错误消息和事件消息来通知您操作成功以及操作失败.一部分错 ...
- 使用githubs托管代码
此文章已经发表于本人博客. 最近在学习nodejs,使用它自己都蛮觉得有激情哦,相信自己路学下去.在学习的过程中nodejs很多插件都在github上,于是自己也用了这个东东感觉不错,开始的时候还用命 ...
- 微信小程序学习笔记(7)--------布局基础
ui布局基础 一.flex布局 1.flex的容器和元素 2.flex容器属性详解 1>flex-direction不仅设置元素的排列方向,还设置主轴和交叉轴如下图主轴是由上到下 2&g ...
- shiro 拦截器
参考
- js使用经验之谈
1. js 对象,先有的起作用.CSS属性,后有的起作用. 2. 方法中使用submit提交表单,如果提交后面还有代码需要执行,不能保证顺序.例如,提交后关闭页面,很可能会在提交前关闭页面,导致提交 ...
- overflow应用场景
overflow属性可以设置的值有5种: (1)visible 默认值,内容不会裁剪,呈现在元素框之外: (2)hidden 内容会被裁剪,并且子元素内容是不可见的: (3)scroll 内容会被裁 ...
- 20145201 《Java程序设计》第一周学习总结
# 20145201 <Java程序设计>第一周学习总结 ## 教材学习内容总结 万事开头难,终于开始学习了Java.寒假的时候看到老师的要求确实有点慌,但是这周翻开书,从书本知识第一行学 ...
- how to create an asp.net web api project in visual studio 2017
https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutoria ...
- Hibernate的一级缓存、二级缓存和查询缓存。
Hibernate的Session提供了一级缓存的功能,默认总是有效的,当应用程序保存持久化实体.修改持久化实体时,Session并不会立即把这种改变提交到数据库,而是缓存在当前的Session中,除 ...