美文网首页
ArcGis API for JavaScript入门指南-Fe

ArcGis API for JavaScript入门指南-Fe

作者: 写前端的大叔 | 来源:发表于2019-11-20 14:09 被阅读0次

介绍

FeatureLayer(要素图层)是ArcGIS Server发布的一种很重要的地图服务,发布后可以直接提供url给前端进行添加展示,点击要素图层后还可以查看要素的属性,并且可以设置一些属性名显示在图层上。

添加图层

添加要素图层的方法跟添加其它的图层一样,首先引用要素图层类FeatureLayer,然后通过图层服务地址进行初始化,如下所示:

var featureLayer = new FeatureLayer("http://192.168.138.105:6080/arcgis/rest/services/XNSYDT/FeatureServer/1",{
                    outFields: ["*"],
                    popupTemplate:popupTemplate,
                    id:'featureLayer'
                });
                map.layers.add(subFeatureLayer);

outFields:定义可以显示的字段名称
popupTemplate:弹出显示的模板
id:图层ID。

图层上显示地名

通过设置FeatureLayerlabelingInfo可以将指定的字段名显示在图层上,比如在图层上显示要素的地名,可以用labelingInfo属性来添加。首先用TextSymbol创建一个文本显示的符号样式,可以设置文本的颜色、字体等信息,然后再创建LabelClass,用于设置显示的字段名、再将设置好的TextSymbol赋值给labelClass.symbol,最后再设置FeatureLayerlabelingInfo,如下所示:

              var statesLabel = new TextSymbol()
                statesLabel.color = new Color("#ffffff");
                statesLabel.font = {
                    size: 10
                }
                var labelClass = new LabelClass({
                    "labelExpressionInfo": {
                        "value": "{XZQMC}"
                    }
                });
                labelClass.symbol = statesLabel;
                featureLayer.labelingInfo = [labelClass];
                featureLayer.showLabels = true;
                subFeatureLayer.labelingInfo = [labelClass];
                subFeatureLayer.showLabels = true;

点击要素查询

点击要素图层后,可以获取到点击区域的基本信息,首先给mapView添加一个点击事件,然后查找到对应的图层,再通过layer.createQuery()来创建一个查询对象,再设置查询对象的geometry,再通过queryFeatures进行查询,具体代码如下所示:

mapView.on('click',function (event) {
                    let layer = this.map.findLayerById('featureLayer');
                    // 创建查询对象
                    let query = layer.createQuery()
                    // 将点击的点放入查询对象中
                    query.geometry = {
                        type: 'point', // autocasts as new Point()
                        longitude: event.mapPoint.x,
                        latitude: event.mapPoint.y,
                        spatialReference: 4527//arcgis js Unable to perform query operation
                    }
                    // 设置缓冲区
                    query.distance = 6
                    // 设置查询方式(相交)
                    query.spatialRelationship = 'intersects'
                    let a = layer.queryFeatures(query).then((res) => {
                        var features = res.features;
                        if(features && features.length > 0){
                            var feature = features[0];
                        }
                    })
                });

完全代码如下所示:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>地图</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.13/"></script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .esri-ui-corner,.esri-attribution{
            display: none!important;
        }
    </style>
    <script>
        var map;
        var mapView;
        require([
                "esri/Map", "esri/views/MapView","esri/layers/FeatureLayer","esri/symbols/TextSymbol","esri/layers/support/LabelClass","esri/Color"],
            function(Map,MapView,FeatureLayer,TextSymbol,LabelClass,Color,ImageryLayer)
            {
                var extent = {
                    xmin: 39278691.5235081,
                    ymin: 2614845.651735926,
                    xmax: 39452970.499419704,
                    ymax: 2731153.551714707,
                    spatialReference: 4527
                }
                var lods = [
                    { "level": 0, "resolution": 156543.03392800014, "scale": 5.91657527591555E8},
                    { "level": 1, "resolution": 78271.51696399994, "scale": 2.95828763795777E8},
                    { "level": 2, "resolution": 39135.75848200009, "scale": 1.47914381897889E8},
                    { "level": 3, "resolution": 19567.87924099992, "scale": 7.3957190948944E7},
                    { "level": 4, "resolution": 9783.93962049996, "scale": 3.6978595474472E7},
                    { "level": 5, "resolution": 4891.96981024998, "scale": 1.8489297737236E7},
                    { "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618},
                    { "level": 7, "resolution": 1222.992452562495, "scale": 4622324.434309},
                    { "level": 8, "resolution": 611.4962262813797, "scale": 2311162.217155},
                    { "level": 9, "resolution": 305.74811314055756, "scale": 1155581.108577},
                    { "level": 10, "resolution": 182.87405657041106, "scale": 577790.554289},
                    { "level": 11, "resolution": 76.43702828507324, "scale": 288895.277144},
                    { "level": 12, "resolution": 38.21851414253662, "scale": 144447.638572}
                ];
                map = new Map();
                //二维视图,并初始化视图位置
                mapView = new MapView({
                    container: "map",
                    map: map,
                    slider: false,
                    lods:lods,
                    zoom:10,
                    extent: extent
                });

                var popupTemplate = {
                    title: "行政区数据",
                    content: [{
                        type: "fields",
                        fieldInfos: [{
                            fieldName: "XZQMC",
                            label: "行政区名称",
                            format: {
                                places: 0,
                                digitSeparator: true
                            }
                        }, {
                            fieldName: "XZQDM ",
                            label: "行政区代码",
                            format: {
                                places: 0,
                                digitSeparator: true
                            }
                        }, {
                            fieldName: "DCMJ",
                            label: "调查面积(平方米)",
                            format: {
                                places: 0,
                                digitSeparator: true
                            }
                        }, {
                            fieldName: "JSMJ ",
                            label: "计算面积(平方米)",
                            format: {
                                places: 0,
                                digitSeparator: true
                            }
                        }]
                    }]
                };
                //镇级图层
                var featureLayer = new FeatureLayer("http://192.168.138.105:6080/arcgis/rest/services/XNSYDT/FeatureServer/1",{
                    outFields: ["*"],
                    popupTemplate:popupTemplate,
                    id:'featureLayer'
                });
                //村级图层
                var subFeatureLayer = new FeatureLayer("http://192.168.138.105:6080/arcgis/rest/services/XNSYDT/FeatureServer/0",{
                    outFields: ["*"],
                    popupTemplate:popupTemplate
                });

                var statesLabel = new TextSymbol()
                statesLabel.color = new Color("#ffffff");
                statesLabel.font = {
                    size: 10
                }
                var labelClass = new LabelClass({
                    "labelExpressionInfo": {
                        "value": "{XZQMC}"
                    }
                });
                labelClass.symbol = statesLabel;
                featureLayer.labelingInfo = [labelClass];
                featureLayer.showLabels = true;
                subFeatureLayer.labelingInfo = [labelClass];
                subFeatureLayer.showLabels = true;
                map.layers.add(featureLayer);
                map.layers.add(subFeatureLayer);
                mapView.on('click',function (event) {
                    let layer = this.map.findLayerById('featureLayer');
                    // 创建查询对象
                    let query = layer.createQuery()
                    // 将点击的点放入查询对象中
                    query.geometry = {
                        type: 'point', // autocasts as new Point()
                        longitude: event.mapPoint.x,
                        latitude: event.mapPoint.y,
                        spatialReference: 4527//arcgis js Unable to perform query operation
                    }
                    // 设置缓冲区
                    query.distance = 6
                    // 设置查询方式(相交)
                    query.spatialRelationship = 'intersects'
                    let a = layer.queryFeatures(query).then((res) => {
                        var features = res.features;
                        if(features && features.length > 0){
                            var feature = features[0];
                        }
                    })
                });


            });
    </script>
</head>

<body>
<div id="map">
</div>
</body>
</html>

个人博客

相关文章

网友评论

      本文标题:ArcGis API for JavaScript入门指南-Fe

      本文链接:https://www.haomeiwen.com/subject/krjoictx.html