xy_tyrems/ruoyi-ui/src/views/realTimeMonitoring/electronicFence/index.vue

<template>
  <div>

    <el-form ref="queryRef" :inline="true" :label-width=" locale ? '90px':'140px'" :model="queryParams"
             style="margin-top: 24px">
      <el-form-item label="车牌号" prop="carLicense">
        <el-input
            v-model="queryParams.carLicense"
            :placeholder=" t('common.pleaseEnter') + '车牌号'"
            clearable
            style="width: 200px"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="时间" prop="internationalization3">
        <el-date-picker
            v-model="queryParams.internationalization3"
            end-placeholder="结束时间"
            range-separator="到"
            start-placeholder="开始时间"
            type="datetimerange"
        />
      </el-form-item>
      <el-form-item label=" ">
        <el-button icon="Search" type="primary" @click="handleQuery">{{ t('option.search') }}</el-button>
        <el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
        <el-button icon="Refresh" @click="getLine">获取点位</el-button>
      </el-form-item>
    </el-form>

    <div id="container4"></div>
  </div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {addTest, delTest, getTest, listTest, updateTest} from "@/api/realTimeMonitoring/electronicFence";
import {useI18n} from 'vue-i18n';
import Cookies from "js-cookie";

const {t} = useI18n();

const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance();
const queryParams = ref({})


let map = null
let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]]
let path2 = [[116.400969, 39.921592], [116.401496, 39.919008], [116.399264, 39.919765], [116.39802, 39.921016]]
const areaPath = ref([path,path2])
let marketPath = [116.390669, 39.911147]
AMapLoader.load({
  key: "ba8fb8d8bae1b280b93406d5959d492f",             // 申请好的Web端开发者Key，首次调用 load 时必填
  // version: "1.4.15",      //
  version: "2.0",      //
  plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Marker'],

  AMapUI: {
    version: '1.1',
    plugins: []
  }
}).then((AMap) => {
  map = new AMap.Map("container4", {  //设置地图容器id
    viewMode: "3D",    //是否为3D地图模式
    zoom: 16,           //初始化地图级别
    center: [116.397428, 39.90923], //初始化地图中心点位置
  });

  let marker = new AMap.Marker({
    position: marketPath,
    anchor: 'bottom-center',
    offset: new AMap.Pixel(0, 0)
  });
  marker.setTitle('我是marker的title');
  marker.setLabel({
    direction: 'top',
    offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
    content: "" + AMap.GeometryUtil.isPointInRing(marketPath,path,path2),
  });
  marker.setMap(map);

  // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
  map.addControl(new AMap.ToolBar({position: 'LT'}));

  // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
  map.addControl(new AMap.Scale());

  // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
  map.addControl(new AMap.HawkEye({isOpen: true}));

  // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
  map.addControl(new AMap.MapType());

  areaPath.value.forEach( (e,index)=> {
    let polygon = new AMap.Polygon({path: e});
    map.add([polygon]);
    let polyEditor = new AMap.PolygonEditor(map);
    polyEditor.addAdsorbPolygons([polygon]);
    polyEditor.on('add', function (data) {
      console.log(data);
      let polygon = data.target;
      polyEditor.addAdsorbPolygons(polygon);
    })
    polyEditor.on('addnode', function (data) {
      // 获取区域坐标
      areaPath.value[index] = polyEditor.getTarget()._opts.path
    })
    polyEditor.on('adjust', function (data) {
      // 获取区域坐标
      areaPath.value[index] = polyEditor.getTarget()._opts.path
    })
    polyEditor.setTarget(polygon);
    polyEditor.open();
  })



}).catch(e => {
  console.log(e);
})
const getLine = () => {
  let list = areaPath.value
  let params = []
  list.forEach((e,index)=>{
    e.forEach(val => {
      params.push({
        longitude:val[0],
        latitude:val[1],
        index:index
      })
    })
  })
  console.log(params)
}
</script>
<style>
#container4 {
  padding: 0px;
  margin: 20px 0 0 0;
  width: 100%;
  height: calc(100vh - 190px);
}
</style>