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; } } }

Comenzar con ArcGIS JavaScript - Añadir 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 ha publicado una Feature Layer con municipios holandeses (para el año 2019)<\/A> a través de ArcGIS Online.<\/P>

<\/P>

Vamos a añadir esta capa como un

FeatureLayer <\/A>a nuestra aplicación web.<\/P>

<\/P>

Luego ajustamos el estilo de la capa aplicando un renderer<\/SPAN>. Y definimos una popupTemplate<\/SPAN> para mostrar datos sobre el municipio en un popup. Finalmente añadimos un widget

LayerList<\/A>, para que se pueda activar y desactivar la capa.<\/P>

<\/P>

El código completo está abajo.

Haz clic aquí para ver el resultado final en acción<\/A>.<\/P>

<\/P>

<!DOCTYPE html><\/><<\/>html<\/>><\/><\/><<\/>head<\/>><\/><\/>  <meta charset=\"utf-8\"><\/>  <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\"><\/>  <title>Empezar con ArcGIS JavaScript - Añadir FeatureLayer</title><\/>  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel=\"stylesheet\" href=\"https://js.arcgis.com/4.11/esri/css/main.css\">
  <script src=\"https://js.arcgis.com/4.11/\"></script>
  <script>
      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: \"Gemeente {Gemeentenaam}\",
        content: \"Gemeentecode {GM_Code}\"
      };
      var renderer = {
        type: \"simple\",  // autocasts as new SimpleRenderer()
        symbol: {
          type: \"simple-fill\",  // autocasts as new SimpleFillSymbol()
          style: \"none\  class="punctuation token">, // El polígono no tiene relleno
          outline: {  // autocasts como nuevo SimpleLineSymbol()
            width: 1.5,
            color: "#F5B041" // Código de color hexadecimal
}
}
};

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>>

Encuentra más publicaciones etiquetadas con

Comentarios

There are no comments yet

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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