9.26关于使用三方地图 mapboxgl

关于使用三方地图 mapboxgl

官网 mapboxgl 注册账号，并且新建一个token

安装

npm install --save mapbox-gl

在页面中布局新建一个div ，为其配置id，在初始化mapbox的时候将ID对应即可

<div id="map"></div>

在css中给这个div配置样式，配置具体大小，（基本所有基于canvas的绘图组件都需要分配一个有具体大小的“壳”）否则无法在界面上出现地图

#map{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
     100%; 
}

在script中引用mapbox：

const mapboxgl = require('mapbox-gl');  //引入组件

定义地图的初始化函数，在挂载完成时调用：

mounted () {
        this.initmap();  
    },
methods: {
  initmap(){
    mapboxgl.accessToken = 'pk.******************************************************'; //这里请换成自己的token
    var map = new mapboxgl.Map({
    container: 'map', // container id 绑定的组件的id
    style: 'mapbox://styles/mapbox/streets-v11', //地图样式，可以使用官网预定义的样式,也可以自定义
    center: [118.726533,32.012005], // 初始坐标系，这个是南京建邺附近
    zoom: 15,     // starting zoom 地图初始的拉伸比例
    pitch: 60,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
    bearing: -17.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
    antialias: true, //抗锯齿，通过false关闭提升性能
    });  
   }
 }

现在地图已经可以显示出来了，如果要对地图进行更多的操作，在map的初始化中可以用on设置事件的监听与回调

Css– shake 抖动效果

/* Css抖动样式 */
@keyframes shake {
  10%,
  90%{
    transform: translate3d(-1px,0,0);
  }
  20%,
  80%{
    transform: translate3d(2px,0,0);
  }
  30%,
  50%,
  70% {
     transform: translate3d(-4px,0,0);
  }
  40%,
  60%{
      transform: translate3d(4px,0,0);
  }
}
.apply-shake { 
  animation: shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

结合动态样式

:class="{'apply-shake':shakeTxtName}"
shakeTxtName:Boolean

Shake(){
      if(this.val === ''){
         this.shakeTxtname = true;
         setTimeout(()=>{
           this.shakeTxtname = false
         },820);
         return;
      }
   }

currency.js 货币库 -计算-格式化

Day.js

安装

npm install dayjs --save

main.js

import dayjs from 'dayjs'

Vue.prototype.$dayjs = dayjs

页面调用 ：this.$dayjs().format('YYYY-MM-DD')

初始化日期/时间 :

dayjs().format('YYYY-MM-DD'); 初始化日期:

dayjs().format('YYYY-MM-DD HH:mm:ss'); 初始化日期事件

判断一个日期是否在另外一个日期之后isAfter

dayjs().isAfter(dayjs('2011-01-01'))

Vue 关于页面填写表单数据 暂存问题，

<template>
  <form>
       <input/>.........
    </form>
  <button @click="stash()">暂存</button>  
</template>

<script>
    export default {
	 data(){
         const stashStr = localStorage.getItem('stash')
         const stash = stashStr ? JSON.parse(stashStr) : {}
         return Object.assign({
             val:''
         },stash)
     },
     methods:{
         stash(){
             localStorage.setItem('stash',JSON.stringify(this.$data))
         }
     }
	}
</script>