xy-map 1.0.21 → 1.0.23

package/src/package/mapLoad.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="mapLoad flex flex-col flex-align-center"
+       :class="{'loadOver' : !show}">
+    <img src="/img/loading.gif"
+         style="margin-top: 10%"
+         width="400" />
+
+    <div class="text-center"
+         style="width: 400px; margin-top: -90px">
+      <div class="mb-20">正在努力加载中...{{progress.toFixed(0)}}%</div>
+      <div class="progress-wrap">
+        <div class="progress-inner">
+          <div class="progress-nums"
+               :style="`width: ${progress}%`"></div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: { // 是否在加载
+      type: Boolean,
+      default: true,
+    },
+    loadTime: { // 等待时长，毫秒
+      type: Number,
+      default: 5000,
+    }
+  },
+  data () {
+    return {
+      progress: 0,
+      timer: '',
+      show: true,
+    }
+  },
+  watch: {
+    loading: {
+      handler (val) {
+        if (!val) {
+          this.show = false
+          this.progress = 100
+          window.clearInterval(this.timer)
+        }
+      },
+      immediate: true,
+    }
+  },
+  destroyed () {
+    window.clearInterval(this.timer)
+  },
+  created () {
+    this.timer = setInterval(() => {
+      this.progress += 3
+      if (this.progress >= 99) {
+        window.clearInterval(this.timer)
+      }
+    }, this.loadTime / 30)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mapLoad {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #d5f2fd;
+  z-index: 99999999;
+  transition: all 0.5s;
+  opacity: 1;
+  overflow: hidden;
+}
+.loadOver {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/*进度条*/
+.progress-wrap {
+  width: 100%;
+  height: 12px;
+  border-radius: 8px;
+  position: relative;
+}
+/*进度条底层背景样式*/
+.progress-inner {
+  height: inherit;
+  background: rgb(142 193 255 / 20%);
+  border-radius: 8px;
+}
+/*进度层样式效果，使用动画效果*/
+.progress-nums {
+  height: inherit;
+  border-radius: 6px;
+  background: repeating-linear-gradient(
+    -45deg,
+    #008bdd 25%,
+    #49beff 0,
+    #49beff 50%,
+    #008bdd 0,
+    #008bdd 75%,
+    #49beff 0
+  );
+  background-size: 16px 16px;
+  animation: panoramic 30s linear infinite;
+}
+/*定义动画*/
+@keyframes panoramic {
+  to {
+    background-position: 200% 0;
+  }
+}
+</style>

package/src/package/mapModel.vue

@@ -0,0 +1,69 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import {
+  addLayerModel,
+} from './layers/model.js'
+import {
+  addLayerScene,
+} from '../layers/scene.js'
+import {
+  addLayerWater,
+} from './layers/water.js'
+
+export default {
+  props: {
+    map: {
+      type: Object,
+      default: () => { }
+    },
+    id: {
+      type: String,
+      default: '3dModel'
+    },
+  },
+  data () {
+    return {
+      scene: ''
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      addLayerScene({
+        id: this.id,
+        position: [this.lng, this.lat],
+        directionalLight: [
+          {
+            color: 0xfffcce,
+            intensity: 1.5,
+            position: [-4800, 2400, -3200]
+          }
+        ],
+        ambientLight: {
+          color: 0xFFFFFF,
+          intensity: 0.3,
+        },
+        sky: false,
+        // directionalLight: [],
+        // ambientLight: false,
+        shadow: false,
+        edit: false,
+      }).then(data => {
+        let { scene, sun } = data
+        console.log(scene)
+        this.addGLTF(scene, '/img/taoshan2.gltf')
+        this.addWater(scene, sun)
+        this.model = scene
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/package/mapRain.vue

@@ -0,0 +1,110 @@
+<template>
+  <canvas :id="id"
+          class="snow">不支持canvas</canvas>
+</template>
+
+<script>
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'snow'
+    },
+    angle: { // 角度
+      type: Number,
+      default: -5
+    },
+    status: {
+      type: String,
+      default: 'default' // 下雨状态
+    },
+    len: { // 雨滴长度
+      type: Number,
+      default: 80
+    },
+    count: { // 雨滴数量
+      type: Number,
+      default: 500
+    }
+  },
+  data () {
+    return {
+      timer: '',
+    }
+  },
+  destroyed () {
+    window.clearInterval(this.timer)
+  },
+  mounted () {
+    this.start()
+  },
+  methods: {
+    start () {
+      const self = this
+      let canvas = document.getElementById(this.id)
+      let width = canvas.clientWidth
+      let height = canvas.clientHeight
+
+      let x2 = this.angle
+      let len = this.len
+      let count = this.count
+      let lineWidth = 1
+
+      if (this.status === 'small') {
+        x2 = 0
+        len = 50
+        count = 100
+      }
+      if (this.status === 'large') {
+        x2 = -35
+        count = 1000
+        lineWidth = 1.5
+      }
+
+      canvas.width = width
+      canvas.height = height
+      let ctx = canvas.getContext('2d')
+
+      self.timer = setInterval(clearCanvas, 50)
+      function clearCanvas () {
+        ctx.clearRect(0, 0, width, height)
+        draws()
+      }
+
+      function draw (x, y) {
+        //canvas写渐变：createLinearGradient（startX,startY,endX,endY）
+        let grd = ctx.createLinearGradient(x, y, x + x2, (y + len) * 5)
+        grd.addColorStop(0, 'rgba(255,255,255,0.1)')
+        grd.addColorStop(0.5, 'rgba(105,105,105,0.3)')
+        grd.addColorStop(1, 'rgba(255,255,255,0.5)')
+        ctx.strokeStyle = grd
+
+        ctx.beginPath()
+        ctx.moveTo(x, y)
+        ctx.lineTo(x + x2, y + len)
+        ctx.lineWidth = lineWidth
+        ctx.stroke()
+        ctx.closePath()
+      }
+      function draws () {
+        for (let i = 1; i <= count; i++) {
+          draw(Math.random() * width, Math.random() * height)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.snow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-color: rgba(145, 147, 184, 0.103);
+}
+</style>

package/vue.config.js

@@ -11,7 +11,7 @@ module.exports = defineConfig({
   // 前端代理服务器
   devServer: {
     host: 'localhost',
-    port: 8888,
+    port: 8889,
     open: true,
     proxy: {
       // proxyon为代理前缀，如果请求中包含该前缀，就走代理