Как добавить шейп-файлы на карту Bing с помощью Openlayers 3

Я использую Openlayers3 с картами Bing для создания своего приложения. У меня есть шейп-файл точек, и я хотел бы показать его на карте. Я мог бы сделать это с помощью Openlayers2, используя конструкцию OpenLayers.Layer.GML(), но столкнулся с трудностями, пытаясь сделать то же самое с Openlayers 3. Я попытался найти это и openlayer example выдает ошибку: "Не удается прочитать свойство 'ogc' неопределенного'. Мой шейп-файл находится на GeoServer в моей собственной системе.

Поэтому любая помощь в этом вопросе приветствуется :)


shapefile openlayers-3 geoserver gml-geographic-markup-lan
person ThisIsJ    schedule 23.03.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Приведенный вами пример взят из очень старой бета-версии OpenLayers 3. Вы можете найти примеры из последней версии здесь.

Вы говорите о шейп-файлах, но, учитывая тот факт, что вы использовали OpenLayers.Layer.GML в OpenLayers 2 и отметили этот пост также geoserver и gml, я предполагаю, что вы загрузили свой шейп-файл на GeoServer и используете WFS для доступа к данным.

Таким образом, релевантным примером для рассмотрения будет http://openlayers.org/en/v3.3.0/examples/vector-wfs.html. В этом примере в качестве транспорта используется JSONP. В вашем случае с локальным GeoServer определение вашего векторного источника будет немного проще и может выглядеть так:

var vectorSource = new ol.source.ServerVector({
  format: new ol.format.GeoJSON(),
  loader: function(extent, resolution, projection) {
    var url = 'geoserver/wfs?service=WFS&version=1.1.0&' +
        'request=GetFeature&typename=osm:water_areas&outputFormat=json' +
        '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
    $.ajax(url).then(function(response) {
      vectorSource.addFeatures(vectorSource.readFeatures(response));
    });
  },
  strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
    maxZoom: 19
  }))
});

В приведенном выше фрагменте вам нужно будет заменить osm:water_areas именем вашей рабочей области и слоя (типа объекта).

Чтобы использовать этот источник в векторном слое, вы также можете добавить какой-нибудь стиль, если вам не нужна голубоватая заливка по умолчанию. На приведенном ниже изображении функции отображаются только синим контуром шириной 2 пикселя:

var vector = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
});
person ahocevar    schedule 23.03.2015
comment
спасибо за оперативный ответ. Я последовал вашей помощи и вставил имена своих слоев и адрес локального геосервера. Но я ничего не вижу на карте. Есть ли что-то, что мне не хватает? - person ThisIsJ; 25.03.2015
comment
Вот мой измененный код: var url = 'geoserver/cite/ows?service=WFS&' + 'version=1.0.0&request=GetFeature&typeName=' + 'usgs' + '&' + 'outputFormat=text/javascript&format_options=callback:loadFeatures ' + '&srsname=EPSG:3857&bbox=' + extension.join(',') + ',EPSG:3857'; - person ThisIsJ; 25.03.2015
comment
JSONP может быть деактивирован на вашем GeoServer. Но вам это не понадобится, если вы используете свой локальный GeoServer. Я отредактирую свой ответ, чтобы показать вам, как это сделать без JSONP. - person ahocevar; 26.03.2015
comment
Спасибо за это @ahocevar, но в любом случае я могу проверить URL-адрес, чтобы увидеть, действительно ли я могу использовать результаты, которые я получаю. Я имею в виду, что я не вижу никакой ошибки в консоли или где-либо еще, которая могла бы привести меня к выводу, и даже bbox не является своего рода ограничивающей рамкой, потому что все, что мне нужно, это координаты. - person ThisIsJ; 27.03.2015
comment
Я понял! Спасибо за ваш ответ, это действительно помогло мне. - person ThisIsJ; 27.03.2015