Vue2.x+Webpack环境下无法导入GeoJSON，OpenLayers图层添加失败求助

一、修复Webpack配置（vue.config.js） #

你的配置存在几个冲突和拼写问题，调整后如下：

const path = require('path');

module.exports = {
    lintOnSave: false, // 修正原拼写错误lineOnSave为lintOnSave

    devServer: {
        proxy: 'http://localhost:8080'
    },

    configureWebpack: {
        module: {
            rules: [
                // 移除重复的vue-loader配置，Vue CLI已内置处理.vue文件
                {
                    test: /\.geojson$/,
                    // webpack4+ 原生支持JSON解析，用type指定无需额外loader
                    type: 'json'
                }
            ]
        },
        resolve: {
            // 扩展名需带点，webpack才能正确匹配
            extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".geojson"],
        },
        // 移除VueLoaderPlugin，Vue CLI已自动配置，重复添加会导致冲突
    }
}

关键调整说明： #

• 修复lintOnSave的拼写错误，避免配置失效
• 删除手动添加的vue-loader规则和VueLoaderPlugin，避免与Vue CLI内置配置冲突
• 用type: 'json'替代json-loader，webpack4+已原生支持JSON类文件解析，无需额外安装依赖
• 修正resolve.extensions的扩展名格式，必须带前缀点（如.geojson而非geojson）

二、正确导入并添加GeoJSON图层到OpenLayers #

你的代码仅创建了基础地图图层，还需补充GeoJSON矢量图层的加载逻辑，以下提供两种可行方案：

方案1：通过import导入GeoJSON（需配合上述webpack配置） #

<template>
  <div ref="map" style="width: 100%; height: 600px;"></div>
</template>

<script>
import { Map as OlMap, View as OlView } from 'ol'
import { Tile as OlLayerTile, Vector as OlLayerVector } from 'ol/layer'
import { OSM, Vector as OlSourceVector } from 'ol/source'
import { GeoJSON } from 'ol/format'
import { fromLonLat } from 'ol/proj'
// 导入GeoJSON文件
import koreaGeoJson from '../assets/geojsonFile/korean.geojson'

export default {
  data() {
    return {
      olmap: undefined,
    }
  },
  mounted() {
    this.createKoreaMap()
  },
  methods: {
    createKoreaMap() {
      this.olmap = new OlMap({
        target: this.$refs.map,
        layers: [
          new OlLayerTile({
            source: new OSM({
              url: 'https://xdworld.vworld.kr/2d/midnight/service/{z}/{x}/{y}.png'
            })
          }),
          // 添加GeoJSON矢量图层
          new OlLayerVector({
            source: new OlSourceVector({
              features: new GeoJSON().readFeatures(koreaGeoJson, {
                // 转换GeoJSON的WGS84坐标系到OpenLayers默认的Web墨卡托
                dataProjection: 'EPSG:4326',
                featureProjection: 'EPSG:3857'
              })
            })
          })
        ],
        view: new OlView({
          center: fromLonLat([126.978275264, 37.566642192]),
          zoom: 10
        })
      })
    }
  }
}
</script>

方案2：通过Fetch加载GeoJSON（无需修改webpack配置） #

如果不想调整webpack配置，直接通过网络请求加载文件更简单：

<template>
  <div ref="map" style="width: 100%; height: 600px;"></div>
</template>

<script>
import { Map as OlMap, View as OlView } from 'ol'
import { Tile as OlLayerTile, Vector as OlLayerVector } from 'ol/layer'
import { OSM, Vector as OlSourceVector } from 'ol/source'
import { GeoJSON } from 'ol/format'
import { fromLonLat } from 'ol/proj'

export default {
  data() {
    return {
      olmap: undefined,
    }
  },
  mounted() {
    this.createKoreaMap()
  },
  methods: {
    async createKoreaMap() {
      this.olmap = new OlMap({
        target: this.$refs.map,
        layers: [
          new OlLayerTile({
            source: new OSM({
              url: 'https://xdworld.vworld.kr/2d/midnight/service/{z}/{x}/{y}.png'
            })
          })
        ],
        view: new OlView({
          center: fromLonLat([126.978275264, 37.566642192]),
          zoom: 10
        })
      })

      // 加载并解析GeoJSON文件
      const response = await fetch('../assets/geojsonFile/korean.geojson')
      const koreaGeoJson = await response.json()

      // 创建矢量图层并添加到地图
      const vectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: new GeoJSON().readFeatures(koreaGeoJson, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
          })
        })
      })
      this.olmap.addLayer(vectorLayer)
    }
  }
}
</script>

三、额外注意事项 #

1. 确认korean.geojson文件路径正确，需与当前组件的相对位置匹配
2. 若GeoJSON文件使用WGS84（EPSG:4326）坐标系，必须在readFeatures中指定坐标系转换参数，否则图层会显示在错误位置
3. 修改webpack配置后，需重启npm run serve使配置生效

内容的提问来源于stack exchange，提问作者Seung12