wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轨迹功能</title>
    <script src="../assets/vue@2.7.14.js"></script>
    <script src="../../dist/index.js"></script>
    <style>
      body {
        margin: 0
      }
      #map {
        height: 100vh;
      }
      .control {
        position: absolute;
        top: 20px;
        left: 40px;
        padding: 10px 10px 0;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="map"></div>
      <div class="control">
        <button @click="_ => locus.setVisible(true)">显示</button>
        <button @click="_ => locus.setVisible(false)">隐藏</button>
        <button @click="playback">回放</button>
        <button @click="_ => locus.pause()">暂停</button>
        <button @click="_ => locus.goAhead()">继续</button>
        <button @click="_ => locus.next(2)">前进2秒</button>
        <button @click="_ => locus.prev()">后退1秒</button>
        <button @click="_ => locus.stop()">停止</button>
        <button @click="addPoints">增加多个轨迹点</button>
        <button @click="_ => locus.deSelectPoint()">取消轨迹点选中状态</button>
        <button @click="_ => locus.setColor('red')">设置轨迹颜色</button>
        <button @click="_ => locus.setWidth(8)">设置轨迹线宽</button>
        <button @click="destroy">销毁</button>
        <p>
          <input type="range" v-model="range" min="0" max="1" style="width: 80%"
                 step="0.001" @mousedown="enableChange = true" @mouseup="enableChange = false">
        </p>
      </div>
    </div>
  </body>

  <script>
    const locus = [
      {longitude: 116.35, latitude: 39.9},
      {longitude: 116.36, latitude: 39.91},
      {longitude: 116.37, latitude: 39.89},
      {longitude: 116.38, latitude: 39.91},
      {longitude: 116.39, latitude: 39.89},
      {longitude: 116.40, latitude: 39.91},
      {longitude: 116.41, latitude: 39.89},
      {longitude: 116.42, latitude: 39.91},
      {longitude: 116.43, latitude: 39.89},
      {longitude: 116.44, latitude: 39.91},
      {longitude: 116.45, latitude: 39.89}
    ]

    // 将经纬度坐标转换为墨卡托投影坐标
    function transformProj (data) {
      data.forEach(item => {
        const coords = CTMapOl.proj.fromLonLat([item.longitude, item.latitude])
        item.longitude = coords[0]
        item.latitude = coords[1]
      })
      return data
    }

    new Vue({
      el: '#app',
      data () {
        return {
          range: 0,
          enableChange: false,
        }
      },
      watch: {
        range (val) {
          if (this.enableChange) { // 减少不必要的双向控制
            this.locus.moveTo(+val)
          }
        }
      },
      mounted () {
        this.map = new CTMapOl.extend.InitMap({
          domId: 'map'
        })
        this.init()
      },
      methods: {
        init () {
          // 不要在 data 中定义 locus 变量，无需响应式
          this.locus = new CTMapOl.extend.LocusPlayback(this.map.map, transformProj(locus), {
            color: 'orange',
            onPlay: info => {
              this.range = info.progress
            },
            onSelectPoint: info => {
              console.log('最近轨迹点：',info)
            }
          })
        },
        playback () {
          this.locus.playback()
        },
        addPoints () {
          const data = Array(6).fill('').map(_ => {
            return {
              longitude: Math.random() / 5 + 116.26,
              latitude: Math.random() / 5 + 39.81
            }
          })
          this.locus.addPoints(transformProj(data))
        },
        destroy () {
          this.locus.destroy()
        }
      }
    })
  </script>
</html>