OpenLayers - 올바르게보기 설정 GEOJSon

Question

그래서 databsae에서 검색하는 geoJSON 객체가 있습니다. 이 예제의 경우 여기에 객체의 몇 가지 점을주었습니다. 그러나지도가 너무 넓어서 축소 된 것을 보면이 것이 쓸모 없게됩니다. qgis에서 웹으로 작업하고 있습니다. 그러나 이것의 능률적이고 프로그램 방식의 버전을 만들기 위해 노력하고 있습니다. geojson과 그들이 전달하고자하는 특정 속성을 읽을 수 있습니다. 그런 다음 표시하십시오. 나는이 초석을 모은다. 누군가 제발 도와 줄 수 있어요.

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

좌표 참조 시스템을 기억하십시오. 이 경우 웹 메르카토르, 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())