React-Leaflet 在开发环境中渲染本地图块答案

【问题标题】：React-Leaflet render local tiles in development environmentReact-Leaflet 在开发环境中渲染本地图块
【发布时间】：2019-01-15 21:36:35
【问题描述】：

我需要帮助来解决我在使用带有 React-leaflet 的 Webpack 时遇到的问题，当我想加载地图的图块时，我会收到每个图块的错误消息

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的回购

【问题讨论】：

如果这条路径适合你，不妨试试：localhost:9080/static/tiles/amakna/3/11/6.jpg
nop 也不起作用 ``` GET localhost:9080/static/tiles/amakna/3/15/8.jpg 404 (Not Found) ```

标签： reactjs webpack leaflet react-leaflet

【解决方案1】：

好的，我通过添加解决了我的问题：

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

到“url-loader”模块的 webpack 配置文件。

{ 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
  }
})

它奏效了！我的地图终于渲染了！ :)

【讨论】：