ajaxを使用してopenlayer3でレイヤーを追加する方法は？

Question

私はOpenlayers3を初めて使っています.....私はデータベースからデータを読み込み、openlayers3にベクトルデータをロードするためにPHPを使ってデータをロードしようとしていますが、何が問題なのか分かりません。 ここに私のコードです 誰も私を助けることができますか？

$(document).ready(function() 
{ 
//extent of the map 
view = new ol.View({ 
    center:ol.proj.transform([125.7799,8.7965], 'EPSG:4326', 'EPSG:3857'), 
    zoom:11, 
    maxZoom:18, 
    minZoom:2 
}); 

//BaseLayer 
var baseLayer = new ol.layer.Tile({ 
    source: new ol.source.OSM() 
}); 

// create a vector source that loads a GeoJSON file 
var vectorSource = new ol.source.Vector({ 
    projection: 'EPSG:4326', 
    url: 'data/Boundaries.geojson', 
    format: new ol.format.GeoJSON() 

    }); 

var geoJSONFormat = new ol.format.GeoJSON(); 

var farmersSource = new ol.source.Vector({ 
    loader: function(extent, resolution, projection) { 
    var url = 'allfarmers_geojson.php?p=' + extent.join(','); 
    $.ajax({ 
     url: url, 
     success: function(data) { 
     var features = geoJSONFormat.readFeatures(data); 
     farmersSource.addFeatures(features); 
     } 
    }); 
    }, 
    strategy: ol.loadingstrategy.bbox 
}); 


// Polygons 
var createPolygonStyleFunction = function() { 
    return function(feature, resolution) { 
    var style = new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
     color: 'blue', 
     width: 1 

     }), 
     fill: new ol.style.Fill({ 
     color: '#faeaac' 
     }), 
     //text: createTextStyle(feature) 
    }); 
    return [style]; 
    }; 
}; 

// a vector layer to render the source 
var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource, 
    style:createPolygonStyleFunction() 

}); 

var farmersLayer = new ol.layer.Vector({ 
    source: farmersSource 
    //style:createPolygonStyleFunction() 

}); 

//Map 
var map = new ol.Map({ 
    target:'map', 
    controls:ol.control.defaults().extend([ 
     new ol.control.ScaleLine(), 
     new ol.control.ZoomSlider() 
    ]), 
    renderer: 'canvas', 
    layers:[baseLayer,vectorLayer,farmersLayer], 
    view:view 
}); 

//////////styling features and with mouse over color change///////////// 
var highlightStyleCache = {}; 

var featureOverlay = new ol.layer.Vector({ 
source: new ol.source.Vector(), 
map: map, 
style: function(feature, resolution) { 
    var text = resolution < 5000 ? feature.get('NAME_3') : ''; 
    if (!highlightStyleCache[text]) { 
    highlightStyleCache[text] = new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
     color: '#f00', 
     width: 1 
     }), 
     fill: new ol.style.Fill({ 
     color: 'rgba(255,0,0,0.1)' 
     }), 
     text: new ol.style.Text({ 
     font: '12px Calibri,sans-serif', 
     text: text, 
     fill: new ol.style.Fill({ 
      color: '#f00' 
     }) 
     }) 
    }); 
    } 
    return highlightStyleCache[text]; 
} 
}); 

var highlight; 
var displayFeatureInfo = function(pixel) { 

var feature = map.forEachFeatureAtPixel(pixel, function(feature) { 
     return feature; 
    }); 

    if (feature !== highlight) { 
     if (highlight) { 
     featureOverlay.getSource().removeFeature(highlight); 
     } 
     if (feature) { 
     featureOverlay.getSource().addFeature(feature); 
     } 
     highlight = feature; 
    } 

    }; 

    map.on('pointermove', function(evt) { 
    if (evt.dragging) { 
     return; 
    } 
    var pixel = map.getEventPixel(evt.originalEvent); 
    displayFeatureInfo(pixel); 
    }); 

    map.on('click', function(evt) { 
    displayFeatureInfo(evt.pixel); 
    }); 
//////////End of styling features and with mouse over color change///////////// 

}); 

とここに私のPHPファイルは、あなたが持っているものを問題なし、正確に確認してください

<?php 
    $conn = new PDO('mysql:host=localhost;dbname=FarmersDB','root','admin'); 

    $sql = 'SELECT *, _coordinates__latitude AS x, _coordinates__longitude AS y FROM farmers'; 

if (isset($_GET['bbox']) || isset($_POST['bbox'])) { 
$bbox = explode(',', $_GET['bbox']); 
$sql = $sql . ' WHERE x <= ' . $bbox[2] . ' AND x >= ' . $bbox[0] . ' AND y <= ' . $bbox[3] . ' AND y >= ' . $bbox[1]; 
} 

$rs = $conn->query($sql); 
if (!$rs) { 
echo 'An SQL error occured.\n'; 
exit; 
} 

$geojson = array(
'type'  => 'FeatureCollection', 
'features' => array() 
); 


while ($row = $rs->fetch(PDO::FETCH_ASSOC)) { 
$properties = $row; 

unset($properties['x']); 
unset($properties['y']); 
$feature = array(
    'type' => 'Feature', 
    'geometry' => array(
     'type' => 'Point', 
     'coordinates' => array(
      $row['x'], 
      $row['y'] 
     ) 
    ), 
    'properties' => $properties 
); 

array_push($geojson['features'], $feature); 
} 

header('Content-type: application/json'); 
echo json_encode($geojson, JSON_NUMERIC_CHECK); 
$conn = NULL; 
?> 

Answer 1

ではありませんが、this..Youはおそらく右の投影を設定し、サーバーからdata応答を解析する必要がありますしてみてください..Projectionは、デフォルトではEPSG:3857です：

また

success: function(data) { 
    var JSONData; 
     try { 
     JSONData = JSON.parse(data); 
     } catch(err) { 
     alert(err); 
     return; 
     } 
     var format = new ol.format.GeoJSON(); 
     var features = format.readFeatures(JSONData, { 
      featureProjection: 'EPSG:3857' 
     }); 
     farmersSource.addFeatures(features); 
     farmersSource.changed(); 
    } 
    }); 

、EPSG:3857からvar vectorSource変更のプロジェクトに。別のこととして、vectorloaderプロパティをsource.vectorに追加する必要があります。例：

var locationSource = new ol.source.Vector({ 
    url: loc_url, 
    format: new ol.format.GeoJSON({ 
    defaultDataProjection :'EPSG:3857' 
    }), 
    loader: vectorLoader, 
    strategy: ol.loadingstrategy.all 
}); 

vectorLoader関数は次のようになり、サーバーへのajax呼び出しを行います。ローダ機能上の特記事項 - ソース層の上に（）が呼び出される明確な、それが再びベクトルローダ機能をトリガします：投げ

var vectorLoader = function(extent, resolution, projection) { 
    var url = this.getUrl(); 
    utils.refreshGeoJson(this); 
} 


var utils = { 
    refreshGeoJson: function(source,url) { 
    var now = Date.now(); 
    if (typeof url == 'undefined') { 
     url = source.getUrl(); 
    } 
    url += '?t=' + now; //Prevents browser caching if retrieving a geoJSON file 
    console.info('refreshGeoJson url: ' + url); 
    this.getJson(url).when({ 
    ready: function(response) { 
    var JSONResponse; 
    try { 
     JSONResponse = JSON.parse(response); 
    } catch(err) { 
     alert(err + ' - ' + url); 
     return; 
    } 
    var format = new ol.format.GeoJSON(); 
    var features = format.readFeatures(JSONResponse, { 
     featureProjection: 'EPSG:3857' 
    }); 
     source.addFeatures(features); 
     source.changed(); 
    } 
    }); 
}, 
getJson: function(url) { 
    var xhr = new XMLHttpRequest(), 
    when = {}, 
    onload = function() { 
    console.log(url + ' xhr.status: ' + xhr.status); 
    if (xhr.status === 200) { 
    console.log('getJson() xhr: '); 
    console.dir(xhr); 
    console.log('getJson() xhr.response: '); 
    console.dir(xhr.response); 
     when.ready.call(undefined, xhr.response); 
    } 
    if (xhr.status === 404) { 
     console.log('map file not found! url: ' + url); 
    } 
    }, 
    onerror = function() { 
     console.info('Cannot XHR ' + JSON.stringify(url)); 
    }; 
     xhr.open('GET', url, true); 
     xhr.setRequestHeader('cache-control', 'no-store'); 
     xhr.onload = onload; 
     xhr.onerror = onerror; 
     xhr.send(null); 
     return { 
     when: function(obj) { when.ready = obj.ready; } 
     }; 
    } 
}; 

をエキストラの多くは、ここで私はあなたの問題が何であるかわからないので、あなたのコードで。上記の例は、サーバーから定期的に変更されるgeoJSONファイルを取得するのに最適です。PHPスクリプトを呼び出す場合、同じ動作をします。この仕様に従ってgeoJSONデータを返すようにしてください：http://geojson.org/geojson-spec.html