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

老靳的WebGIS

已于 2023-08-07 17:38:53 修改

阅读量1.2w

点赞数 43

分类专栏：从0开始基于vue的ArcGIS API for JS开发文章标签： vue.js javascript

于 2022-04-20 19:13:31 首次发布

本文链接：https://blog.csdn.net/qq_35093027/article/details/124304602

版权

从0开始基于vue的ArcGIS API for JS开发专栏收录该内容

10 篇文章 6 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文档详细介绍了如何使用vue-cli创建并运行第一个Vue项目，结合Element UI进行页面布局，并引入GIS功能，最终实现一个基于Vue的WebGIS应用。教程包括创建Vue项目、安装Element UI、配置代码格式化、引入Esri Loader以及构建GIS组件的步骤。

摘要由CSDN通过智能技术生成

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    -------->项目中使用到的资

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

老靳的WebGIS

关注关注

43
点赞
踩
222

收藏

觉得还不错? 一键收藏
打赏
12
评论
【完整的WebGIS教程】2、第一个基于vue的webgis项目

利用vue-cli创建你的第一个WebGIS项目
复制链接

扫一扫

专栏目录

订阅专栏

WebGIS开发基础（Web技术和地理信息系统（GIS））

m0_65890371的博客

07-01

1196

WebGIS开发基础包括前端开发、地图服务、空间数据库和后端开发。地图服务提供地理数据的加载和显示功能，包括瓦片地图服务和矢量地图服务。空间数据库用于存储和管理地理数据，并提供空间查询和分析功能。在原力计划中，WebGIS开发基础包括以下几个方面的内容：前端开发、地图服务、空间数据库和后端开发。瓦片地图服务：将地图切割成一系列小块（瓦片），通过HTTP协议提供给客户端，实现地图显示。地图服务是WebGIS的核心组成部分，提供地理数据的存储、管理和发布功能。常见的地图服务包括瓦片地图服务和矢量地图服务。

WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了

Python_0011的博客

09-04

9380

于是，WebGIS应用需求剧增，基于B/S架构的GIS系统越来越多地开始提供服务，并且随着RIA技术、Ajax技术等的涌现和成熟，WebGIS能够以更好的视觉效果与交互效果展现，越来越受到广大用户的关注。网络与GIS的融合成为GIS应用的催化剂，标志着GIS迎来一个新的时代，GIS真正走向大众化，其应用全面融入人们的工作与生活，并彰显出了巨大的活力。若设计简单的大众应用WebGIS，可以不使用服务器端开源GIS平台，直接访问第三方提供的数据服务、数据接口，或者存储在关系数据库中的POI数据等。

12 条评论您还未登录，请先登录后发表或查看评论

ArcGIS JavaScript 开发示例（一）

最新发布

龙哥盟

07-07

1108

Web 技术正在迅速变化，ArcGIS JavaScript API 也是如此。无论您的开发经验如何，ArcGIS 都提供了一种简单的方式来创建和管理地理空间应用程序。它为您提供了地图和可视化、分析、3D、数据管理以及对实时数据的支持。define方法定义了一个模块。一个模块可以有自己的私有变量和函数，只有被define函数返回的变量和函数才会被导入该模块的其他函数所暴露。define方法的一个示例如下：define方法中的第一个参数是模块名称或 ID。这是可选的。是我们模块的名称。

【WebGIS】一、基于VUE来构建一个WebGIS项目

xiaobai_1900的博客

09-16

3062

基于VUE构建一个WebGIS项目

WebGis实践（1）

qq_28053189的博客

04-10

1037

简单使用Idea创建web项目最近学校的互联网软件开发开始进入上机实习阶段了，开发最难的莫过于开头，再此跟随着实习进度写下一些上机心得，既为自己加强记忆，也为和我一样对java web抱有畏惧的人一些共勉。1、关于idea的项目结构可以看到几个文件夹:（1）.idea（2）out（3）src（4）web这其中.idea、out文件夹都不要我们关心，这两个文件夹里的东西都是自动生成的其次src文件夹，

WEBGIS开发实实例教程

10-29

WEBGIS开发实实例教程

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平台

WebGIS入门级教程，适合零基础，智慧校园案例代码，初学者适合。

05-01

采用html+css+javascript实现一个简单的校园热门地点，打卡，路径规划和动画演示的前端示例，资源为完成的测试通过的代码，可以用chrome打开，编辑可以用vscode或者Notepad++ Hbuilder等。适合初学者，有问题随时可以提问。

迈向三维：vue3+Cesium.js三维WebGIS项目实战

02-21

3766

WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧。

Vue.js基础入门指南: 创建第一个WebGIS项目

Vue.js是目前流行度较高的前端框架之一，具有轻量级、易学易用、双向数据绑定、组件化开发等特点，是WebGIS开发的不错选择。 ## 1.2 Vue.js的优势 Vue.js的优势主要包括： - 渐进式框架，可以逐步应用到项目中 - ...

12. Vue-WebGIS项目入门详解：使用iClient Vue组件实现地图定位

Vue-WebGIS项目是基于Vue.js框架和SuperMap iClient Vue组件的地理信息系统（GIS）项目。它利用现代Web技术，结合了Vue.js框架的数据驱动视图和SuperMap iClient Vue组件的地图功能，实现了一个功能强大的地理信息...

20. Vue-WebGIS项目入门详解：使用iClient Vue组件实现地图量算

Vue-WebGIS项目入门介绍 ## 1.1 什么是WebGIS WebGIS（Web Geographic Information System）是基于Web的地理信息系统，通过结合地理信息与网络技术，实现对地理信息数据的存储、处理、分析、展示和共享。WebGIS...

webgis基于vue开发完整教程

06-10

WebGIS是基于Web技术的地图信息系统，可以在浏览器中实现地图浏览、地图查询、地图分析等功能。本教程将介绍如何使用Vue框架开发一个WebGIS应用。以下是实现WebGIS应用的基本步骤： 1. 确定应用需求首先需要明确应用的需求，包括地图类型、地图数据、地图操作等。比如，我们可以选择使用百度地图作为底图，加载一些地图数据，实现地图缩放、地图拖拽、地图标注等基本功能。 2. 安装Vue CLI Vue CLI是Vue官方提供的脚手架工具，可以快速创建Vue项目。安装步骤如下： ``` npm install -g @vue/cli ``` 3. 创建Vue项目使用Vue CLI创建一个新项目，执行以下命令： ``` vue create webgis ``` 创建成功后，进入项目目录： ``` cd webgis ``` 运行项目： ``` npm run serve ``` 在浏览器中访问http://localhost:8080，可以看到Vue的欢迎页面。 4. 集成百度地图在/src目录下创建一个Map.vue组件，用于显示地图。在该组件中，引入百度地图API，并在mounted钩子函数中初始化地图。 ``` <template> <div id="map"></div> </template> <script> export default { mounted() { const map = new BMap.Map("map"); const point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); }, }; </script> <style> #map { height: 100%; width: 100%; } </style> ``` 可以看到，Map.vue组件中只有一个div元素，该元素的id为map，用于显示地图。在mounted钩子函数中，创建了一个新的BMap.Map对象，并将其初始化到指定的坐标点。BMap是百度地图API的命名空间，需要在index.html中引入。 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>webgis</title> <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> </head> <body> <div id="app"></div>  </body> </html> ``` 注意：需要将上述代码中的密钥替换为你自己的百度地图密钥。 5. 加载地图数据在Map.vue组件中，可以通过BMap API加载地图数据，包括地图标注、地图覆盖物等。例如，可以使用BMap.Marker类添加一个标注。 ``` <template> <div id="map"></div> </template> <script> export default { mounted() { const map = new BMap.Map("map"); const point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); const marker = new BMap.Marker(point); map.addOverlay(marker); }, }; </script> <style> #map { height: 100%; width: 100%; } </style> ``` 6. 实现地图操作在Map.vue组件中，可以通过BMap API实现地图操作，包括地图缩放、地图拖拽、地图事件等。例如，可以使用BMap.Map类的方法实现地图缩放。 ``` <template> <div id="map"></div> </template> <script> export default { mounted() { const map = new BMap.Map("map"); const point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); const marker = new BMap.Marker(point); map.addOverlay(marker); map.enableScrollWheelZoom(); }, }; </script> <style> #map { height: 100%; width: 100%; } </style> ``` 在上述代码中，使用BMap.Map类的enableScrollWheelZoom方法启用地图缩放功能。 7. 实现其他功能除了基本的地图浏览、地图查询和地图分析功能外，WebGIS应用还可以实现其他功能，比如地图搜索、地图导航等。这些功能可以通过调用BMap API中提供的方法来实现。以上就是基于Vue开发WebGIS应用的基本步骤。需要注意的是，WebGIS应用的开发需要掌握一定的地理信息知识和前端技术知识，同时还需要熟悉常用的地图API和GIS开发框架。