笔记

高德地图的使用

高德地图开放平台

引入高德地图 及 key

例一：

在根目录下的 index.html 引入高德地图 及 key

   <script src="https://webapi.amap.com/maps?v=2.0&key=9021a826717ff3e2dac7fdcc0e309970&plugin=AMap.CitySearch"></script>

在 vue.config.js 文件中修改webpack配置

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap'
    }
  }
}

在页面中使用

<div id="container"></div>

import AMap from 'AMap'
var map = new AMap.Map("container", {
  zoom: 9,
  center: [121.428599,28.661378],
  viewMode: '3D',  // 使用3D视图
  layers:[
    new AMap.TileLayer.Satellite()
  ]
});

例二：

载入的方式类似于 jquery 的脚本加载

created 生命周期载入高德地图API

async created () {
  // 已载入高德地图API，则直接初始化地图
  if (window.AMap && window.AMapUI) {
    this.initMap()
  // 未载入高德地图API，则先载入API再初始化
  } else {
    await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
    this.initMap()
  }
}

在页面中使用

<div id="container"></div>

initMap () {
	let AMap = this.AMap = window.AMap
	var map = new AMap.Map("container", {
	  zoom: 9,
	  center: [121.428599,28.661378],
	  viewMode: '3D',  // 使用3D视图
	  layers:[
	    new AMap.TileLayer.Satellite()
	  ]
	});
}

备注

进行 移动端开发 时，请在head内添加viewport设置，以达到最佳的绘制性能；

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

高德开放平台公开课

Echart的使用

Echarts官方地址
Gallery

安装echarts依赖

	npm install echarts -S

全局引入

// main.js
import echarts from 'echarts'
import * as echarts from 'echarts' // v5 以上引入方式
Vue.prototype.$echarts = echarts

在页面中使用

<div class="echart"></div>

let chart = this.$echarts.init(this.$el.getElementsByClassName('echart')[0])
let option = {
	// echart代码
}
chart.setOption(option)

按需引入

上面全局引入会将所有的echarts图表打包，导致体积过大。

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        // echart代码
      });
    }
  }
}

移动端

浙里办

相关文档

“浙里办”h5微应用迁移流程

浙政钉

内置浏览器
Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 dingtalk-win/1.0.0 nw(0.14.7) DingTalk(2.3.0-Release.24) TaurusApp(tauruszjd/2.3.0.24) Mojo/1.0.0 Native AppType(release) TaurusLanguage/zh_CN

城市大脑

微信小程序

中断未完成的请求

AbortController

AbortController接口表示一个控制器对象，允许你根据需要中止一个或多个 Web请求。

// 点位渲染逻辑, 图层筛选接口多，渲染中大量的dom操作，统一维护render任务和筛选接口请求,
// 用户触发新的筛选逻辑时停掉所有的异步render任务和ajax请求
export const wgmsAsyncFilterPointTask = {
    asyncTaskAbortController: (() => {
        console.log('asyncTaskAbortController')
        let fetchTokenInstanceList = []
        let abortInstanceList = []
        return () => {
            return {
                /**
                 * push 任务实例
                 * @param instance
                 */
                pushInstance: function(instance) {
                    abortInstanceList.push(instance)
                },
                /**
                 * 删除任务
                 */
                clearTask: function() {
                    // 异步任务全部强行停止掉
                    for (let i = 0; i < abortInstanceList.length; i++) {
                        abortInstanceList[i].abort()
                    }
                    // 之前未完成的请求全部结束
                    for (let i = 0; i < fetchTokenInstanceList.length; i++) {
                        fetchTokenInstanceList[i].cancel('cancel http')
                    }
                },
                /**
                 * 销毁掉任务
                 */
                destroyTaskQueue() {
                    this.clearTask()
                    abortInstanceList = []
                    fetchTokenInstanceList = []
                },
                /**
                 * 注册异步请求数据token
                 * @param tokenInstance
                 */
                registerAxiosToken(tokenInstance) {
                    fetchTokenInstanceList.push(tokenInstance)
                },
            }
        }
    })(),
}

// 图层切换
async checkedChange(data) {
    const taskQueue = wgmsAsyncFilterPointTask.asyncTaskAbortController()
    taskQueue.clearTask()
    const abortController = new AbortController()
    taskQueue.pushInstance(abortController)
    try {
        await this.renderSitesTask(data, abortController.signal)
        console.log('唯一渲染任务已经完成')
        taskQueue.destroyTaskQueue()
    } catch (e) {
        console.warn(e)
    } finally {
        console.log('一轮渲染任务完整结束')
    }
},

/**
* 图层筛选逻辑任务，此任务可以取消
* @param data<Object> 复选框选择的数据
* @param abortSignal<AbortController<abortSignal>> AbortController中的终止信号
*/
async renderSitesTask(data, abortSignal) {
	return new Promise(async (resolve, reject) => {
	  const error = new DOMException('没执行完的异步任务立刻停止掉', 'AbortError') // 1
	  console.log('标记点4')
	  this.getWgmsSitesByQuery(data.checkeds, data.currentChangeType).then(async mewList => {
		// mewList 数据返回
	   	resolve(true)
	  })
	  abortSignal.addEventListener('abort', err => {
		reject(error)
	})
})

/**
* 根据传入的图层做地图点位的筛选
 * @param checkList
 * @param checkGroupType
 * @return {Promise<void>}
 */
async getWgmsSitesByQuery(checkList = defaultToolLayer, checkGroupType) {
	const keys = Object.keys(checkList)
	for (let i = 0; i < keys.length; i++) {
		const params = this.buildQueryParamsByKey(keys[i], checkList) // 此处封装请求参数
        if (params) {
            promiseList.push(this.getFilterList(params, params.stationCode))
        }
    }
    return new Promise(async resolve => {
         try {
             const dataArr = await Promise.all(promiseList)
             resolve(dataArr)
         } catch (e) {
             resolve([])
             console.warn(e)
         }
     })
}

/**
* 查询数据
* @param params<Object> 其他参数
* @param stationCode<String> 监测点类型
* @return {Promise<void>}
*/
async getFilterList(params = {}, stationCode = '') {
	const registerTokenObj = wgmsAsyncFilterPointTask.asyncTaskAbortController()
	Vue.prototype.$service[ /** 封装的接口 **/](params, '', registerTokenObj.registerAxiosToken).then(res => {
		resolve({ code: stationCode, data: res.data })
	})
},

相关文档

Promise全面总结
浅析前端异常及降级处理

布局

flex与float

传统布局

兼容性好
布局繁琐

flex布局

操作方便，布局极其简单
移动端webkit内核都支持该属性
pc端浏览器支持情况比较差、IE11或更低版本不支持flex或仅支持部分

建议

如果是pc端页面布局，还是采用传统方式
如果是移动端或者是不考虑兼容的pc则采用flex

前端代码安全规范