Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

本文分享了使用ArcGIS for JavaScript实现地图搜索功能的具体步骤,包括数据处理、地图标记及信息窗体联动显示等关键环节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

多说无益,首先贴两张图让大家看看具体的效果:


图1、百度地图搜索结果


图2、Arcgis for JavaScript实现的效果

看到了效果,是不是各位有点小鸡动,是不是也宠宠欲动,有木有?但是具体是怎么实现的呢?下面我来详细的给各位说说我的实现思路吧。


第一,数据。

其实搜索的对象从类型上来说,应该是点、线、面都支持的,但是在实际的操作过程中,不论是百度还是我自己做的时候,都会将所有的对象抽成点对象,也就是将每一个对象转换成为POI热点,再将对象的坐标信息提取出来,将所有对象入库。


第二,实现。

实现该效果,首先,根据用户的查询条件从数据库里面获取数据,数据返回给web端的是JSON格式的。获取到数据之后,接着做数据在左侧的分页展示与地图上与左侧列表相对应的展示,左侧列表的展示我就不详细说了,做过web的大家都有一万种方法去实现它,重点说说地图上的展示。

这些红色的气泡是一个graphiclayer,每一个气泡是一个graphic,只是根据不同的顺序,graphic的PictureMarkerSymbol不同而已,下面是实现的代码:

  1. <span style="white-space:pre">    </span>addQueryPopup = function(data){  
  2.         redPopupLayer.clear();  
  3.         var mlpoint = new esri.geometry.Multipoint(new esri.SpatialReference({ wkid:4326}));  
  4.         var graphic = null;  
  5.         for(var i=0;i<data.length;i++){        
  6.             var att=data[i];  
  7.             var pt = new esri.geometry.Point(att.x,att.y,new esri.SpatialReference({ wkid:4326}));  
  8.             mlpoint.addPoint(pt);  
  9.             var sms = null;  
  10.             switch(i){  
  11.                 case 0:{  
  12.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/A.PNG",15,19);  
  13.                     break;  
  14.                 }  
  15.                 case 1:{  
  16.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/B.PNG",15,19);  
  17.                     break;  
  18.                 }  
  19.                 case 2:{  
  20.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/C.PNG",15,19);  
  21.                     break;  
  22.                 }  
  23.                 case 3:{  
  24.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/D.PNG",15,19);  
  25.                     break;  
  26.                 }  
  27.                 case 4:{  
  28.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/E.PNG",15,19);  
  29.                     break;  
  30.                 }  
  31.                 case 5:{  
  32.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/F.PNG",15,19);  
  33.                     break;  
  34.                 }  
  35.                 case 6:{  
  36.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/G.PNG",15,19);  
  37.                     break;  
  38.                 }  
  39.                 case 7:{  
  40.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/H.PNG",15,19);  
  41.                     break;  
  42.                 }  
  43.                 case 8:{  
  44.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/I.PNG",15,19);  
  45.                     break;  
  46.                 }  
  47.                 default:{                     
  48.                     sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/J.PNG",15,19);  
  49.                 }  
  50.             }  
  51.             graphic = new esri.Graphic(pt, sms, att);                         
  52.             redPopupLayer.add(graphic);   
  53.         }  
  54.         var extent = mlpoint.getExtent();  
  55.         map.setExtent(extent.expand(2));  
  56.     };  

这样,就实现了类似于上图的效果。


第三,联动。

联动,是个什么概念呢?对于搜索出来的结果,点击气泡,会弹出该对象的信息,如下:


图3、百度地图的信息框


图4、arcgis的信息框

所谓的联动呢,就是点击左侧列表也能弹出点击红气泡一样的信息框,那么在Arcgis中如何实现呢?下面再说说我实现该效果的思路。

一般来说,信息框里面显示的内容大都是动态获取的,所以我的处理方式是给传递一个该对象唯一编码id的参数,在后台获取到数据之后在后台拼html代码或者传到前台拼html代码,实现方法如下:

  1. <span style="white-space:pre">    </span>/** 
  2.      * 显示对象信息框InfoWindow 
  3.      */  
  4.     showObjInfo = function(id){       
  5.         $.ajax({  
  6.             url:"wateruserbaseController.do?baseInfoSummary&id="+id,  
  7.             type:"POST",  
  8.             dataType:"html",  
  9.             success:function(data){  
  10.                 data=eval(data);  
  11.             var pt = new esri.geometry.Point(data.x,data.y,{wkid:4326});  
  12.             var name = data.name;  
  13.                 map.infoWindow.resize(350,300);  
  14.             map.infoWindow.setTitle(name+"  <a class='detailsinfo' id='detailsinfo'>详细</a>");  
  15.             $("#detailsinfo").on("click",function(){  
  16.                 showObjDetailInfo(id,name);  
  17.             });  
  18.             map.infoWindow.setContent(data.html);  
  19.             map.infoWindow.show(pt);  
  20.             }  
  21.         });       
  22.     };  

有了以上方法,在左侧列表和marker对象点击的时候调用相同的方法,传递参数为该对象的唯一编码id即可。

眼细的朋友可能看到了,在信息框的标题栏还有一个详细的链接,是的,这个链接是起作用的,点击详细链接,弹出该对象的详细信息,调用的方法如下:

  1. <span style="white-space:pre">    </span>/** 
  2.      * 显示详细信息 
  3.      */  
  4.     showObjDetailInfo = function(id){       <pre name="code" class="javascript"><span style="white-space:pre">      </span>$.ajax({  
  5.             url:"wateruserbaseController.do?baseInfo&id="+id,  
  6.             type:"POST",  
  7.             dataType:"html",  
  8.             success:function(data){  
  9.                 data=eval(data);  
  10.             var name = data.name;  
  11.             $.Window.setTitle(name);  
  1. <span style="white-space:pre">            </span>$.Window.setContent(data.html);  
  2.             $.Window.show();  
  3.             }  
  4.         });  

};

### ArcGIS API for JavaScript 的基本使用方法 ArcGIS API for JavaScript 是由 Esri 提供的一套用于创建 Web 地图应用程序的强大工具集。虽然它的文档相对复杂,但通过一些实际案例和基础用法的学习可以快速上手。 #### 1. 地图初始化 要开始使用 ArcGIS API for JavaScript,首先需要引入必要的脚本文件并完成地图的初始化工作。以下是实现这一目标的核心代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ArcGIS Map</title> <!-- 引入 CSS --> <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css"> <!-- 引入 JS 库 --> <script src="https://js.arcgis.com/4.27/"></script> <style> #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> </head> <body> <div id="viewDiv"></div> <script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) { const map = new Map({ basemap: "streets-navigation-vector" // 设置底图样式 }); const view = new MapView({ container: "viewDiv", // 绑定到页面中的 div 容器 map: map, center: [-118.243683, 34.052235], // 初始中心坐标 (经度, 纬度) zoom: 12 // 初始缩放级别 }); }); </script> </body> </html> ``` 上述代码展示了如何加载 ArcGIS API 并设置一个简单的地图视图[^1]。 --- #### 2. 添加标记(打点) 可以通过 `Graphic` 和 `GraphicsLayer` 来向地图中添加标记点。以下是一个示例: ```javascript const point = { // 创建地理坐标对象 type: "point", longitude: -118.243683, latitude: 34.052235 }; const symbol = { // 配置图标样式 type: "simple-marker", color: [226, 119, 40], outline: { color: [255, 255, 255], width: 1 } }; const popupTemplate = { // 自定义弹窗内容 title: "位置信息", content: "这是洛杉矶市中心的位置!" }; const graphic = new Graphic({ // 构建图形实例 geometry: point, symbol: symbol, popupTemplate: popupTemplate }); graphicsLayer.add(graphic); // 将图形添加至 Graphics Layer 中 ``` 此部分实现了在指定地点放置标记的功能,并支持点击后显示自定义弹框。 --- #### 3. 折线与多边形绘制 为了展示路径或覆盖区域,可以利用 `Polyline` 和 `Polygon` 类型的数据结构。下面是如何绘制一条简单折线的例子: ```javascript const polyline = { type: "polyline", paths: [ [-118.243683, 34.052235], [-118.235218, 34.057615] ] }; const lineSymbol = { type: "simple-line", color: [226, 119, 40], width: 3 }; const lineGraphic = new Graphic({ geometry: polyline, symbol: lineSymbol }); graphicsLayer.add(lineGraphic); ``` 同样地,也可以按照类似的逻辑来绘制一个多边形区域。 --- #### 4. 热力图渲染 热力图是一种非常直观的表现数据分布的方式。借助于 `FeatureLayer` 可以轻松实现该效果: ```javascript const heatmapRenderer = { type: "heatmap", field: "magnitude", // 数据字段名 maxPixelIntensity: 100, minPixelIntensity: 0 }; featureLayer.renderer = heatmapRenderer; // 应用热力图渲染器 map.add(featureLayer); // 加载 FeatureLayer 至地图中 ``` 以上片段演示了基于特定属性值生成动态热度变化的地图层。 --- #### §相关问题§ 1. 如何调整默认主题颜色以适配企业品牌? 2. 是否存在更简便的方法导入外部 GeoJSON 文件作为数据源? 3. 能否详细介绍下高级交互事件处理机制,比如鼠标悬停提示功能? 4. 对比 Leaflet 和 ArcGIS API for JavaScript,在性能表现上有何差异? 5. 如果项目需求涉及离线模式下的地图访问,应该采取哪些措施?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值