使用GeoHey SDK开发地图应用的那些小技巧（贰）

在本期中，我们将主要围绕针对矢量图形图层中的图形对象进行操作时可能遇到的一些问题，提供解决的办法。

话不多说，就直接开始吧。

1.通过点击事件以外的方法，获取图形对象。
这个问题笔者提供2个思路：

A.简单粗暴的遍历

let gList = graphicLayer.all();  
let i=0,  
let len=gList.length;  
for(;i<len;i++){
  let g = gList[i];
  //对g进行条件比较
}

B.通过图层中图形对象的id

这种方法需要在创建对象后，插入图层时，指定图形对象的id，或是使用全局数据，记录下在未指定图形对象id时，将对象添加到图层后，返回到id。在这里，只给出前者的示例代码。

let g,id;  
graphicLayer.add(g, id);  
//要获取g时  
graphicLayer.get(id);  

2.如何批量的更新一个图层中所有图形对象的样式？

在最新版的sdk中，矢量图形图层有了一个全新的方法叫做setStyle。使用这个方法，可以根据给出的条件，对图层中所有符合要求的图形对象设置样式。那么，这个问题我们就可以扩展为："如何通过js代码，操作一个图层，将其中的图形对象中的特定的一个对象，设置为样式a，其它的对象为样式b"。

let filter;//过滤条件  
let a,b;//样式a，b  
graphicLayer.setStyle(b);  
graphicLayer.setStyle(filter, a);

3.为什么我的graphic对象添加到图层后，无法触发graphicClicked事件？

graphic对象在创建后，clickable属性默认是false，需要将其设置为true，才能正确的令对象触发graphicClicked事件。

var g = new G.Graphic.Point([116.39, 39.9], {  
    name: 'beijing'  
  }, {  
    shape: 'image',  
    size: [25, 40],  
    offset: [-12, -40],  
    image: 'images/pin{i}.png'
  });  
g.addTo(graphicLayer);  
g.updateOptions({clickable:true});

4.如何给给多个点要素加pin图标，并且在pin上增加对应的序号？

如果要素数量较少并且能够确定要素与pin的对应关系，可以直接增加对应数量的pin图标直接使用。
但是如果在pin上增加的文字内容数量较多，或是动态生产的内容时，就不能手工制作所有的静态图片来应对了。
这时候，就需要使用组合图形（Graphic.Group）,分别生成pin和pin上所要显示的文本内容index，将其组合后添加到图层中。

let index,indexText;  
let pin, pinImage;  
let geom;  
//pin对象为pin的基础图形  
pin = new G.Graphic.Point(geom, null,{  
    shape: 'image',  
    image: pinImage,  
    offset: [-18, -46],  
    size: [36, 50]  
})  
// index对象为pin上显示的文字内容  
index = new G.Graphic.Point(geom, null, {
    shape: 'text',  
    offset: [0, -26],  
    size: [12, 14],  
    text: index,  
    fillColor: '#fff',  
    textStyle: 'bold'  
});  
let g = new G.Graphic.Group([pin, index]);  
g.addTo(graphicLayer);  

5.如何绘制一个跟随鼠标移动的矩形／圆形／多边形表示框？

有时候，我们需要在鼠标的位置上显示一个矩形的图形（矩形为例），来表示诸如点击后显示数据的几何范围这类的提示。我们需要在监听鼠标在地图上的位置的同时，在一个专门的图层上，不停的擦涂／绘制矩形，来产生一个跟随鼠标移动的矩形提示框的效果。

//map对象和图层对象;
let map, mouseLayer;
//对map添加事件监听
map.addListener('mousemove', function(e){
    mouseLayer.clear();//清除现有的表示框;
    let [x, y] = [e.mapX, e.mapY];
    let g = new G.Graphic.Polygon([
    [
        [x - tileConfig.tile_extent / 2, y + tileConfig.tile_extent / 2],
        [x + tileConfig.tile_extent / 2, y + tileConfig.tile_extent / 2],
        [x + tileConfig.tile_extent / 2, y - tileConfig.tile_extent / 2],
        [x - tileConfig.tile_extent / 2, y - tileConfig.tile_extent / 2]
    ]
    ], {}, {
        fillColor: '#ff0',
        outlineColor: '#0f0',
        outlineOpacity: 0.5,
        fillOpacity: 0.1
    });
    g.addTo(mouseLayer);
}）;

最后，例行贴出本系列的模版footer，当然，交(liao)流(tian)群可是货真价实的，欢迎有需求的同学前来提问。
对我们的SDK在使用上有问题的同学，可以先访问我们的示例页面，在其中进行在线调试。如果依然有问题，也可以关注我们的公众号，或是加入我们的QQ交流群（164183186）。静候您的光临。