ArcGIS API for JS 4.8二维高亮无效与FeatureLayer注记不显示的问题

版权声明: https://blog.csdn.net/GISuuser/article/details/81380894

问题发现

       ArcGIS API for JS 4.8会出现一个问题,添加进来的FeatureLayer在三维模式下,点击高亮显示,在二维下点击就无高亮的效果。当使用labelingInfo注记要素图层的时候也会出现这个问题,在三维下注记显示,在二维下注记不显示。

问题研究

    查看官方的API发现,这两个功能都需要WebGL的支持,三维下默认是WebGL渲染,二维下需要代码开启WebGL渲染,说是添加下面代码可以使用WebGL渲染。

 var dojoConfig = {
            has: {
                "esri-featurelayer-webgl": 1
            }
        }

 如果你觉得这样就会解决,太天真了。这代码加了也没有任何用。最后才发现二维模式下WebGL渲染使用是有限制条件的。

说是可以使用WebGL渲染,可这就相当于是VIP功能了呗! 

  • 只针对托管在ArcGIS Online的地图服务,和ArcGIS Server10.6.1以上版本发布的服务。
  • 对在前端页面自己代码创造的Feature组成的FeatureLayer无法使用

解决方案

        二维模式下高亮的解决,可以通过给FeatureLayer添加点击事件,通过点击事件获取的geometry,自己在屏幕上画一个特殊颜色出来就可以了。例子可以参考ArcGIS API for JS4.7加载FeatureLayer,点击弹出信息并高亮显示

      至于label注记的解决,我使用的是两个FeatureLayer叠加的形式,一个的symbol用的是"fill-symbol",上面的一层用"text-symbol"。下面是我用GeoJson生成的FeatureLayer,添加图形和注记的代码,可以参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>江西</title>
    <link type="text/css" rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.8/esri/css/main.css"/>
    <script>
        var dojoConfig = {
            has: {
                "esri-featurelayer-webgl": 1
            }
        }
    </script>
    <style type="text/css">
        html, body, #mapDIV {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            background-color: lightblue;
        }

    </style>
    <script src="http://localhost/arcgis_js_api/library/4.8/init.js"></script>
    <script src="http://localhost/arcgis_js_api/library/4.8/dojo/dojo.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

        require(["esri/Map",
                "esri/views/MapView",
                "esri/layers/GraphicsLayer",
                "esri/layers/FeatureLayer",
                "esri/Graphic",
                "esri/geometry/Polygon",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/layers/support/LabelClass",
                "esri/tasks/support/Query",
                "dojo/_base/connect",
                "dojo/on",
                "dojo/query",
                "esri/request",
                "dojo/domReady!"
            ],
            function (
                Map,
                MapView,
                GraphicsLayer,
                FeatureLayer,
                Graphic,
                Polygon,
                SimpleLineSymbol,
                SimpleFillSymbol,
                LabelClass,
                Query,
                connect,
                on,
                query,
                esriRequest
            ) {
                var layer;
                var map = new Map({
                    // layers: [graphicLayer]
                    basemap: "dark-gray"
                });
                var view = new MapView({
                    container: "mapDIV",
                    map: map,
                    extent: {
                        xmin: 113.574103,
                        ymin: 24.492908,
                        xmax: 118.481308,
                        ymax: 30.076852,
                        spatialReference: 4326
                    }
                });

                var layerRenderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        color: [12, 60, 142, 1],
                        outline: {
                            color: [17, 102, 171],
                            width: 1
                        }
                    }
                };
                var fields = [
                    {
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"
                    }, {
                        name: "areaName",
                        alias: "areaName",
                        type: "string"
                    }, {
                        name: "areaCode",
                        alias: "areaCode",
                        type: "string"
                    }
                ];


                view.when(function () {
                    getData()
                        .then(createGraphics)
                        .then(createLayer);
                });

                function getData() {
                    console.log("获取数据");
                    var url = "36.json";
                    return esriRequest(url, {
                        responseType: "json"
                    })
                }

                function createGraphics(response) {

                    var graphics = [];
                    var labels = [];
                    response.data.features.forEach(function (feature, i) {
                        graphics.push({
                            geometry: new Polygon({
                                type: "polygon",
                                rings: feature.geometry.coordinates[0]
                            }),
                            attributes: {
                                ObjectID: i,
                                areaName: feature.properties.NAME,
                                areaCode: feature.properties.CODE
                            }
                        });
                        labels.push({
                            geometry: new Polygon({
                                type: "polygon",
                                rings: feature.geometry.coordinates[0]
                            }),
                            symbol: {
                                type: "text",  // autocasts as new TextSymbol()
                                color: "white",
                                haloColor: "black",
                                haloSize: "1px",
                                text: feature.properties.NAME,
                                xoffset: 3,
                                yoffset: 3,
                                font: {  // autocast as new Font()
                                    size: 12,
                                    family: "sans-serif",
                                    weight: "bold"
                                }
                            },
                            attributes: {
                                ObjectID: i
                            }
                        })
                    });
                    return [graphics, labels];
                }


                function createLayer(graphics) {

                    layer = new FeatureLayer({
                        source: graphics[0],
                        fields: fields,
                        objectIdField: "ObjectID",
                        renderer: layerRenderer,
                        spatialReference: {
                            wkid: 4326
                        },
                        outFields: ["*"],
                        geometryType: "polygon"
                    });
                    var labelLayer = new FeatureLayer({
                        source: graphics[1],
                        fields: fields,
                        objectIdField: "ObjectID",
                        // renderer:layerRenderer,
                        spatialReference: {
                            wkid: 4326
                        },
                        outFields: ["*"],
                        geometryType: "polygon"
                    });
                    //添加面层
                    map.add(layer);
                    //添加注记层
                    map.add(labelLayer);
                }

            });
    </script>
</head>
<body class="claro">
<div id="mapDIV"></div>
</body>
</html>

就是下面这个样子:

没有更多推荐了,返回首页