前端如何玩转webgis开发酷炫界面实战项目经验指南

前端如何玩转webgis开发酷炫界面实战项目经验指南

免安装打开即用

支持地图种类繁多：几乎包含所有主流在线地图，包括不仅限于谷歌、百度、高德、四维、微软、诺基亚、天地图、腾讯、ArcGIS、雅虎等地图，每种地图各有千秋。

下载离线瓦片地图数据源（可以根据自己需求下载地图级别数据源，等级越大数据量越大，下载时间越久）

全能电子地图下载器的操作方法：

准备工作搭建部署开发Vue 脚手架搭建框架

1） 打开命令行窗口B2B电子商务平台，输入 node -v 查看，出现版本号说明已安装成功，如下图：

2） 使用以下命令安装Vue

npm install -g @vue/cli
// 安装指定版本
npm install -g @vue/cli@4.5.13
// OR
yarn global add @vue/cli

3）安装完成，检查vue版本前端如何玩转webgis开发酷炫界面实战项目经验指南，如下图：

vue -V

4） vue-cli4 创建项目及运行

vue create mapdemo
cd mapDemo
npm run serve

在浏览器地址栏输入：:8080/

引入开源的类库包

npm install ol

功能设计和代码实现

按照上面的步骤已完成脚手架构建，并把需要的 依赖库引入和安装配置好，准备上刺刀开干。

先来个简单的在线地图实例（参照官方DEMO）

在 main.js 文件中挂载google地图 输入经纬度，代码如下：

// 将全局的ol对象挂载到Vue的原型对象上
// 在别的组件中使用 this.$ol
Vue.prototype.$ol = window.ol

在 文件夹新建组件demo1.vue文件，代码如下：