{"id":1214,"date":"2022-05-08T15:59:59","date_gmt":"2022-05-08T13:59:59","guid":{"rendered":"http:\/\/www.joanillo.org\/?p=1214"},"modified":"2022-05-12T12:28:50","modified_gmt":"2022-05-12T10:28:50","slug":"openlayers-point-linestring-multilinestring-icon-exemple-canonic","status":"publish","type":"post","link":"https:\/\/www.joanillo.org\/?p=1214","title":{"rendered":"Openlayers: Point, LineString, MultiLineString, Icon. Exemple can\u00f2nic"},"content":{"rendered":"

\"Exemple<\/a>Anem a mostrar un exemple m\u00ednim d’Openlauers<\/b> que aclareixi els conceptes de dibuixar un punt, una l\u00ednia, una multil\u00ednia i una icona. I com aplicar estils a aquests elements.<\/p>\n

Definim primer aquests elements (punts, l\u00ednies, multil\u00ednies, icones) a partir de les dades d’exemple (coordenades). Aleshores definim features<\/em> a partir d’aquests elements, que afegim a un array de features<\/em>. Cada feature<\/em> pot tenir el seu estil.<\/p>\n

Definim despr\u00e9s el vectorSource<\/em> a partir de l’array de features<\/em>. Despr\u00e9s definim el VectorLayer<\/em> a partir del vectorSource<\/em>. I finalment afegim al mapa els layers<\/em> que volem pintar.<\/p>\n

Aquest \u00e9s el codi inicial i previ per a un petit projecte que vull fer, que tracta d’una aplicaci\u00f3 m\u00f2bil per enviar les coordenades de posici\u00f3 a una RestAPI<\/em> on hi ha una base de dades (MongoDB<\/em>), i amb una aplicaci\u00f3 web (front-end, que \u00e9s la part que aqu\u00ed es comen\u00e7a a explicar) poder visualitzar el recorregut del ciclista (la idea del projecte \u00e9s poder fer el tracking<\/em> d’un ciclista en una primera etapa; i en una etapa posterior poder fer el tracking<\/em> de tots els ciclistes que participen en una cursa o sortida).<\/p>\n

El codi 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)<\/code><\/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><\/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":"

Anem a mostrar un exemple m\u00ednim d’Openlauers que aclareixi els conceptes de dibuixar un punt, una l\u00ednia, una multil\u00ednia i una icona. I com aplicar estils a aquests elements. Definim primer aquests elements (punts, l\u00ednies, multil\u00ednies, icones) a partir de les dades d’exemple (coordenades). Aleshores definim features a partir d’aquests elements, que afegim a un […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,16,12,44,36,534],"tags":[],"_links":{"self":[{"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/posts\/1214"}],"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=1214"}],"version-history":[{"count":8,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/posts\/1214\/revisions"}],"predecessor-version":[{"id":1237,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=\/wp\/v2\/posts\/1214\/revisions\/1237"}],"wp:attachment":[{"href":"https:\/\/www.joanillo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joanillo.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}