[JavaScript知识库]vue+openlayers6 解析GeoJSON数据

解析GeoJSON数据

有两种概况,一个是安装包或者文件夹解析成GeoJSON数据,这个里面必须报好一个.shp文件作为入口.或者是.getjson文件.

第一种情况:

1. yarn add shpjs 
2. const shapefile = require("shpjs");
shapefile("http://127.0.0.1:5500/国道").then((geojson) => {
    this.fileData = geojson;
});
注意:路径如果读取本地有可能会读取不到并报错,所以我把数据放在了线上
如何放在线上?
使用vscode,下载liveServe插件,然后再文件夹中找到该文件,然后再vscode中启动,并创建一个Html文件,任意命名,因为没有Html文件的话vscode是识别不到的,然后 `shift+!`生成html结构,然后右键有一个open widht live serve 点击它接口生成线上服务,这个vcode窗口不可以关闭,可以最小化,

第二种情况:因为已经是geojson文件了所以我们拿过来直接解析即可

let VectorLayer = new Vector({
    source: new VectorSource({
        projection: "EPSG:4326",
        url: "./simplestyles.geojson",
        format: new GeoJSON(),
        defaultFeatureProjection: "EPSG:4326",
    }),
});
this.map.addLayer(VectorLayer); //添加图层
注意:这个url也需要是线上地址,本地路径有可能会报错

个人总结 如有错误请各路大神见谅