arcgis api for javascript (2) 获取属性字段及自定义graphic样式

通过FeatureLayer我们可以拿到一组graphic,graphic有attributes、geometry和symbol三个重要属性,效果如下

这里并没有用到真正的查询功能,只是简单的控制featureLayer的开闭。

主要步骤:

1.创建map,加载底图

2.加载FeatureLayer,设置其symbol,初始visible不可见

3.点击图标则打开对应的featureLayer,关闭其他featureLayer,更新左侧列表内容

第一步在上一篇讲过,这里从第二步开始。注:这里代码主要作为一个参考,并不能直接粘贴运行。

var FEATURELAYER_PREFIX = 'fl';

dojo.connect(map, 'onLoad', function (map) {
    $.get(SHANDONG_SERVER, { f: 'json' }, loadFeatureLayer, 'jsonp');
});
map.addLayer(baseLayer);

function loadFeatureLayer(data) {
    var 
        //该地图里包含的图层
        layers = data.layers,
        fLayers = [], fLayer,

        symbolNormal = new PictureMarkerSymbol("img/poi.png", 26, 30),
        renderer = new SimpleRenderer(symbolNormal);

    _.each(layers, function (layer) {
        //FeatureLayer的url即普通地图服务地址加上图层编号
        fLayer = new FeatureLayer(SHANDONG_SERVER + '/' + layer.id, {
            //服务返回graphic的模式,默认的就是这个MODE_ONDEMAND
            //根据map当前的extent返回数据,即只显示你正在浏览的区域里的数据
            //但是我自己碰到一个问题,总是有一部分超出map当前extent的数据也返回了,即左侧列表个数总是大于地图上显示的个数
            //虽然用代码可以解决,但是至今没找到原因,请高手指点!
            mode: FeatureLayer.MODE_ONDEMAND,
            extent: map.extent,
            //我们要在点击图标时才显示对应featurelayer,所以一开始不显示
            visible: false,
            //暴露所有字段
            outFields: ['*'],
            //指定该featurelayer的id
            id: FEATURELAYER_PREFIX + layer.id
        });
        //只有当地图放大到一定级别以上才可见
        fLayer.setMinScale(550000);
        //给featurelayer设置样式
        fLayer.setRenderer(renderer);
        fLayers.push(fLayer);
    });
    map.addLayers(fLayers);
}

//显示该id的图层
function showLayer(id) {
    var layer = map.getLayer(FEATURELAYER_PREFIX + id),
        graphics;
    //注意graphics是异步加载到map上的,所以得放在加载完成的回调里
    dojo.connect(layer, "onUpdateEnd", function (err) {
        if (err) return;
        // FeatureLayer.MODE_ONDEMAND模式下拿到的graphics有的超出map.extent, 原因不明
        // 手动判断
        graphics = [];
        _.each(layer.graphics, function (graphic, index) {
            if (withinExtent(graphic)) {
                graphic.index = index;
                graphics.push(graphic);
            }
        });
        app.controller.buildQueryList(graphics);
    });
    //显示图层
    layer.show();
}

function withinExtent(graphic) {
    var x = graphic.geometry.x,
        y = graphic.geometry.y,
        extent = map.extent;
    if (x >= extent.xmin && x <= extent.xmax && y >= extent.ymin && y <= extent.ymax)
        return true;
    return false;
}

希望对大家有帮助,关于FeatureLayer.MODE_ONDEMAND的问题望大神解答~

原文地址:https://www.cnblogs.com/coiorz/p/5057337.html