nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Commencer avec ArcGIS JavaScript - Ajouter un FeatureLayer

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P>

<\/H2>FeatureLayer<\/H2><\/P>Esri Nederland a publié un Feature Layer avec les communes néerlandaises (pour l'année 2019)<\/A> via ArcGIS Online.<\/P>

<\/P>

Nous allons ajouter cette couche en tant que

FeatureLayer <\/A> à notre application web.<\/P>

<\/P>

Ensuite, nous adaptons le style de la couche en appliquant un renderer<\/SPAN>. Et nous définissons un popupTemplate<\/SPAN> pour pouvoir afficher des informations sur la commune dans une popup. Enfin, nous ajoutons un widget

LayerList<\/A>, afin que l'on puisse activer ou désactiver la couche.<\/P>

<\/P>

Le code complet est ci-dessous.

Cliquez ici pour voir le résultat final en action<\/A>.<\/P>

<\/P>

<!DOCTYPE html><\/>\n<<\/>html<\/>\n<<\/>head<\/>\n  <<\/>meta charset=\"utf-8\"><\/>\n  <<\/>meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\"><\/>\n  <<\/>title>Commencer avec ArcGIS JavaScript - Ajouter FeatureLayer</title><\/>\n  <<\/>style><\/>\n    html, body, #viewDiv {\n      padding: 0;\n      margin: 0;\n      height: 100%;\n      width: 100%;\n    }<\/>style><\/>\n<<\/>link rel=\"stylesheet\" href=\"https:\/\/js.arcgis.com/4.11/esri/css/main.css\"><\/>\n  <<\/>script src=\"https:\/\/js.arcgis.com/4.11/\"><\/>script><\/>script>
  \n      require([
        "esri/Map",
        "esri/geometry/Point",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/LayerList"
      ], function(Map, Point, MapView, FeatureLayer, LayerList) {
      var map = new Map({
        basemap: {
          portalItem: {
            id: "7aea6fa913a94176a1074edb40690318" // Topo RD
          }
        }
      });
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "Commune {Gemeentenaam}",
        content: "Code commune {GM_Code}"
      };
      var renderer = {
        type: "simple",  // autocasts as new SimpleRenderer()
        symbol: {
          type: "simple-fill",  // autocasts as new SimpleFillSymbol()
          style: "none"  class="punctuation token">, // Le polygone n'a pas de remplissage
          outline: {  // autocasts as new SimpleLineSymbol()
            width: 1.5,
            color: "#F5B041" // Code couleur hexadécimal
}
}
};

var nederlandseGemeentenLayer = new FeatureLayer({
        url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
        title: "Gemeenten (2019)",
        popupTemplate: popupTemplate,
        renderer: renderer
});

      map.add(nederlandseGemeentenLayer);

var view = new MapView({
	    spatialReference: 28992, 
	    container: "viewDiv",
	    map: map,
	    center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
	    zoom: 3
	  })

      var layerList = new LayerList({
        view: view
      });

      view.ui.add(layerList, {
        position: "top-right"
      });
    });





<<EMOJI_0>><<EMOJI_1>><<EMOJI_2>><<EMOJI_3>><<EMOJI_4>><<EMOJI_5>><<EMOJI_6>><<EMOJI_7>><<EMOJI_8>><<EMOJI_9>><<EMOJI_10>><<EMOJI_11>><<EMOJI_12>><<EMOJI_13>><<EMOJI_14>><<EMOJI_15>><<EMOJI_16>><<EMOJI_17>><<EMOJI_18>><<EMOJI_19>><<EMOJI_20>><<EMOJI_21>><<EMOJI_22>><<EMOJI_23>><<EMOJI_24>><<EMOJI_25>><<EMOJI_26>><<EMOJI_27>><<EMOJI_28>><<EMOJI_29>><<EMOJI_30>><<EMOJI_31>><<EMOJI_32>><<EMOJI_33>><<EMOJI_34>><<EMOJI_35>><<EMOJI_36>><<EMOJI_37>><<EMOJI_38>><<EMOJI_39>><<EMOJI_40>>

Trouver plus de publications taguées avec

Réponses

There are no comments yet

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.