Vue应用篇—读取本地geojson文件 ( Input data given to 'glasgow' is not a valid GeoJSON object )

最新推荐文章于 2022-08-24 16:31:10 发布
VIP文章 最新推荐文章于 2022-08-24 16:31:10 发布
阅读量4.8k 收藏 4
点赞数 2
分类专栏： Vue JS 学习笔记 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jishenshen97/article/details/105881213
版权

在应用mapbox的时候，想要导入自己的geojson文件，一直遇到bug

当前文件路径是：components/map/index.vue, 在这个index.vue文件里我addSource了一个geojson的文件，我确认这个文件的格式是对的，在github上可以正常显示：
在这里插入图片描述
并确定这个addSource的格式正确，图是官方案例
官方案例
但是我自己咋npm run serve之后，但是在它console.log报了一个错：status: 404, url: “http://localhost:8080/glasgow.geojson”, name: “e”, message: “Not Found”
报错
为啥啊？url的路径也没写错啊？各种谷歌与询问朋友之后ÿ

最低0.47元/天 解锁文章
Jishenshen97
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
leaflet加载geojson数据_Vue中使用Leaflet加载地图
weixin_39631932的博客
11-25 1693
Leaflet是地图开发中常用的一个开源Javascript库，不仅对于移动设备有所适配，而且在满足常见的地图开发需求的同时做到了非常小的体量（仅38KB）。虽然Leaflet的设计理念是简约、性能和可用性优先，没有那些花里胡哨的功能，但是丰富的开源插件同样可以让你在地图应用开发过程中优雅地避免重复造轮子的过程。另外，作为一个刚学Vue不久的小菜鸟，自然在面对一些小需求的时候想用来练练手，借着给公...
ajax读取geojson文件,ajax - Local GeoJSON file with Mapbox - Stack Overflow
weixin_42350314的博客
08-05 504
I'm trying to load a local file to MapBox getting error messages:ERROR parsererror No conversion from text to geojson from ajax function andError{message: "Input data is not a valid GeoJSON object."}...
vue读取本地的excel文件并显示在网页上方法示例
10-16
主要介绍了vue读取本地的excel文件并显示在网页上方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步：写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 components/olmap.vue代码： <template> <div id=map
Vue 报错TypeError: this.$set is not a function 的解决方法
12-12
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to:
php crud api,php-crud-api: Single file PHP script that adds a REST API to a SQL database
weixin_42499692的博客
03-09 278
PHP-CRUD-APISingle file PHP 7 script that adds a REST API to a MySQL 5.6 InnoDB database. PostgreSQL 9.1 and MS SQL Server 2012 are fully supported.NB: This is the TreeQL reference implementation in P...
ThreeJS读取GeoJson文件，绘制地图板
YOOSHIN的博客
05-10 2771
从网上大神那儿找来的代码，稍微修改了一下，ThreeJS感觉好难用，文档写的太简单了，不好下手 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>3D</title> <link href="./...
VUE3-Cesium（加载GeoJSON、KML、KMZ数据）
damadashen的博客
06-19 5837
Cesium中加载GeoJson数据、kml/kmz数据
geojson 导入mysql_批量将本地gis数据导入postgis数据库
weixin_36070282的博客
02-15 587
以前在处理gis数据的时候，都是直接导入本地shp素材、本地geojson素材，本地topojson素材，自从接触postgis数据之后，深感使用规范的存储系统来统一管理gis数据的好处，特别是数据量大了之后，优势便更加明显，你可以选择将很多需要做空间计算的步骤转移到Postgis数据库内进行计算，要知道Postgis提供的空间计算能力与R和Python这种应用导向的工具相比，优势要大得多。在批量...
openlayers学习——5、openlayers添加GeoJSON
记录生活点滴
01-10 3593
openlayers添加GeoJSON 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint
OpenLayers3 之 使用地理数据传输格式GeoJSON
a18826265589的博客
07-14 376
目录(?)[-] GeoJSON 如何利用它构建应用 PS 用户请求地理数据或者其他数据，服务器要以一定的客户端能够识别的数据 格式返回，数据格式是否高效，直接影响用户的体验！首先要求数据格式要是轻量级的，还要求客户端处理数据方便快捷，相较于XML，JSON满足这两个要 求，且目前应用广泛，非常流行。而在传输地理信息方面，相应有GeoJSON。下面咱就来了解一下G...
在vue中读取本地Json文件的方法
10-18
今天小编就为大家分享一篇在vue中读取本地Json文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解Vue.js搭建路由报错 router.map is not a function
10-19
主要介绍了详解Vue.js搭建路由报错 router.map is not a function，非常具有实用价值，需要的朋友可以参考下
Arcgis for js，Openlayers中加载GeoJSON
weixin_30767921的博客
03-15 504
概述：在前文中，讲述了在JAVA环境下如何将shp转换为GeoJSON，在本文，分别讲述在Arcgis for js，Openlayers2和Openlayers3中加载展示GeoJSON。实现：1、Openlayers2中加载GeoJSON在OL2中，可以直接调用OL2的借口实现GeoJSON的加载，代码示例：<!DOCTYPE html> <html> <he...
通过坐标点生成geojson格式的Polygon文件(Java)
yizhi鬼的专栏
07-27 4308
在实际项目中，geojson格式的文件应用场景非常多，比如：shapefile转geojson，加载geojson数据到openlayers、leaflet等开源地图组件中 等，还有些情况下需要自己把一系列点生成面，然后把面再转成geojson，之后把生成的geojson格式文件提供给前端使用，这里以java为例，实现坐标点生成geojson格式的Polygon文件。 首先引入geotools相关jar包 <!-- geojson --> <d...
2020-04-20
hhchwhy的博客
04-20 1155
!function t(e,i,n){function o(a,r){if(!i[a]){if(!e[a]){var l=“function"typeof require&&require;if(!r&&l)return l(a,!0);if(s)return s(a,!0);throw new Error(“Cannot find module '”+a+"’")...
【Vue+Flask】Vue获取本地静态资源（Json）的几种方式
yuelizhe4774的博客
08-10 2790
这种方法和上述方法差不多，都是一次加载文件，虽然之后我可以对数据进行更改，但是由于一次加载后，会将缓存文件存储在浏览器中，第二次调用还是第一次的文件。（通过对路由名称的定义可以解决这个问题，不过会有点麻烦）当然也有很多的解决办法（数据存在tomcat、配置其他环境等），但是，我已经要用Vue做前端，Flask做服务端，如果再使用别的，那不会变得更加麻烦吗。示例的路由结构式普通的，路由地址可以作为参数传递到下面的函数之中，通过这样的搭配，可以解决不同场景的需求，由于我觉得这样也挺麻烦的，所以想了第三种方法。.
Leaflet加载GeoJSON数据，并添加到FeatureGroup
LbJ_MVP的博客
08-24 5011
Vue地图项目，加载 GeoJSON数据，并添加到定义好的 FeatureGroup 上；L.GeoJSON解析。
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文件路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值