Mais

OpenLayers 3 exibindo uma camada vetorial

OpenLayers 3 exibindo uma camada vetorial


Eu tenho o GeoJSON que felizmente exibe no GeoJson.IO que estou tentando exibir em uma camada vetorial em um mapa OpenLayers 3.

O GeoJSON está em EPSG: 4326, o mapa está em EPSG: 3857.

Meu código é:

view = new ol.View ({// certifique-se de que a visualização não ultrapasse os 19 níveis de zoom maxZoom: 10, projeção: "EPSG: 3857"}); map = new ol.Map ({camadas: camadas, controles: ol.control.defaults (), interações: ol.interaction.defaults ({altShiftDragRotate: false, dragPan: true, rotate: false}) .extend ([novo ol .interaction.DragPan ({kinetic: null})]), // renderizador: CANVAS, // Melhora a experiência do usuário carregando blocos enquanto arrasta / amplia. Tornará // o zoom instável em dispositivos móveis ou lentos. loadTilesWhileInteracting: true, target : 'mapa', ver: ver}); activationvectorSource = new ol.source.Vector ({formato: novo ol.format.GeoJSON (), projeção: "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 (dados);

Eu sei que estou perdendo algo óbvio, mas simplesmente não consigo exibi-lo

o que estou perdendo?

GeoJSON (se necessário):

{"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Polygon", "coordinates": [[[[34.628906243797, -3.3379539608193], [ -69,477539050055, -1,4061088351833], [-70,00488279996, -1,3182430566259], [-71,191406237248, ,043945308183483], [-71,191406237248, ,30761570958881], [44,824218741971, 34,813803311646], [45,527343741845, 34,813803311646], [90,354309065846, 23,762723177664], [125,3814697041, 12,280966403201], [125,51330564158, 12,189703801854], [125,51879880564, 12,184334433131], [125,51879880564, 12,17359536978], [125,4968261494, 12,033948161512], [125,45837400096, 11,990965148066], [34,980468743734, -3,3379539608193], [34,628906243797, -3,3379539608193]]]}, "propriedades": {"extinção": "POLYGON ((- 71,28123776566 -3,42762895713832, -71,28123776566 34,8875230280736,125,608630334052 34,8875230280736,125,608630334052 -3,42762895713832832)" 00958326 713832 "009583286528}" 0095832628713832} "00958238326286286282" 00958 123,4186 "0027123id}" 0027123,2832832628628} "0027123832832832628}" 218123, 8238126, 832, 823832832, "12958328126" 0238123id}

Acho que você precisa ler recursos usandoformato.

data = 'seu GeoJSON vai aqui'; 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 : 'vermelho', largura: 2})})}); map.addLayer (activationLayer); formato var = novo ol.format.GeoJSON (); activationLayer.getSource (). addFeatures (format.readFeatures (data, {featureProjection: 'EPSG: 3857'}));

Além disso, tive que definir o centro e o zoom para a visualização. Veja este JSFiddle, que exibe seus dados de amostra.


Assista o vídeo: OpenLayers 5 for Windows 10 - Quick Start usando npm