ArcGIS API for JavaScript 3.24 标注的添加和点击标注的回调事件

说明：本人是一个gis小白，由于网上的资料过于专业，当时学习的时候经常看不懂，于是写了一些简单的关于ArcGIS Api for javaScript分享，若该分享中出现错误，希望大家指出，若能帮助到各位，不胜荣幸。

由于项目需要兼容ie，没办法，不能使用4.+版本的了o(╥﹏╥)o，又由于项目的需要，3.24的版本还是要重新学的o(╥﹏╥)o

好吧，加载地图就不说了，直接从加载 ‘点标注’ 开始扯

（因为公司多个项目需要用到arcgis，所以我将它写成接口了，使用的时候只要引入这个js并调用这个方法就可以）

var addPointSymbol = function(point,symbol,attributes,infoTemplate){

    point = new DCI.esri.Point(point.longitude,point.latitude);
    symbol =  new DCI.esri.PictureMarkerSymbol({
        'url': symbol.url,
        'width': symbol.width || 20,
        'height': symbol.height || 20,
        'color': symbol.color || '',  //{a:1,r:255,g:255,b:255}
        'angle': symbol.angle || 0,
        'xoffset': symbol.xoffset || 0,
        'yoffset': symbol.yoffset || 0,
    });
    infoTemplate = infoTemplate ? new DCI.esri.InfoTemplate(infoTemplate) : '';

    var graphic = new DCI.esri.Graphic(point,symbol,attributes,infoTemplate);
    DCI.map.graphics.add(graphic);

    return [graphic]
    };

 

代码中的DCI是我在我在外面定义的全局变量，比如DCI.map是我在用来存储地图这个对象所使用的变量，

DCI.map = new DCI.esri.Map(DCI.mapID, {
            center: new DCI.esri.Point(point.longitude, point.latitude),
            zoom: 16,
            minZoom: 12,
            maxZoom: 18,
            slider: false,  //缩放按钮
            logo: false
        });
DCI.map.addLayer(new DCI.esri.ArcGISTiledMapServiceLayer(url));

而DCI.esri.XXXX则是直接获取arcgis api里面的XXXX对象,如

这里引入arcgis 的各种api

然后在下面将它赋值到我定义DCI.esri的对象中去

 

回到加载标注的代码，上文的方法中加载标注有四个变量，分别是 point,symbol,attributes和infoTemplate

point：用来存储该标注的坐标，是必填项

symbol：用来存储该标注的样式，其中主要的是标注的所使用的图片，所以这个是必填的，其它的都有默认值，是选填项

attributes： 用来存储一些信息，在你获取到这个标注的时候能拿到这些信息

infoTemplate：这个属性是用来生成一个点击的时候会出现的弹窗 ，这个属性本来是很好用的，  但是这个弹窗的样式和内容不太好控制（主要是技术水平不够），所以基本没使用过这个属性，那碰到需要的弹窗的功能怎么办嘞

我在外面加了一个标注的点击事件回调，在地图加载完成之后，给graphics的‘mouse-down’事件加了一个回调，当鼠标点击标注的时候，就会调用这个方法，并返回该标注的数据（event，之前说的 attributes 属性里面的信息就会在这里返回，还包括该标注的位置信息等等），然后我通过DCI.triggerEvent方法将数据返回到外面

DCI.triggerEvent是一个自定义事件触发方法

在这之前首先得调用自定义的事件监听方法DCI.subscriEvent方法（mapID是我用来存储地图容器的id）

用法是DCI.subscriEvent方法传入一个自定义事件的名字和回调函数，使用DCI.triggerEvent（‘刚刚自定义的名字’，‘回调函数的参数’）触发这个回调函数

好吧，有点乱了

让我们来捋一捋这一套逻辑

首先，在加载完地图之后加一个 ‘标注点击事件’ 的回调（也就是上面那个mouse-down事件后面的方法），然后再往地图上添加标注，接着调用自定义的事件监听方法（DCI.subscriEvent（‘自定义名字’，‘这是回调函数’）），这样一来，在点击标注的时候就会调用那个mouse-down事件后面的方法，而这个方法是调用自定义的事件触发函数（DCI.triggerEvent（‘这是刚刚自定义的名字’，‘这是刚刚定义的回调函数的参数’）），这样一来，标注的数据将会在点击的时候传到自定义事件的回调函数中。

这一整套的逻辑就是这个样子，拿到数据之后想做弹窗还是其它什么操作都就都可以自己实现了

因为经常看不到消息留言，若有还有不懂的地方可联系本人QQ:1162620357