Пример «Векторный слой изображений» не может быть запущен локально - PullRequest
Новая
       25

Пример «Векторный слой изображений» не может быть запущен локально

0 голосов
/ 28 сентября 2019

Пример «Vector Image Layer» не может быть запущен с местоположением файла «country.geojson» в локальном каталоге: «data / geojson / country.geojson», как показано в примере.Он не работает даже при размещении на другом удаленном адресе, например: "http://www.4dprostor.cz/countries.geojson". Есть ли рабочий способ присоединения файлов геоджона из локального местоположения? (Я работаю с Parcel.) 

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import VectorImageLayer from 'ol/layer/VectorImage';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Fill, Stroke, Style, Text} from 'ol/style';

var style = new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new Stroke({
color: '#319FD3',
width: 1
}),
text: new Text()
});

var map = new Map({
layers: [
new VectorImageLayer({
  imageRatio: 2,
  source: new VectorSource({

//  --------------------------------------------------------------------------------------     
//      url: 'data/geojson/countries.geojson',   This doesn't work !!
//      url: 'http://www.4dprostor.cz/countries.geojson',   This doesn't work either !!  
    url: 'https://openlayers.org/en/v6.0.0/examples/data/geojson/countries.geojson',
//      Only this works, but I need to mount my files from other locations.
//  --------------------------------------------------------------------------------------

    format: new GeoJSON()
  }),
  style: function(feature) {
    style.getText().setText(feature.get('name'));
    return style;
  }
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1
})
});

var featureOverlay = new VectorLayer({
source: new VectorSource(),
map: map,
style: new Style({
stroke: new Stroke({
  color: '#f00',
  width: 1
}),
fill: new Fill({
  color: 'rgba(255,0,0,0.1)'
})
})
});

var highlight;
var displayFeatureInfo = function(pixel) {

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

var info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.getId() + ': ' + feature.get('name');
} else {
info.innerHTML = ' ';
}

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);
});
...