开篇

原理其实很简单,监听 window 的 resize 事件,调用 echarts 的 resize 事件即可,文档在这里,自己看.

Vue 父组件向子组件传值,并且异步改变prop;

初始的时候,没有数据,因此父组件向子组件传入了一个空对象,等到数据请求回来之后,更新子组件的 prop ;并且执行其他逻辑.

vue + arcgis API for js V4.x 加载天地图/高德地图

• 说明 :

  • 关于项目 : 纯前端实现,当然了,框架用的是vue,官方脚手架生成的项目目录;用到了ES2015 的知识.加载方法封装到了 common.js 中,不同的地图,切换不同的url即可,本项目不涉及arcgis for server.

预备知识:

vue,Promise

• arcgis for js 版本: v3.24.

• 项目框架是用vue,这部分不需要在赘述了,重点梳理一下arcgis for js API方面的知识点,由于使用了vue,因此,所有的arcgis实例都保存在了vue组件里面,这样,就可以通过this在不同的作用域中访问,很方便.所以,在加载完之后,通过this.mapObj = obj保存的.是的,所有的模块是一次性加载的.当然了,还有一种优化的思路是:每次在需要该模块的时候再加载.

• 1 本地部署API:

  • 1 首先下载API 压缩包:下载地址;账号注册不了,我是用谷歌账户登录的,需要科学上网才行;

说明 :

项目环境是用 vue-cli 搭建的vue项目;在项目中使用vue 配合 arcgis开发;加载的地图为天地图

1.项目环境搭建 :

• 1.1 这里不在废话,如果会用vue;就会用vue-cli;直接用命令vue init webpack 生成就好了.
• 1.2 安装 esri-loader;这个也是arcgis官方开发的,用命令npm install --save esri-loader安装就行了;详细文档参考这里

• 1. 异步编程的背景知识

  • Javascript 引擎是基于单线程事件循环的概念构建的,同一时刻只允许一个代码块在执行。

• 1 必备条件 ：

  • 1.1 nodejs 环境;
  • 1.2 当前以webpack 4.6 为主.

必要条件

• 服务器一台 ( 虚拟机也可以 );
  一般 linux 安装完成,配置好网络等相关参数之后,可以通过 ssh 工具来连接,连接之后就可以在本地电脑对远程服务器进行操作了. 今天无意间发现, webstorm 也自带了 ssh 连接工具;具体使用如下 :