foster-pc-vue/src/views/zhgl/com/Setting.vue

<template>
  <div style="position: relative">
    <div class="title">
      <div class="my-name">设置</div>
    </div>
    <div class="tools">
    </div>
    <div class="mini-map" ref="mapRef"></div>
  </div>
</template>

<script setup>
import * as util from "@/common/ol_common.js"
import * as KMap from '@/utils/ol-map/KMap';
import config from "@/api/config.js"
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
import {newPoint,bboxToFeature} from "../map.js"
import {miniStyle, miniSelectStyle} from "./Style";

let emits = defineEmits(["moveMap","selectTree","selectPeriod","selectAttr"])
let props = defineProps({
  periodMap:{type:Object,require: true},
  treeList:{type:Object,require: true},
})

let store = useStore()
const mapRef = ref("mapRef")
let curPeriod = ref({})
let attrList = ref([])
let curAttrField = ref(-1)
let map = null;
let treeLayer = new KMap.VectorLayer("treeLayer",1000, {style:miniStyle})

const initMap = async () => {
  let location = store.getters.userinfo.location;
  let coordinate = util.wktCastGeom(location).getFirstCoordinate()
  map = new KMap.Map(mapRef.value, 20, coordinate[0], coordinate[1], null, 20, 20);
  let xyz = config.base_img_url + 'map/lby/{z}/{x}/{y}.png';
  map.addXYZLayer(xyz,{minZoom:15,maxZoom:20});

  let xyz2 = config.base_img_url3 + 'map/lby/{z}/{x}/{y}.png';
  map.addXYZLayer(xyz2,{minZoom:15,maxZoom:20});

  map.addLayer(treeLayer.layer)
}

const initTree = () => {
  for(let item of props.treeList){
    treeLayer.addFeature(newPoint(item))
  }
}

onMounted(async()=>{
  initMap()
  initTree()
  initListener()
})

/**
 * 初始化事件
 */
function initListener(){
  map.map.on("moveend", function (evt) {
    emits("moveMap",getExtentFeature())
  });
  treeLayer.addSingleSelect(function (e){
    if(e.selected.length > 0){
      emits("selectTree", e.selected[0])
    }else{
      emits("selectTree", null)
    }
  },map.map, miniSelectStyle)
}

/**
 * 返回地图范围的Feature
 * @returns {Feature<{geometry: any}>}
 */
function getExtentFeature(){
  let extent = map.view.calculateExtent(map.map.getSize())
  return bboxToFeature(extent[0],extent[1],extent[2],extent[3])
}

/**
 * 设置选中的树
 * @param treeId
 */
function setSelected(treeId){
  treeLayer.singleSelect.getFeatures().clear()
  if(!treeId)
    return;
  let f = treeLayer.getFeatureById(treeId);
  treeLayer.singleSelect.getFeatures().insertAt(0,f)
  map.view.setCenter(f.getGeometry().getFirstCoordinate())
}

function setCenter(coordinate){
  map.setCenter2(coordinate)
}

defineExpose({
  setSelected,setCenter
});

</script>

<style lang="scss" scoped>
$title-height:44px;
.title{
  width: 100%;
  height: $title-height;
  box-sizing: border-box;
  background: rgba(0,77,101,0.8);
  border-radius: 4px 4px 0px 0px;
  border-bottom: 2px solid rgba(81,233,240,0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .my-name{
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #00FFF0;
    height: 22px;
  }
  .my-close{
    margin-right: 20px;
    width: 16px;
    height: 16px;
    background-image: url("@/assets/img/close.png");
    background-size: 100% 100%;
  }
}
.tools{
  position: absolute;
  top: calc($title-height + 10px);
  width: 100%;
  height: 0px;
  display: flex;
  flex-direction: row;
  justify-content: right;
  color: #f0f0f0;
  line-height: 30px;
  .select{
    width: 80px;
    margin-right: 20px;
  }
  .cols{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
}
.mini-map{
  border: 1px solid rgba(81,233,240,0.6);
  position: absolute;
  top: $title-height + 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
</style>