Question

我是Openlayers3的新用户......我正在尝试使用ajax＆amp; amp; php将矢量数据加载到openlayers3，我陷入困境，不知道是什么问题。这是我的代码任何人都可以帮助我吗？

$(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

不确定您遇到了什么问题，但尝试此操作。您可能需要设置正确的投影并解析来自服务器的data响应。默认情况下，投放为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();
    }
   });

此外，在var vectorSource上将项目更改为EPSG:3857。另外，您需要将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调用。关于加载器函数的特别说明 - 当在源层上调用clear（）时，它将再次触发向量加载器函数：

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数据：{{3} }

如何使用ajax在openlayer3中添加图层？

1 个答案: