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

ArcGIS API para JavaScript con Polymer

ReneRubalcava

<\/HEAD>

<\/P>

Recientemente hice un post en el blog<\/A> sobre cómo usar Polymer<\/A> con la ArcGIS API for JavaScript 4.0 beta<\/A>.<\/P>

<\/P>

Puedes leer más sobre Web Components

aquí<\/A> y aquí<\/A>.<\/P>

<\/P>

Los web components son increíbles, porque podrías hacer algo como esto en tu HTML.<\/P>

<\/P>

<body>
  <my-awesome-component><\/my-awesome-component>
<\/body><\/PRE><\/P>Y podrías tener que <my-awesome-component><\/SPAN> sea algún elemento de interfaz de usuario impresionante!<\/P><\/P>¿Suena genial, verdad? Sí, los web-components aún no están completamente soportados en todos los navegadores. Pero no te preocupes, mientras los proveedores de navegadores resuelven la especificación y detalles, podemos usar bibliotecas increíbles como

Polymer<\/A>. La mayoría de las bibliotecas como Angular<\/A>, Ember<\/A>, React<\/A> e incluso Dojo Djits<\/A> proporcionan componentes de algún tipo.<\/P>

<\/P>

00Entonces, 19qu9e es tan genial acerca de Polymer? <\EM> Veamos un componente simple que queremos usar para mostrar la extensin actual del mapa.<\P><\P><dom-module id=\extent-info\>
<template>
    <div class=\extent-details well\>
      xmin: <span>{{xminc}}</span><br>
      ymin: <span>{{yminc}}</span><br>
      xmax: <span>{{xmaxc}}</span><br>
      ymax: <span>{{ymaxc}}</span><br>
    </div>
</template>
<style>
    .extent-details {
      margin: 1em;
    }
</style>
<script>
    var ExtentInfo = Polymer({
      is: 'extent-info',
      properties: {
        xmin: Number,
        ymin: Number,
        xmax: Number,
        ymax: Number,
        xminc: {
          type: Number,
&nbsp-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;- computed: 'toFixed(2, xmin)'
&nbsp-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;-& nbsp;} ,
&nbsp-& nbsp;-& nbsp;yminc: {
&nbsp-& nbsp;- type: Number,
&nbsp-& nbsp;- computed: 'toFixed(2, ymin)'
},
xmaxc: {
type: Number,
computed: 'toFixed(2, xmax)'
},
ymaxc: {
type: Number,
computed: 'toFixed(2, ymax)'
}
},
toFixed: function(n, x) {
return x.toFixed(n);
}
});
</script>
</dom-module><\PRE><\P><\P>Asi que vamos a revisar esto.<\P><\P>La raz de tu componente es un dom-module<\STRONG> con un id que corresponde al id dado al constructor de Polymer<\STRONG>. Luego tenemos una secci template>. La secci template contiene los elementos DOM reales de tu componente. Aqu puedes enlazar atributos a tu componente Polymer usando la sintaxis mustache {{bindingVariable}}<\STRONG>. Estas variables enlazadas se definen en el constructor Polymer como propiedades. En estas propiedades puedes definir

propiedades computadas . Es decir, estas son propiedades que se calculan basadas en otras propiedades, en este caso simplificando la precisi de los nmeros del extent.<\P><\P>La belleza de estos componentes es que para actualizarlos simplemente actualizas los atributos del elemento DOM y las propiedades computadas se encargan del resto.<\P><\P>

class Component {
 constructor(data) {
 // agregar enlace de importaci
 var href = require.toUrl('app/views/PolymerView/components/ExtentInfo.html');
 var node = document.querySelector('.esriTop.esriRight');
 var link = document.createElement('link');
 link.setAttribute('href', href);
 link.setAttribute('rel', 'import');
 document.body.appendChild(link);

 var el = document.createElement('extent-info');
 node.appendChild(el);
 el.setAttribute('xmin', data.xmin)
 el.setAttribute('ymin', data.ymin)
 el.setAttribute('xmax', data.xmax)
 el.setAttribute('ymax', data.ymax)
 this.element = el;
 }

 update(data) {
 var el = this.element;
 el.setAttribute('xmin', data.xmin)
 el.setAttribute('ymin', data.ymin)
 el.setAttribute('xmax', data.xmax)
 el.setAttribute('ymax', data.ymax)
 }
};
export default Component;<\PRE><\P><\P>Ahora la forma fcil de usar esto con la ArcGIS API for JavaScript 4.0 beta es usando

Accessors . Puedes crear un Modelo que extienda Accessor y defina el Extent.<\P><\P>

import Accessor from 'esri/core/Accessor';
import Extent from 'esri/geometry/Extent';
class Model extends Accessor {
 classMetadata: {
 properties: {
extent: {
type: Extent
}
}
}
};
export default Model;<\PRE><\P><\P>Dado que es un

Accessor , puedes observar cambios en el Modelo y actualizar los valores del componente con esos cambios.<\P><\P>

import Model from './Model';
import Component from './components/ViewProxy';
// Controlador enlaza Modelo y vista
class Controller {
 constructor(extent) {
 this.model = new Model({ extent: extent });
 this.view = new Component({
posicion: 'topright',
xmin: this.model.extent.xmin,
ymin: this.model.extent.ymin,
xmax: this.model.extent.xmax,
ymax: this.model.extent.ymax
});
th is.model.watch('extent', (val) => {
th is.view.update({
xmin: val.xmin,
ymin: val.ymin,
xmax: val.xmax,
ymax: val.ymax
});
'this });
'this }
'this };
'this export default Controller;< \PRE >< \ P > < \ P > Eso es todo. Puedes comenzar a construir un monton de componentes reutilizables que pueden componerse juntos para crear una aplicaci completa si quieres.< \ P > < \ P > Actualmente hay un proyecto llamado < A href = " https : / / github.com / JamesMilnerUK / esri-polymer " rel = " nofollow noopener noreferrer " target = " _blank " > esri-polymer < / A > en github de James Milner de Esri UK que es realmente genial. Est basado en la actual ArcGIS API for JavaScript 3.x, as que no tiene Accessors, pero tiene suficientes componentes que permite armar una aplicaci sin escribir ningun JavaScript.< \ P > < \ P > Esto es el futuro de lo que vendr en desarrollo web, pero olvida el futuro, puedes hacer estas cosas ahora.< \ P > < \ P > Para ms consejos y trucos geodev, < A href = " http : / / odoe.net / blog / " rel = " nofollow noopener noreferrer " target = " _blank " > visita mi blog < / A > . < \ P > < / BODY >< / HTML >

Encuentra más publicaciones etiquetadas con

GeoDev Adventures

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.