xf-some-pkg

canvas 自由绘制

import { Whiteboard } from "xf-some-pkg";

new Whiteboard(drawCanvas, {
  onSelected() {},
  onDeleted() {},
  onDrew() {},
})

地图组件

<template>
  <div class="">
    <div >
      <OpenLayerView ref="openLayerRef" class="my-map" :layers="layers"></OpenLayerView>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRef, toRefs } from 'vue';
import { OpenLayerView } from '@/entry/index';

export default defineComponent({
  components: {
    OpenLayerView
  },
  setup() {
    const refs = reactive({
      openLayerRef: null as any
    })
    const state = reactive({
      layers: [{
        url: 'http://10.110.1.10:18080/geoserver/wms',
        params: {
          LAYERS: "geoBound",
          FORMAT: "image/png",
          VERSION: '1.1.1',
          TRANSPARENT: true,
        },
        projection: 'EPSG:4326',
      }, {
        url: 'http://10.110.1.10:18080/geoserver/boua/wms',
        params: {
          layers: 'boua:全球行政区划',
          format: "image/png",
          version: '1.1.1',
        },
      }]
    })

    const methods = {
    }

    onMounted(() => {
      setTimeout(function () {
        const points = [
        {
          name: "马公海军基地",
          position: [119.56, 23.56],
          icon: "https://openlayers.org/en/latest/examples/data/icon.png"
        },
        {
          name: "屏东机场",
          position: [120.483333, 22.666667],
          icon: "https://openlayers.org/en/latest/examples/data/icon.png"
        },
        {
          name: "高雄机场",
          position: [120.366667, 22.616667], // 高雄国际机场 (Kaohsiung International Airport)
          icon: "https://openlayers.org/en/latest/examples/data/icon.png"
        },
        {
          name: "台南机场",
          position: [120.291667, 22.975000], // 台南机场 (Tainan Airport / 空军基地)
          icon: "https://openlayers.org/en/latest/examples/data/icon.png"
        },
        {
          name: "彰化机场",
          position: [120.533333, 24.066667], // 彰化北斗机场（非民用，为通用航空用途）
          icon: "https://openlayers.org/en/latest/examples/data/icon.png"
        }
        ]
        refs.openLayerRef.addIconPoints(points)
      }, 1000)
    })
    return {
      ...toRefs(refs),
      ...toRefs(state),
      ...methods
    }

  }
})
</script>

<style lang="scss" scoped>
.my-map {
  width: 960px;
  height: 420px;
  border: 1px solid pink;
}
</style>

拓扑图组件

<template>
  <div>
    <a-button @click="save">保存</a-button>
    <div class="bpmn-view">
      <BpmnJsView ref="bpmnViewRef"></BpmnJsView>
    </div>
  </div>
</template>

<script lang="ts">
import { BpmnJsView } from '@/entry';
import { defineComponent, onMounted, reactive, toRef, toRefs } from 'vue';

export default defineComponent({
  components: {
    BpmnJsView
  },
  setup() {
    const refs = reactive({
      bpmnViewRef: null as any
    })
    const state = reactive({
    })

    const methods = {
      save
    }

    onMounted(() => {
    })
    return {
      ...toRefs(refs),
      ...toRefs(state),
      ...methods
    }

    function save() {
      refs.bpmnViewRef?.save()
    }
  }
})
</script>

<style lang="scss" scoped>
.bpmn-view {
  height: calc(100vh - 120px);
}
</style>