{"id":1220,"date":"2022-05-08T16:14:45","date_gmt":"2022-05-08T14:14:45","guid":{"rendered":"http:\/\/www.joanillo.org\/?p=1220"},"modified":"2022-05-12T12:29:40","modified_gmt":"2022-05-12T10:29:40","slug":"openlayers-point-linestring-multilinestring-icon-ejemplo-canonico","status":"publish","type":"post","link":"https:\/\/www.joanillo.org\/?p=1220&lang=es","title":{"rendered":"Openlayers: Point, LineString, MultiLineString, Icon. Ejemplo can\u00f3nico"},"content":{"rendered":"

\"Ejemplo<\/a>Vamos a mostrar un ejemplo m\u00ednimo de Openlayers<\/b> que aclare los conceptos de dibujar un punto, una l\u00ednea, una multil\u00ednea y un icono. Y c\u00f3mo aplicar estilos a estos elementos.<\/p>\n

Definimos primero estos elementos (puntos, l\u00edneas, multil\u00edneas, iconos) a partir de los datos de ejemplo (coordenadas). Entonces definimos features<\/em> a partir de estos elementos, que aa\u00f1adimos a un array de features<\/em>. Cada feature<\/em> puede tener su estilo.<\/p>\n

Definimos despu\u00e9s el vectorSource<\/em> a partir del array de features<\/em>. Despu\u00e9s definimos el VectorLayer<\/em> a partir del vectorSource<\/em>. Y finalmente a\u00f1adimos al mapa los layers<\/em> que queremos pintar.<\/p>\n

Este es el codi inicial y previo para un peque\u00f1o proyecto que quiero hacer, que se trata de una aplicaci\u00f3n m\u00f2vil para enviar las coordenadas de posici\u00f3n a una RestAPI donde hay una base de datos (MongoDB), y con una aplicaci\u00f3n web (front-end, que es la part que aqu\u00ed se empieza a explicar) poder visualizar el recorrido del ciclista (la idea del proyecto es poder hacer el tracking de un ciclista en una primera etapa; y en una etapa posterior poder hacer el tracking de todos los ciclistas que participan en una carrera o salida).<\/p>\n

El c\u00f3digo final:
\n
\nimport 'ol\/ol.css';
\nimport Feature from 'ol\/Feature';
\nimport Map from 'ol\/Map';
\nimport VectorSource from 'ol\/source\/Vector';
\nimport View from 'ol\/View';
\nimport {Icon, Circle as CircleStyle, Fill, Stroke, Style} from 'ol\/style';
\nimport {LineString, MultiLineString, Point} from 'ol\/geom';
\nimport {getVectorContext} from 'ol\/render';
\nimport {fromLonLat} from 'ol\/proj';
\nimport {Tile as TileLayer, Vector as VectorLayer} from 'ol\/layer';
\nimport OSM from 'ol\/source\/OSM';<\/code><\/p>\n

\/\/dades
\nvar json_points = [
\n{'lon':1.4234,'lat':41.2344,'name':'punt 0'},
\n{'lon':1.4235,'lat':41.2345,'name':'punt 1'},
\n{'lon':1.4235,'lat':41.2346,'name':'punt 2'},
\n{'lon':1.4236,'lat':41.2346,'name':'punt 3'},
\n{'lon':1.4236,'lat':41.2347,'name':'punt 4'},
\n{'lon':1.4238,'lat':41.2349,'name':'punt 4'},
\n{'lon':1.4239,'lat':41.2350,'name':'punt 4'}
\n];<\/code><\/p>\n

\/\/ estils
\nvar styles = {
\n'Point': new Style({
\nimage: new CircleStyle({
\nfill: new Fill({
\ncolor: 'rgba(100,100,100,.8)',
\n}),
\nradius: 3,
\nstroke: new Stroke({
\ncolor: '#000000',
\nwidth: 2,
\n}),
\n}),
\n}),
\n'LineString': new Style({
\nstroke: new Stroke({
\ncolor: '#f00',
\nwidth: 3,
\n}),
\n}),
\n'MultiLineString': new Style({
\nstroke: new Stroke({
\ncolor: '#000000',
\nwidth: .8,
\n}),
\n}),
\n'icona': new Style({
\nimage: new Icon({
\nanchor: [0.5,20],
\nanchorXUnits: 'fraction',
\nanchorYUnits: 'pixels',
\nsrc: 'img\/circle_red_8.png'
\n})
\n})
\n};<\/code><\/p>\n

\/\/ points
\nvar features_points = new Array();<\/code><\/p>\n

var feature_point0 = new Feature({
\n'geometry': new Point(fromLonLat([json_points[0].lon,json_points[0].lat])),
\n'name': json_points[0].name,
\n});<\/code><\/p>\n

var feature_point1 = new Feature({
\n'geometry': new Point(fromLonLat([json_points[1].lon,json_points[1].lat])),
\n'name': json_points[0].name,
\n});<\/code><\/p>\n

var feature_point2 = new Feature({
\n'geometry': new Point(fromLonLat([json_points[2].lon,json_points[2].lat])),
\n'name': json_points[0].name,
\n});<\/code><\/p>\n

var feature_point3 = new Feature({
\n'geometry': new Point(fromLonLat([json_points[3].lon,json_points[3].lat])),
\n'name': json_points[0].name,
\n});<\/code><\/p>\n

var feature_point4 = new Feature({
\n'geometry': new Point(fromLonLat([json_points[4].lon,json_points[4].lat])),
\n'name': json_points[0].name,
\n});<\/code><\/p>\n

features_points.push(feature_point0)
\nfeatures_points.push(feature_point1)
\nfeatures_points.push(feature_point2)
\nfeatures_points.push(feature_point3)
\nfeatures_points.push(feature_point4)<\/p>\n

\/\/ l\u00ednies
\n\/\/Create a feature and add geometry as a thing
\nvar track1 = new MultiLineString([
\n[[json_points[0].lon,json_points[0].lat],[json_points[1].lon,json_points[1].lat]],
\n[[json_points[1].lon,json_points[1].lat],[json_points[2].lon,json_points[2].lat]],
\n[[json_points[2].lon,json_points[2].lat],[json_points[3].lon,json_points[3].lat]],
\n[[json_points[3].lon,json_points[3].lat],[json_points[4].lon,json_points[4].lat]]
\n]).transform('EPSG:4326','EPSG:3857');<\/p>\n

var feature_multilinestring = new Feature({
\ngeometry: track1,
\nname: 'nom track 1'
\n});<\/p>\n

var line1 = new LineString([
\n[json_points[5].lon,json_points[5].lat],[json_points[6].lon,json_points[6].lat]
\n]).transform('EPSG:4326','EPSG:3857');<\/p>\n

var feature_linestring = new Feature({
\ngeometry: line1,
\nname: 'nom l\u00ednia 1'
\n});<\/p>\n

var features_strings = new Array();<\/p>\n

features_strings.push(feature_multilinestring)
\nfeatures_strings.push(feature_linestring)<\/p>\n

\/\/icones
\nvar features_icones = new Array();<\/p>\n

let feature_icona1 = new Feature({
\ngeometry: new Point(fromLonLat([json_points[5].lon,json_points[5].lat])),
\nname: 'Inici',
\n});<\/p>\n

let feature_icona2 = new Feature({
\ngeometry: new Point(fromLonLat([json_points[6].lon,json_points[6].lat])),
\nname: 'Final',
\n});<\/p>\n

feature_icona1.setStyle(styles.icona); \/\/no cal si defineixo el estil en el layer.
\nfeature_icona2.setStyle(styles.icona); \/\/per\u00f2 definir\u00e9 l'estil en la icona si cada icona ha de tenir un estil diferent<\/p>\n

features_icones.push(feature_icona1);
\nfeatures_icones.push(feature_icona2);<\/p>\n

\/\/ vectorSources
\nvar vectorSourcePoints = new VectorSource({
\nfeatures: features_points,
\nwrapX: false,
\n});<\/p>\n

var vectorSourceStrings = new VectorSource({
\nfeatures: features_strings,
\nwrapX: false,
\n});<\/p>\n

var vectorSourceIcones = new VectorSource({
\nfeatures: features_icones,
\nwrapX: false,
\n});<\/p>\n

\/\/ layers
\nvar layerPoints = new VectorLayer({
\nsource: vectorSourcePoints,
\nstyle: styles.Point,
\n});<\/p>\n

var layerStrings = new VectorLayer({
\nsource: vectorSourceStrings,
\nstyle: styles.MultiLineString,
\n});<\/p>\n

var layerIcones = new VectorLayer({
\nsource: vectorSourceIcones,
\nstyle: styles.icona,
\n});<\/p>\n

<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/code>var map = new Map({
\nlayers: [
\nnew TileLayer({
\nsource: new OSM({
\nlayer: 'OSM'
\n})
\n}),
\nlayerPoints,
\nlayerStrings,
\nlayerIcones
\n],
\ntarget: 'map',
\nview: new View({
\ncenter: fromLonLat([1.4234, 41.2344]),
\nzoom: 18
\n})
\n});
\n<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Vamos a mostrar un ejemplo m\u00ednimo de Openlayers que aclare los conceptos de dibujar un punto, una l\u00ednea, una multil\u00ednea y un icono. Y c\u00f3mo aplicar estilos a estos elementos. Definimos primero estos elementos (puntos, l\u00edneas, multil\u00edneas, iconos) a partir de los datos de ejemplo (coordenadas). Entonces definimos features a partir de estos elementos, que […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[324,320,340,192,539],"tags":[],"_links":{"self":[{"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/posts\/1220"}],"collection":[{"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1220"}],"version-history":[{"count":2,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/posts\/1220\/revisions"}],"predecessor-version":[{"id":1238,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/posts\/1220\/revisions\/1238"}],"wp:attachment":[{"href":"https:\/\/www.joanillo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}