vue中利用openlayer加载geojson

环境搭建的事就不多提了昂 安装一下  npm i ol

算啦，直接贴代码，实在点

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>
import { Map, View } from "ol";
import { Vector as VectorLayer, Tile } from "ol/layer";
import { Vector as VectorSource, OSM, XYZ } from "ol/source";
import GeoJSON from "ol/format/GeoJSON";
export default {
  mounted() {
    var layers = [
      new Tile({
        source: new OSM(),
      }),

      new VectorLayer({
        source: new VectorSource({
          url: "./1province.json", //GeoJSON的文件路径，用户可以根据需求而改变
          format: new GeoJSON(),
        }),
      }),
    ];

    this.map = new Map({
      target: "map",
      view: new View({
        projection: "EPSG:4326",
        zoom: 1,
        center: [114, 26],
      }),
      layers: layers,
    });

  },
};
</script>

<style>
#map {
  height: 800px;
}
</style>

这里面主要利用到了vectorSource下面的两项加载配置项

source{

url:指定路由  这里注意一下，如果是放在本地的话，切记要放在public目录下，vue默认去哪里找资源，把那儿视为根路径噢

format:解析格式，这里支持Geojson

}

最终加载结果：

好人做到底，下一句你接

geojson转化工具以及说明：

mapshaper

这个工具简直赞到爆，不过再进行shp转换的时候要注意不要傻乎乎的值上传一个.shp文件，要把其余的投影啥的文件也一并传上去，不然后面没加载出来可别怪我，哈哈，就这样

还得再补一句，这个实在是很好用，因为他加载的geojson是不收坐标的影像的，底图是3857他就是3857、底图改4326他就变4326