function ShowStationOnMap(stations) {

// 清除图中的元素

  map.graphics.clear();

// 设置显示中心点及坐标

  var location = new esri.geometry.Point(stations[0].longtitude, stations[0].latitude, map.spatialReference)

  map.centerAndZoom(location, 8);

// 逐个添加元素

for (var s = 0; s < stations.length; s++) {

       var symbol = new esri.symbol.PictureMarkerSymbol(stations[s].imageUrl, 18, 18);

       var pt = new esri.geometry.Point(stations[s].longtitude, stations[s].latitude, map.spatialReference)

// 每个元素的属性值

       var attr = { "stationName": stations[s].stationName, "sId": stations[s].sId, "countryName": stations[s].countryName, "projectName": stations[s].projectName,                       "buildYear": stations[s].buildYear };

// 点击该元素时的信息窗

       var infoTemplate = new esri.InfoTemplate("${stationName}", "站点编号: ${sId}<br/>所属项目: ${projectName}  <br/>所属区县: ${countryName}

<br/>建成年份:${buildYear}<div><a href='javascript:ShowDetailStationPanel(" + stations[s].sId + ")'>查看详情</a> </div>");

var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate);

map.graphics.add(graphic);

}

}

当在外部点击一个点时在地图上显示该数据的信息窗 这里用的是 map.infoWindow 和 infoTemplate 有点区别

var pt = new esri.geometry.Point(data.record.longtitude, data.record.latitude, map.spatialReference)

var attr = { "stationName": data.record.stationName, "sId": data.record.sId, "countryName": data.record.countryName, "projectName": data.record.projectName,

"buildYear": data.record.buildYear };

var infoTemplate = new esri.InfoTemplate("${stationName}", "站点编号: ${sId}<br/>所属项目: ${projectName}  <br/>所属区县: ${projectName} <br/>建成年份:

${buildYear}<div><a href='javascript:ShowDetailStationPanel(" + data.record.sId + ")'>查看详情</a> </div>");

var symbol = new esri.symbol.PictureMarkerSymbol(data.record.imageUrl, 18, 18);

var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate);

map.infoWindow.setContent(graphic.getContent());

map.infoWindow.setTitle(data.record.stationName);

map.infoWindow.show(pt, map.getInfoWindowAnchor(pt));

转载于:https://www.cnblogs.com/oftenlin/archive/2012/09/05/2672186.html

ArcGIS JavaScript API 添加点相关推荐

  1. 使用ArcGIS JavaScript API 3.18 加载天地图

    对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...

  2. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /*** Created by WanderGIS on 2015/7/15.*/ define(["dojo/_bas ...

  3. ArcGIS JavaScript API本地部署离线开发环境

    1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk ...

  4. 使用Arcgis Javascript api 访问其他地图

    概述 在最初接触GIS开发的时候,手上没有任何的地图数据,只是简单的把ArcGIS提供的或者国家地理信息中心公开的低分辨率矢量数据使用ArcGIS Server发布成地图服务来使用.慢慢的开始下载Go ...

  5. ArcGIS JavaScript api实现点聚合

    概述 关于web gis中解决前端显示过多要素(点.线.面)时响应时间和美观的问题,现在已知的两种方式:一种是点云(baidu地图中的小红点,其实不是显示了所有的结果)另一种方式就是:点聚合(把临近的 ...

  6. FK JavaScript之:ArcGIS JavaScript API之地图动画

    地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度 本文目的:对ArcGIS JavaScr ...

  7. 如何在Vue项目中引入ArcGIS JavaScript API​ 创建三维可视化地图(含vue项目创建教程)

    新手上路之在Vue项目中引入ArcGIS API​ 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...

  8. 空间数据可视化:ArcGIS JavaScript API 二、三维数据一体化

      ESRI不愧为GIS业界巨头,从本科起就开始接触ArcGIS系列,桌面端从ArcMap 到 ArcPro,服务端从ArcIMS 到 ArcServer,无不体现了这个了不起的公司在与时俱进.不断创 ...

  9. ArcGIS JavaScript API 实现基本的地图功能

    代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3 ...

最新文章

  1. vue 外卖app(3) 引入阿里图标
  2. python基础教程第三版豆瓣-想学python,请问有没好的书籍推荐?
  3. Matlab找到不知道的函数名
  4. vue中v-show指令的使用之Vue知识点归纳(五)
  5. 深度学习大厂前端项目开发全流程全流程
  6. vim 插件 -- NERDTree
  7. 使用谷歌浏览器下载的图片webp怎么转成jpg格式图片
  8. Gxlcms有声小说系统/小说听书系统源码
  9. Android手机简易计时器(Chronometer实现)
  10. Idea通过svn更新项目失败报 Node remains in conflict
  11. 【no-descending-specificity】问题
  12. C 喵帕斯之平地摔 SDUT
  13. php使用ElasticSearch
  14. pr预设的卷及内核锐化是什么_PR CC 特效
  15. idea 使用debug模式自动编译的设置
  16. 【白 女票】Fly.io 免费服务器
  17. 某宝的登录密码加密--password2
  18. Python发送微信消息(文字、图片、文件)给指定好友和微信群,零基础可看懂(附源码和教程)
  19. 分享一个免费并开源的SSH连接工具
  20. 动态规划——背包问题(01背包问题)

热门文章

  1. 字节跳动学习笔记:java多线程实现原理
  2. PyTorch中的Element-wise operations
  3. 【深度学习】梯度和方向导数概念解析(代码基于Pytorch实现)
  4. 【深度学习】基于深度神经网络进行权重剪枝的算法(二)
  5. 【Web安全】关于通过木马控制目标和使用中国菜刀拿webshell的应用
  6. 黑马java教程是什么_Java教程:揭秘什么是面向接口编程
  7. python控制nao机器人_python控制nao机器人身体动作实例详解
  8. oracle9i数据库自动备份,Windows环境下Oracle9i数据库文件的自动备份
  9. as5300g2 nas软件功能_【NAS教程】2.NAS的概念及选型
  10. 滴滴出行首次进军非洲市场,网络推广外包后的滴滴想去的国家还有很多