vue本地geojson文件读取不了，无法加载geojson的原因(附发布geojson图层源码)

最新推荐文章于 2024-07-29 11:32:06 发布
最新推荐文章于 2024-07-29 11:32:06 发布
阅读量348 收藏 1
点赞数 3
文章标签： json vue 信息可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73548338/article/details/137567954
版权

搞了一整天真的魔怔了，控制台一直报错说找不到文件，最后才找到原因

一开始是以为代码写错了，检查多遍后发现没错，就把url换成了在线链接，也没问题，那就是本地文件出了错。

来来回回看了很多遍，相对路径绝对路径都没问题，就是找不到文件404。

最后把.geojson文件放在public文件夹下面，相对路径记得用‘./XXXX’，因为我们自己编写的代码最终都会集成到public/index.html中，我们的相对路径要以index.html为起点

June_YYang
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue集成openlayers加载geojson并实现点击弹窗教程
10-14
主要为大家详细介绍了vue集成openlayers加载geojson并实现点击弹窗教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决vue中不能加载.geojson的问题
大剑师兰特的GIS世界
06-14 1835
在做vue项目的时候，碰到这样一个问题，vue页面中引用一个.geojson文件，提示如下错误：...vue-cli 本身不提供geojson的loader ，正常的提供css，json等的loader。这时候需要自己添加loader器。
vue.config.js 全局配置
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
Maven拉取geotools包失败！！！！已解决！！！！
weixin_39743920的博客
08-23 1571
Maven拉取geotools包失败！！！！已解决！！！！
vue项目本地正常运行，打包到线上时无法访问js等资源
生而为人我很抱歉
12-11 1350
config/index.js文件的build/assetsPublicPath应该配置成和nginx（或tomcat）一致。
38.（leaflet篇）leaflet叠加geojson图层.zip
10-09
在本教程中，我们将深入探讨如何使用Leaflet库在Web地图上叠加GeoJSON图层。Leaflet是一款轻量级的JavaScript库，专为创建交互式地图而设计。GeoJSON是一种地理数据格式，它以JSON（JavaScript Object Notation）的...
geojson-geometry-shp格式相互转化总结
06-26
首先，读取GeoJSON文件，然后将读取到的特征写入到新的ShapefileDataStore中。 3. SHP转GeoJSON 反过来，将SHP转换为GeoJSON，我们需要读取ShapefileDataStore并使用`GeoJSONWriter`将其写入GeoJSON格式。 4. 使用...
Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON，KML，GPX ) 加载为层.zip
09-18
Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON，KML，GPX ) 加载为层 Leaflet.FileLayer使用 API 将本地文件加载到映射中，不需要服务器调用就可以加载 ！简单的地图控件用户可以在本地浏览文件它被本地...
Vue加载json文件的方法简单示例
10-17
主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下
Cesium Vue（七）— GEOJSON数据展示
qq_40120946的博客
10-20 925
是一种用于对各种地理数据结构进行编码的格式。简而言之，GeoJSON为你提供了一种简单的格式来表示简单的地理特征以及它们的非空间属性。
Vue应用篇—读取本地geojson文件 ( Input data given to 'glasgow' is not a valid GeoJSON object )
Jishenshen97的博客
05-01 5084
在应用mapbox的时候，想要导入自己的geojson文件，一直遇到bug 当前文件路径是：components/map/index.vue, 在这个index.vue文件里我addSource了一个geojson的文件，我确认这个文件的格式是对的，在github上可以正常显示： 并确定这个addSource的格式正确，图是官方案例 但是我自己咋npm run serve之后，但是在它cons...
Vue+OpenLayers7入门到实战：OpenLayers从vue的assets资源路径加载geojson文件并解析数据叠加到地图上，以加载世界各国边界为例
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-25 286
本章介绍如何使用OpenLayers7在地图上加载世界各国边界的GeoJSON格式数据为例，讲解如何使用OpenLayers6从vue的assets资源路径加载geojson文件并解析数据叠加到地图上。
GeoJson网站
zhouschina的专栏
02-13 2611
http://geojson.org/
解决浏览器不能加载本地geojson数据，openlayers
rainbowday_的博客
11-29 1982
openlayers加载geojson数据不显示 控制台报错 Access to XMLHttpRequest at 'file:///E:/open_layers/modular/countries.geojson' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension,
H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）
热门推荐
林洪炳的日常技术积累
01-09 6万+
H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，JS代码较多，请耐心阅读。 一、Web Storage教程 1、概述： 对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web
【Vue+Flask】Vue获取本地静态资源（Json）的几种方式
yuelizhe4774的博客
08-10 2912
这种方法和上述方法差不多，都是一次加载文件，虽然之后我可以对数据进行更改，但是由于一次加载后，会将缓存文件存储在浏览器中，第二次调用还是第一次的文件。（通过对路由名称的定义可以解决这个问题，不过会有点麻烦）当然也有很多的解决办法（数据存在tomcat、配置其他环境等），但是，我已经要用Vue做前端，Flask做服务端，如果再使用别的，那不会变得更加麻烦吗。示例的路由结构式普通的，路由地址可以作为参数传递到下面的函数之中，通过这样的搭配，可以解决不同场景的需求，由于我觉得这样也挺麻烦的，所以想了第三种方法。.
vue 项目如何读取本地json文件数据
2301_76433421的博客
02-09 1万+
Vue项目读取本地json文件数据的方法如下： 创建一个json文件，比如data.json，并保存在项目目录下的static文件夹里 在Vue组件中引入json文件，例如： <script> import data from '@/static/data.json' export default { data() { return { jsonData: data } } } </script> 在模板中使用json数据： <temp
Hutool——发送http请求案例
最新发布
专注写bug
07-29 578
在实际开发过程中，微服务环境下往往采取openfeign实现服务与服务之间的请求调用。但有时候需要调用第三方API的情况，虽然在spring boot 框架中提供了请求模板，但这个不怎么好用。市面上支持http调用的框架技术很多，比如okhttp等。本篇文章重点说明Hutool给我们封装的请求方法类。/*** 调用post 接口发送get请求* @return。
vue+openlayer读取geojson数据文件
02-22
Vue.js是一个流行的JavaScript框架，用于构建用户界面。OpenLayers是一个开源的JavaScript库，用于在Web上显示交互式地图。结合Vue.js和OpenLayers，可以实现读取和展示GeoJSON数据文件的功能。 首先，你需要在Vue.js项目中安装OpenLayers库。可以通过npm或者yarn来安装OpenLayers依赖： ``` npm install ol ``` 或者 ``` yarn add ol ``` 安装完成后，在Vue组件中引入OpenLayers库： ```javascript import 'ol/ol.css'; import { Map, View } from 'ol'; import GeoJSON from 'ol/format/GeoJSON'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; export default { mounted() { this.loadGeoJSON(); }, methods: { loadGeoJSON() { // 读取GeoJSON文件 fetch('path/to/your/geojson/file.geojson') .then(response => response.json()) .then(data => { // 创建矢量源 const vectorSource = new VectorSource({ features: new GeoJSON().readFeatures(data), }); // 创建矢量图层 const vectorLayer = new VectorLayer({ source: vectorSource, }); // 创建地图 const map = new Map({ target: 'map', // HTML元素的id，用于显示地图 layers: [vectorLayer], view: new View({ center: [0, 0], // 地图中心点的坐标 zoom: 10, // 地图缩放级别 }), }); }); }, }, }; ``` 上述代码中，`loadGeoJSON`方法用于读取GeoJSON文件并创建地图。首先使用`fetch`函数获取GeoJSON文件的数据，然后使用`GeoJSON`格式化器将数据转换为矢量要素。接着，创建矢量源和矢量图层，并将矢量图层添加到地图中。最后，创建地图对象并显示在指定的HTML元素中（通过`target`属性指定）。 请注意，上述代码中的`path/to/your/geojson/file.geojson`需要替换为实际的GeoJSON文件路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值