vue+openlayers6 解析GeoJSON数据

风也曾吹过我_

已于 2022-01-19 18:24:29 修改

阅读量1.6k

点赞数 1

分类专栏： OpenLayers 文章标签： vue.js 1024程序员节

于 2021-08-27 20:34:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50496450/article/details/119960179

版权

OpenLayers 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何通过shpjs处理本地或线上Shapefile，将数据转化为GeoJSON，并讲解线上部署技巧。还涉及直接解析GeoJSON文件的方法，以及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解析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也需要是线上地址,本地路径有可能会报错