Suite

OpenLayers 3 affichant une couche vectorielle

OpenLayers 3 affichant une couche vectorielle


J'ai GeoJSON qui s'affiche avec bonheur sur GeoJson.IO que j'essaie d'afficher sur une couche vectorielle dans une carte OpenLayers 3.

Le GeoJSON est en EPSG:4326, la carte est en EPSG:3857.

Mon code est :

view = new ol.View( { // assurez-vous que la vue ne dépasse pas les 19 niveaux de zoom maxZoom: 10, projection: "EPSG:3857" }); map = new ol.Map( { couches : couches, contrôles : ol.control.defaults(), interactions : ol.interaction.defaults( { altShiftDragRotate : false, dragPan : true, rotate : false }) .extend([new ol .interaction.DragPan( { kinetic: null })]), // rendu : CANVAS, // Améliore l'expérience utilisateur en chargeant des tuiles tout en faisant glisser/zoomer. Cela rendra // le zoom saccadé sur les appareils mobiles ou lents. loadTilesWhileInteracting : true, target : 'carte', vue : vue }); activationvectorSource = new ol.source.Vector({ format : nouveau ol.format.GeoJSON(), projection : "EPSG:4326" }); activationLayer = new ol.layer.Vector( { title : 'Activation Boundary', source : activationvectorSource, style : new ol.style.Style( { stroke : new ol.style.Stroke( { color : 'red', width : 2 }) }) }); map.addLayer(activationLayer); activationvectorSource.addFeatures(données);

Je sais qu'il me manque quelque chose d'évident, mais je n'arrive tout simplement pas à l'afficher

Qu'est-ce que je rate?

GeoJSON (si nécessaire) :

{ "type":"FeatureCollection", "features":[ { "type":"Feature", "geometry":{ "type":"Polygon", "coordinates":[ [ [ 34.628906243797, -3.3379539608193 ], [ -69.477539050055, -1.4061088351833 ], [ -70.00488279996, -1.3182430566259 ], [ -71.191406237248, 0.043945308183483 ], [ -71.191406237248, 0.30761570958881 ], [ 44.8242318741971, 34.813803311646. 12.280966403201 ], [ 125.51330564158, 12.189703801854 ], [ 125.51879880564, 12.184334433131 ], [ 125.51879880564, 12.17359536978 ], [ 125.4968261494, 12.033948161512 ], [ 125.45837400096, [125.51879880564, 12.17359536978 ], [ 125.4968261494, 12.033948161512 ], [ 125.45837400096, 11.9909651.48066] "properties":{ "extent":"POLYGONE((-71.28123776566 -3.42762895713832,-71.28123776566 34.8875230280736,125.608630334052 34.8875230280736,125.608630334052 -3.42762895713832,-71.28123776566 -3.42762895700)":"activation]"OT13832"}}",H "OT13813"

Je pense que vous devez lire les fonctionnalités en utilisantformat.

data=' votre GeoJSON va ici '; var activationLayer = new ol.layer.Vector( { title: 'Activation Boundary', source: new ol.source.GeoJSON(), style: new ol.style.Style( { stroke: new ol.style.Stroke( { color : 'rouge', largeur : 2 }) }) }); map.addLayer(activationLayer); var format = new ol.format.GeoJSON(); activationLayer.getSource().addFeatures( format.readFeatures( data, { featureProjection: 'EPSG:3857' } ) );

De plus, j'ai dû régler le centre et le zoom pour la vue. Voir ce JSFiddle, qui affiche vos exemples de données.


Voir la vidéo: OpenLayers Add Vector Layer to Web Map