很多时候我们需要在3d场景中嵌入2d的dom元素去更简单的实现页面上的交互,记录一下开发逻辑:
原理就是建一个mesh对象,设置为透明不可见,然后再建一个dom元素,在全局render中计算出mesh的世界坐标与照相机的相对位置.
然后对dom元素设置left和top

我简单封装了一下基类BaseElement,以及实现了一个demo案例
BaseElement: https://github.com/aoobao/bim_test/blob/master/src/assets/js/BaseElement.js

demo: https://github.com/aoobao/bim_test/tree/master/src/components/Spot

记录一下以做参考

chrome的调试工具没有提供直接下载,最近发现有个谷歌插件叫做 Save All Resources

谷歌商店搜索安装后,打开开发者工具会增加一个Resources Saver的tab栏,点击按钮Save All Resources就可以下载所有静态文件了,原谅我今天才发现这么好的插件....

项目上需要实现一个无限向上滚动,并且不同透明度的动效,研究了一下transition-group,发现用起来确实非常方便.记录一下transition-group的使用方法.及demo源码.

transition-group 会渲染成一个真实标签,如tag="div" 渲染div标签.
给name属性赋值定义类名前缀,拿name="list"举例:

list-enter : 在元素插入的时候存在,再下一帧移除 (元素的初始状态设置)
list-enter-active : 在元素运动过程中始终存在
list-enter-to : 一开始元素插入时不存在,下一帧添加,在元素运动过程中始终存在(设置动画目标状态)
list-leave: 元素移除时立即生效,下一帧删除(元素删除的初始状态设置)
list-leave-active: 元素移除运动过程中始终存在
list-leave-to: 一开始元素移除不存在,下一帧添加(设置动画移除状态)

list-move: 非插入删除的元素都会存在

demo

<template>
  <div class="context-wrap">
    <div class="left-arrow arrow"></div>
    <transition-group v-if="items !== null" class="list" name="list" tag="div">
      <div class="list-item" v-for="item in items" :key="item.index">
        {{item.name}}
        <span style="color:#FFAD4B;">{{item.value}}</span>{{item.surfix}}
      </div>
    </transition-group>
    <div class="right-arrow arrow"></div>
  </div>
</template>
<script>
export default {

  data () {
    return {
      sourceList: createList(), // 原始数据
      delay: 3000,
      items: null,
      nextIndex: 1
    }
  },
  mounted () {
    this.items = this.copyList()
    this.time = setTimeout(this.toggleIndex, 3000);
  },
  beforeDestroy () {
    if (this.time) {
      clearTimeout(this.time)
      this.time = null
    }

  },
  methods: {
    copyList () {
      let list = this.sourceList.map(t => {
        return {
          ...t,
          index: this.nextIndex++
        }
      })
      return list
    },
    toggleIndex () {
      let item = {
        ...this.items[0],
        index: this.nextIndex++
      }
      this.items = [...this.items.splice(1, this.items.length), item]

      this.time = setTimeout(this.toggleIndex, this.delay);
    }
  }
}

function createList () {
  let list = []
  for (let i = 0; i < 5; i++) {
    let item = {
      name: '国泰君安对客户A35666556Q强平',
      surfix: '张',
      value: i + 50
    }
    list.push(item)
  }
  return list
}
</script>


<style lang="scss" scoped>
.context-wrap {
  width: 100%;
  height: 90%;
  margin-top: 5%;
  margin-left: 20px;
  display: flex;
  overflow: hidden;
  align-items: center;
  position: relative;
  .list {
    width: 286px;
    height: 280px;
    .list-item {
      margin-bottom: 15px;
      width: 280px;
      height: 40px;
      border: 1px solid #071532;
      font-size: 14px;
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 3s;
      &:nth-child(1) {
        opacity: 0.2;
      }
      &:nth-child(2) {
        opacity: 0.5;
      }
      &:nth-child(3) {
        opacity: 1;
      }
      &:nth-child(4) {
        opacity: 0.5;
      }
      &:nth-child(5) {
        opacity: 0.2;
      }
      &:nth-child(6) {
        opacity: 0.2;
      }
      /** 插入过程 **/
      &.list-enter-active {
      }
      /** 移除过程 **/
      &.list-leave-active {
        position: absolute;
      }

      /*** 开始插入、移除结束的位置变化 ***/

      // 定义移除的元素目标状态
      &.list-leave-to {
        opacity: 0;
        transform: translateY(-55px);
      }

      // 定义插入的元素初始状态.
      &.list-enter {
        opacity: 0;
        transform: translateY(55px);
      }
    }

    // 覆盖上面列表元素每个位置的透明度
    .list-move {
      &:nth-child(2) {
        opacity: 0.2;
      }
      &:nth-child(3) {
        opacity: 0.5;
      }
      &:nth-child(4) {
        opacity: 1;
      }
      &:nth-child(5) {
        opacity: 0.5;
      }
    }

    /*** 元素定位改变时动画 ***/
    // .list-move {
    //   transition: all 5s;
    // }
  }
}
</style>

最近有绘制虚线圆圈的需求,简单封装了一下,这里记录一下以便将来查阅:

    ctx.save()
    ctx.strokeStyle = CIRCLE_COLOR
    ctx.lineWidth = 2

    const step = 120   // 圆的总共段数 最好能被360整除
    const count = Math.floor(360 / step)
    let s = count / 180 * Math.PI * 2

    for (let b = 0, e = s / 2; e <= 360; b += s, e += s) {
      ctx.beginPath()
      ctx.arc(x, y, radius, b, e);  
      ctx.stroke();
    }

    ctx.restore();

前段时间项目需求要做闪烁点,感觉做的效果挺好看,就把这块代码独立出来了
github地址 https://github.com/aoobao/amap-flicker-marker

自己测了一下,同时1000个闪烁点性能还可以.
简单封装了一下vue组件方便vue调用,后面有时间可以试试用shader做渲染看性能,但是地图只要一移动,所有的顶点都得重新计算重新写入GPU,性能未必会快多少.