【完整的WebGIS教程】2、第一个基于vue的webgis项目

已于 2023-08-07 17:38:53 修改
阅读量1.3w 收藏 226
点赞数 43
CC 4.0 BY-SA版权
分类专栏： 从0开始基于vue的ArcGIS API for JS开发 文章标签： vue.js javascript
于 2022-04-20 19:13:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35093027/article/details/124304602
本文档详细介绍了如何使用vue-cli创建并运行第一个Vue项目，结合Element UI进行页面布局，并引入GIS功能，最终实现一个基于Vue的WebGIS应用。教程包括创建Vue项目、安装Element UI、配置代码格式化、引入Esri Loader以及构建GIS组件的步骤。

1 利用vue-cli创建第一个vue项目

1 创建一个项目

a. 创建一个文件夹：命名为webgis

在这里插入图片描述

b. 在文件夹按Shitf+鼠标右键，打开PowerShell窗口，运行以下命令来创建一个新项目：

vue create hello-webgis

c. 选择vue的2版本,等待安装

在这里插入图片描述

d. 文件目录

hello-webgis  -------->项目名称
	.git      -------->git工具
	node_modules ----->用来管理项目中使用的依赖
	public    -------->项目中使用到的资源，图片等？
		- index.html-->项目主页
	src
了解本专栏 订阅专栏 解锁全文 超级会员免费看
WebGIS开发基础（Web技术和地理信息系统（GIS））
m0_65890371的博客
07-01 1919
WebGIS开发基础包括前端开发、地图服务、空间数据库和后端开发。地图服务提供地理数据的加载和显示功能，包括瓦片地图服务和矢量地图服务。空间数据库用于存储和管理地理数据，并提供空间查询和分析功能。在原力计划中，WebGIS开发基础包括以下几个方面的内容：前端开发、地图服务、空间数据库和后端开发。瓦片地图服务：将地图切割成一系列小块（瓦片），通过HTTP协议提供给客户端，实现地图显示。地图服务是WebGIS的核心组成部分，提供地理数据的存储、管理和发布功能。常见的地图服务包括瓦片地图服务和矢量地图服务。
使用Vue项目集成Cesium，实现简单的GIS数据可视化
WwyOle的博客
09-26 824
GIS（地理信息系统）是一种用于存储、分析和可视化地理数据的技术。Cesium是一种用于构建3D地球和地图应用程序的开源JavaScript库。在Vue项目中集成Cesium可以实现强大的GIS数据可视化功能。本文将介绍如何在Vue项目中集成Cesium，并展示一个简单的示例。
WebGIS入门
leva的博客
06-10 2870
于是，WebGIS应用需求剧增，基于B/S架构的GIS系统越来越多地开始提供服务，并且随着RIA技术、Ajax技术等的涌现和成熟，WebGIS能够以更好的视觉效果与交互效果展现，越来越受到广大用户的关注。网络与GIS的融合成为GIS应用的催化剂，标志着GIS迎来一个新的时代，GIS真正走向大众化，其应用全面融入人们的工作与生活，并彰显出了巨大的活力。若设计简单的大众应用WebGIS，可以不使用服务器端开源GIS平台，直接访问第三方提供的数据服务、数据接口，或者存储在关系数据库中的POI数据等。
ArcGIS + vue 项目实战
Claudia_c的博客
09-09 5190
arcgis + vue 项目实战 一、搭建vue项目 省略。。。。。。。。。。。。。 二、vue项目中引入arcgis 安装命令 npm install --save esri-loader 三、举个栗子（附代码） <template> <div> <div ref="baseMap" class="baseMap"></div> </div> </template> <script> import {
WebGIS开发智慧校园（1）GIS开发的基本概念
最新发布
2301_78220461的博客
10-21 689
GIS开发分为桌面端、web端和移动端。WebGIS是指：将前端可视化技术与GIS技术结合，提供更好的信息展示和用户交互。近年来，前端技术日新月异，突飞猛进，发展十分迅速，尤其是以canvas和webGL为代表的前端可视化技术不断完善。实现了很多酷炫的效果提供了良好的用户交互Web前端技术和GIS技术深度融合，涌现出了大量优秀的框架，如处理二维GIS的 openlayers leaflet处理三维GIS的MapBox GL CesiumGL 框架的出现，为开发者提供了极大的便利。
基于Arcgis for Js的web GIS数据在线采集简介
weixin_30657541的博客
03-16 212
在前一篇博文“Arcgis for js之WKT和geometry转换”中实现了wkt和geometry之间的相互转化，博文原文地址为：http://blog.csdn.net/gisshixisheng/article/details/44057453。在本节，接上文，简单讲述基于Arcgis for Js的web GIS数据在线采集。 实现数据的在线采集，最主要的是数据的存储...
WEBGIS开发实实例教程
10-29
WEBGIS开发实实例教程
【WebGIS系统开发系列】Web项目搭建
Civitasv
05-29 2813
使用IDEA+Maven搭建Web项目
WebGIS项目开发实战（源代码及工程文件）
12-13
基于WebGIS主流平台ArcGIS和OpenGIS，深入浅出地介绍了WebGIS开发的原理与项目实践
WebGIS工程项目开发实践
01-24
ISBN：9787302427407,张贵军 博士、教授、博士生导师
ArcGis Server开发Web GIS入门教程
06-02
ArcGIS Server支持多种类型的服务，通过发布这些应用，可以开发定制功能，基于服务的web gis应用。本文介绍了ArcGis Server开发WebGIS的基本知识和基本步骤。
webgis项目报告
07-19
webgis项目报告，基于GOBEAN开发WEBGIS平台
精选资源
Openlayers+vue+台风数据+用于WebGIS上的台风轨迹和风圈展示
02-11
WebGIS技术结合Openlayers这一开源的WebGIS框架，以及Vue.js这一现代JavaScript框架，提供了强大的地图数据展示和交互能力。本文将详细介绍如何利用这些技术实现台风轨迹和风圈的可视化展示，以及相关数据文件的结构...
WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了【建议收藏】
2301_78220461的博客
04-25 3088
《WebGIS之Vue零基础教程》（1）Vue简介《WebGIS之Vue零基础教程》（2）Vue快速上手WebGIS开发系列教程（1）：GIS开发基础WebGIS开发系列教程（2）：Openlayers概述WebGIS开发系列教程（3）：Openlayers快速入门WebGIS开发系列教程（4）：Openlayers之多源数据展示WebGIS开发系列教程（5）：Openlayers高级功能WebGIS开发系列教程（6）：Openlayers之项目实战Three.js三维开发0基础教程：(1)搭建开发环境Th
迈向三维：vue3+Cesium.js三维WebGIS项目实战
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
02-21 6317
WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧。
Vue.js基础入门指南: 创建第一个WebGIS项目
Vue.js是目前流行度较高的前端框架之一，具有轻量级、易学易用、双向数据绑定、组件化开发等特点，是WebGIS开发的不错选择。 ## 1.2 Vue.js的优势 Vue.js的优势主要包括： - 渐进式框架，可以逐步应用到项目中 - ...
评论 12
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老靳的WebGIS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值