OpenLayers - 表示を正しく設定する範囲GEOJSon

Question

私はdatabsaeから取得するgeoJSONオブジェクトを持っています。この例では、私はここにオブジェクトの2つのポイントを与えました。しかし、あなたが地図が変わっているのを見ると、これは役に立たなくなります。私はこれをqgisからwebまで動かしています。しかし、私はこれの合理化されたプログラム的なバージョンを構築しようとしています。 geojsonとそれらが渡すことを望む特定のプロパティを読み取る。次にそれを表示します。私はこの非常に初歩的なjsfiddleをまとめました。誰かが助けてくれますか？

var extent = vectorSource.getExtent(); 
console.log(extent); 
map.getView().fit(extent, map.getSize()); 

https://jsfiddle.net/nextgenmappinginc/pkuj4jyh/

編集：別のフォーク

https://jsfiddle.net/nextgenmappinginc/zen0qu5e/

-

は、いつものように

は、私はあなたの助けに感謝

Answer 1

Coordinate Reference Systemsについて覚えておいてください。この場合、Web Mercator、EPSG：3857です。jsfiddle

var layer1 = JSON.parse("{\r\n\"type\": \"FeatureCollection\",\r\n\"crs\": { \"type\": \"name\", \"properties\": { \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\" } },\r\n\"features\": [\r\n{ \"type\": \"Feature\", \"properties\": { \"SCAN\": \"ATT000\", \"X_ft\": 281.911818, \"Y_ft\": 54.100892, \"Z_ft\": 5.418261, \"r\": -0.0016141, \"g\": 0.000225555, \"b\": 0.99999867, \"i\": 168.802, \"date\": \"10.12.2012\", \"time\": \"10:00:54\", \"X_in\": 3382.941816, \"Y_in\": 649.210704, \"Z_in\": 65.019132 }, \"geometry\": { \"type\": \"Point\", \"coordinates\": [ -141.20886083733603, 30.013650297314303 ] } },\r\n{ \"type\": \"Feature\", \"properties\": { \"SCAN\": \"ATT001\", \"X_ft\": 282.505798, \"Y_ft\": 44.299598, \"Z_ft\": 5.313561, \"r\": 0.001370681, \"g\": -0.000725627, \"b\": -0.9999988, \"i\": 97.710151, \"date\": \"10.12.2012\", \"time\": \"10:11:32\", \"X_in\": 3390.069576, \"Y_in\": 531.595176, \"Z_in\": 63.762732 }, \"geometry\": { \"type\": \"Point\", \"coordinates\": [ -141.20875820820822, 30.0133417954119 ] } },\r\n{ \"type\": \"Feature\", \"properties\": { \"SCAN\": \"ATT002\", \"X_ft\": 271.674014, \"Y_ft\": 53.557958, \"Z_ft\": 5.26399, \"r\": -0.003173992, \"g\": -0.003689405, \"b\": 0.99998816, \"i\": 43.906879, \"date\": \"10.12.2012\", \"time\": \"10:22:08\", \"X_in\": 3260.088168, \"Y_in\": 642.695496, \"Z_in\": 63.16788 }, \"geometry\": { \"type\": \"Point\", \"coordinates\": [ -141.2092317486329, 30.013559475335278 ] } }]}"); 
var image = new ol.style.Circle({ 
    radius: 5, 
    fill: null, 
    stroke: new ol.style.Stroke({color: 'red', width: 1}) 
}); 
var styles = { 
    'Point': new ol.style.Style({ 
    image: new ol.style.Circle({ 
     fill:new ol.style.Fill({color: 'red'}), 
     stroke: new ol.style.Stroke({color: 'black', width: 1}), 
     radius: 4 
    }) 
    }) 
}; 
var styleFunction = function(feature) { 
    return styles[feature.getGeometry().getType()]; 
}; 
var vectorSource = new ol.source.Vector({ 
    features: (new ol.format.GeoJSON()).readFeatures(layer1, { 
    featureProjection: 'EPSG:3857' 
    }) 
}); 
var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource, 
    style: styleFunction 
}); 
var view = new ol.View({ 
    center: [0, 0], 
    zoom: 100 
}); 
var map = new ol.Map({ 
    layers: [ 
    new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }), 
    vectorLayer 
    ], 
    target: 'map', 
    controls: ol.control.defaults({ 
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
     collapsible: false 
    }) 
    }), 
    view: view 
}); 
map.getView().fit(vectorSource.getExtent(), map.getSize())