topic Re: FeatureLayer is loaded but not shown in ArcGIS JavaScript Maps SDK Questions

FeatureLayer is loaded but not shown

雯妍汤 — Thu, 08 Dec 2016 00:53:34 GMT

When loading a Feature Service from my localhost, I came to this strange thing: All my feature layers are loaded without any error, but they can not be seen on the map.

In ArcGIS, it should be like this:

In Browser, it shows nothing. However, click on feature do does a query and returns the right data.

Changing Layer's Display Order does not fix it.

Do I have to write a client js Render myself, or am I missing something. Can anyone give some help.

Re: FeatureLayer is loaded but not shown

RobertScheitlin__GISP — Thu, 08 Dec 2016 03:05:51 GMT

Is your maps basemap and your layer in the same spatial reference? Are you applying the correct symbol for your geometry type? Your geometry is a polygon so are you providing a SimpleFillSymbol? It would help to share your code.

Re: FeatureLayer is loaded but not shown

FC_Basson — Thu, 08 Dec 2016 06:43:14 GMT

You haven't loaded your custom(?) basemap/Image Service over you features by accident?

Re: FeatureLayer is loaded but not shown

雯妍汤 — Thu, 08 Dec 2016 16:20:25 GMT

No, I don't think so.

After removing the base map layer, feature layer symbol still won't show.

Re: FeatureLayer is loaded but not shown

雯妍汤 — Thu, 08 Dec 2016 17:29:29 GMT

My code is quite simple, just initialize the map and add layer to it by given some local server URL.
Layers' spatial reference are consistent, otherwise the popup won't show up at the right place when click on the feature.There is one thing I don't figure out, you said I should provide a SimpleFillSymbol, while I'm trying to use a Server Side Defined Symbol, is it necessary to write my own js code to implement this?
Inadvertently, I found some feature however can appear when panning the map left or right and disappear immediately if I pan again. Notice the rest of them marked as red lines are still invisible.

Re: FeatureLayer is loaded but not shown

RobertScheitlin__GISP — Thu, 08 Dec 2016 17:34:41 GMT

That sounds like what FC Basson was saying then, that the polygon is under the image.

Are you using the black and white image shown in the image above as a basemap or just another layer added to the map. Seeing your code I could determine most of the questions I will have to ask.

Re: FeatureLayer is loaded but not shown

雯妍汤 — Fri, 10 Dec 2021 22:41:17 GMT

    /** tile map server url */
    var tileUrl = "http://localhost:6080/arcgis/rest/services/奥体东到元通上行/MapServer";
    var tileLayer = new TileLayer({
        url: tileUrl
    });
    /** feature server url  */
    var featureBaseUrl = "http://localhost:6080/arcgis/rest/services/元通到奥体东上行要素/FeatureServer";

    /** predefined layer id array list*/
    var featureArray = ['0', '1', '2'];
    /** store feature layer in this list */
    var featureLayerList = [];

    /** create a basemap */
    var baseMap = new Basemap({
        baseLayers: [tileLayer],
        title: "Metro Scan Basemap",
        id: "scanBaseMap"
    });
    /** initial a map, set the TileLayer as its basemap*/
    var map = new Map({
        basemap: baseMap //comment or uncomment this line not solve my issue
    });

    /** create map view */
    var view = new MapView({
        container: "viewDiv",
        map: map,
        extent: {
            xmin: -9177811,
            ymin: 4247000,
            xmax: -9176791,
            ymax: 4247784,
            spatialReference: 102100
        }
    });
    var popupTemplate = {
        title: "<h5 style='font-family:Microsoft Yahei Light;'>{Type}</h5>",
        content: "<table style='font-family:Microsoft Yahei Light;'><tbody>" +
            // "<tr><td>类型:</td><td> " + layerName + "</td></tr>" +
            "<tr><td>环号:</td><td> {Ring}</td></tr>" +
            "<tr><td>里程:</td><td> {Mile}</td></tr>" +
            "</tbody></table>"
    };
    view.then(function () {
        /** add feature layer to map */
        featureArray.forEach(function (layerName) {
            var url = featureBaseUrl + '/' + layerName;
            var layer = new FeatureLayer({
                url: url,
                outFields: ["*"],
                popupTemplate: popupTemplate
            });
            map.add(layer);
            featureLayerList.push(layer);
        });
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Now it's better

Re: FeatureLayer is loaded but not shown

RobertScheitlin__GISP — Thu, 08 Dec 2016 18:28:27 GMT

So I see that you are using JS api 4.1. This would have been helpful info from the begining. You are setting the views extent to WKID 102100 is your services in web mercator as well or some local Chinese projection?

Here is a link about formatting code on GeoNet

/blogs/dan_patterson/2016/08/14/script-formatting

Re: FeatureLayer is loaded but not shown

雯妍汤 — Thu, 08 Dec 2016 18:48:41 GMT

Sorry I didn't mention the js version, I thought the 4.1 tag may explain itself.

WKID 102100 is a Chinese Local Projection, does it matters?

Projection: Gauss_Kruger
False_Easting: 20500000.0
False_Northing: 0.0
Central_Meridian: 117.0
Scale_Factor: 1.0
Latitude_Of_Origin: 0.0
Linear Unit: Meter (1.0)
--------------------------------------
Geographic Coordinate System: GCS_Beijing_1954
Angular Unit: Degree (0.0174532925199433)
Prime Meridian: Greenwich (0.0)
Datum: D_Beijing_1954
Spheroid: Krasovsky_1940
Semimajor Axis: 6378245.0
Semiminor Axis: 6356863.018773047
Inverse Flattening: 298.3

Re: FeatureLayer is loaded but not shown

雯妍汤 — Thu, 08 Dec 2016 19:02:37 GMT

Oh, maybe I know what is wrong, I just provide a wrong WKID, it should be 21420.How stupid.

Re: FeatureLayer is loaded but not shown

RobertScheitlin__GISP — Thu, 08 Dec 2016 19:13:07 GMT

Wen Yan Tang,

So you have it fixed now?

Re: FeatureLayer is loaded but not shown

雯妍汤 — Thu, 08 Dec 2016 19:16:08 GMT

No, the problem remains.

Re: FeatureLayer is loaded but not shown

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:41:19 GMT

Hmm..

I can use the same code (and just update to my local WKID urls and change the maps extent to mine) and it works fine.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with MapView - Create a 2D map - 4.1</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
  <script src="https://js.arcgis.com/4.1/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Basemap",
      "esri/layers/TileLayer",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(Map, MapView, Basemap, TileLayer, FeatureLayer) {

      /** tile map server url */
    var tileUrl = "my url/arcgis/rest/services/myservice/MapServer";
    var tileLayer = new TileLayer({
        url: tileUrl
    });
    /** feature server url  */
    var featureBaseUrl = "my url/arcgis/rest/services/my service/MapServer";

    /** predefined layer id array list*/
    var featureArray = ['0', '1', '2', '3', '4','6'];
    /** store feature layer in this list */
    var featureLayerList = [];

    /** create a basemap */
    var baseMap = new Basemap({
        baseLayers: [tileLayer],
        title: "Metro Scan Basemap",
        id: "scanBaseMap"
    });
    /** initial a map, set the TileLayer as its basemap*/
    var map = new Map({
        basemap: baseMap //comment or uncomment this line not solve my issue
    });

    /** create map view */
    var view = new MapView({
        container: "viewDiv",
        map: map,
        extent: {
            xmin: 561001.09,
            ymin: 1111717.35,
            xmax: 748322.18,
            ymax: 1262842.31,
            spatialReference: 102629
        }
    });
    var popupTemplate = {
        title: "<h5 style='font-family:Microsoft Yahei Light;'>{Type}</h5>",
        content: "<table style='font-family:Microsoft Yahei Light;'><tbody>" +
            // "<tr><td>类型:</td><td> " + layerName + "</td></tr>" +
            "<tr><td>环号:</td><td> {Ring}</td></tr>" +
            "<tr><td>里程:</td><td> {Mile}</td></tr>" +
            "</tbody></table>"
    };
    view.then(function () {
        /** add feature layer to map */
        featureArray.forEach(function (layerName) {
            var url = featureBaseUrl + '/' + layerName;
            var layer = new FeatureLayer({
                url: url,
                outFields: ["*"],
                popupTemplate: popupTemplate,
                opacity: 0.5
            });
            map.add(layer);
            featureLayerList.push(layer);
        });
    });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: FeatureLayer is loaded but not shown

雯妍汤 — Sat, 10 Dec 2016 15:50:51 GMT

All right, after several days of struggle, I finally make symbols show by switching my Spatial Reference System from Beijing_1954_GK_Zone_20N(WKID: 21480) to WGS_1984_Web_Mercator_Auxiliary_Sphere(WKID: 3857).

My map is a subway 3D-laser scanning image using an assumed coordinate system, it does not matter whatever the actual SR is.

But, curiously, I'm wondering what if I'm really have to use that projection system, how to solve that question I raised above.

Re: FeatureLayer is loaded but not shown

雯妍汤 — Sat, 10 Dec 2016 16:00:44 GMT

Your starting point is right, the problem comes from the Spatial Reference.

After replace the former SR with WGS_1984_Web_Mercator_Auxiliary_Sphere, feature layer can now properly display.

Thanks for your time Robert!

Re: FeatureLayer is loaded but not shown

RobertScheitlin__GISP — Sat, 10 Dec 2016 18:43:04 GMT

Wen Yan Tang,

The 4.x Js API is not as mature as the 3.x API so because you are using a custom WKID and are only using a 2D view I would recommend using the 3.x version