React-Leaflet отображает локальные тайлы в среде разработки

Мне нужна помощь в решении проблемы, с которой я столкнулся, используя Webpack с React-sheetlet, когда я хочу загрузить плитки моей карты, я получаю это сообщение об ошибке для каждой плитки

GET http://localhost:9080/home/drigtime/Documents/electron-webpack-quick-start/static/tiles/amakna/3/11/6.jpg 404 (Not Found)

Вот мой код компонента:

class MapComponent extends Component {
  state = {
    crs: L.CRS.Simple,
    hightLight: [],
    lat: -250,
    lng: 425,
    markers: [],
    maxZoom: 4,
    minZoom: 0,
    zoom: 3
  };
  render() {
    const { lat, lng, zoom, crs, maxZoom, minZoom } = this.state;
    const position = [lat, lng];

    return (
      <Map
        center={position}
        zoom={zoom}
        maxZoom={maxZoom}
        minZoom={minZoom}
        crs={crs}
      >
        <MapCoord />
        <MapArea />
        <HightLight />
        <TileLayer url={join(__static, "./tiles/amakna/{z}/{x}/{y}.jpg")} />
      </Map>
    );
  }
}

Я делаю что-то неправильно ? Как я могу загрузить свои фрагменты карты в среду разработки?

Вот репо моего проекта https://github.com/Drigtime/owltouch/tree/beta


webpack reactjs leaflet react-leaflet
person William Varlet    schedule 15.01.2019    source источник
comment
Возможно, попробуйте, подойдет ли вам этот путь: localhost: 9080 / static / tile /amakna/3/11/6.jpg   -  person Kyros Koh    schedule 16.01.2019
comment
nop также не работает `` GET localhost: 9080 / static / плитки / amakna / 3/15 / 8.jpg 404 (не найдено) `   -  person William Varlet    schedule 16.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я исправил свою проблему, добавив:

include : path.join(__dirname, "static")

в конфигурационный файл webpack для модуля url-loader.

{ test: /\.(png|jpg)$/, loader: "url-loader", include: [path.join(__dirname, 'static')] }

После этого я получил новое сообщение об ошибке:

Not allowed to load local resource: file:///home/drigtime/Document/electron-webpack-quick-start/static/tiles/amakna/3/12/6.jpg"

Поэтому я отключил веб-безопасность

const window = new BrowserWindow({
  webPreferences: {
    webSecurity: false
  }
})

И это сработало! Моя карта окончательно отрисовывается! :)

person William Varlet    schedule 16.01.2019