<template>
  <CusDialog
      title="map实例自定义操作"
      :show="show"
      @close="$emit('update:show', false)"
      @submit="$emit('update:show', false)"
  >
    <EasyMapComponent
        class="map"
        @easyMapLoad="mapLoad"
        layout="info"
    />
  </CusDialog>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import * as source from "ol/source";
import * as layer from "ol/layer";
import * as format from "ol/format";
import * as style from "ol/style";

export default defineComponent({
  name: '',
  components: {},
  props: {
    show: {}
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      map: <any>null,
      mapFunc: null,
      Source: <any>null,
      Layer: <any>null,
    })
    const mapLoad = (map, func) => {
      state.map = map
      state.mapFunc = func
      initLayer()
    }
    const initLayer = () => {
      const feat: any = new format.WKT().readFeature('POINT(109.32698708330996 19.049280740791097)')
      state.Source = new source.Vector({
        features: [feat],
        wrapX: false
      })
      state.Layer = new layer.VectorImage({
        source: state.Source,
        zIndex: 10,
        style: (f: any) => {
          f.setStyle(new style.Style({
            image: new style.Circle({
              radius: 50,
              fill: new style.Fill({
                color: '#e810dd',
              }),
            })
          }))
        }
      })
      state.map.addLayer(state.Layer)
    }
    return {
      ...toRefs(state),
      mapLoad
    }
  },
})
</script>

<style scoped lang="scss">
</style>
