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

<template>
  <div>
    <el-tree :data="treeData" :props="treeDefaultProps" class="tree" @node-click="treeClick"/>
    <div id="container"></div>
  </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';

const treeData = [
  {
    label: 'Level one 1',
    id: 1,
    children: [
      {
        label: 'Level two 1-1',
        id: 11,
        children: [
          {
            label: 'Level three 1-1-1',
            id: 111,
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
const treeDefaultProps = {
  children: 'children',
  label: 'label',
}
const treeClick = (data) => {
  console.log(data)
}
const mockRequest = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        {
          title: '车牌号1',
          one: '离线',
          two: '监控',
          three: '报警',
          four: new Date(),
          location: [116.606315, 44.008775]
        },
        {
          title: '车牌号2',
          one: '离线',
          two: '监控',
          three: '报警',
          four: new Date(),
          location: [116.706315, 40.108775]
        },
        {
          title: '车牌号3',
          one: '离线',
          two: '监控',
          three: '报警',
          four: new Date(),
          location: [116.806315, 40.208775]
        },
      ])
    }, 2000)
  })
}

const setMarker = async () => {
  const markerArr = await mockRequest()
  markerArr.forEach(e => {

    // 点标记
    let marker = new AMap.Marker({
      content: '<img class="markerIcon" />',
      position: e.location,
      anchor: 'bottom-center',
      offset: new AMap.Pixel(0, 0),
      label: {
        direction: 'top',
        content: `<div class='info'>${e.title} - ${e.one}</div><div class='info'>${e.two} ${e.three}</div><div class='info'>${e.four}</div>`, //设置文本标注内容
      }
    });

    marker.setMap(map);
  })
}

const setLine = async () => {
  let path =  [[116.478935, 39.997761], [103.85094, 35.987496], [106.205794, 38.458831], [108.983569, 34.285675], [111.761777, 40.875595]]
  let polyline = new AMap.Polyline({
    path:path,
    showDir: true,
    strokeColor: '#77DDFF', // 线颜色--浅蓝色
    strokeWeight: 6, // 线宽
    lineJoin: 'round', // 折线拐点的绘制样式
  })
  let distance = Math.round(AMap.GeometryUtil.distanceOfLine(path));
  let text = new AMap.Text({
    position: new AMap.LngLat(path[path.length-1][0],path[path.length-1][1]),
    text: '路径长' + distance + '米',
    offset: new AMap.Pixel(0, 0)
  })
  map.add(text);
  map.add(polyline);
}

let map = null
let path = [[116.478935, 39.997761], [103.85094, 35.987496], [106.205794, 38.458831], [108.983569, 34.285675], [111.761777, 40.875595]]

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(async (AMap) => {
  map = new AMap.Map("container", {  //设置地图容器id
    viewMode: "3D",    //是否为3D地图模式
    zoom: 8,           //初始化地图级别
    center: [116.397428, 39.90923], //初始化地图中心点位置
  });
  await setMarker()
  await setLine()


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

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

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

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


  map.setFitView()
}).catch(e => {
  console.log(e);
})

</script>
<style>
.tree {
  width: 200px;
  display: inline-block;
  vertical-align: top;
}

#container {
  padding: 0px;
  margin: 0px;
  width: calc(100% - 200px);
  height: calc(100vh - 84px);
  display: inline-block;
}

.markerIcon {
  width: 65px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("../../../assets/images/trucks.png");
}
.amap-marker-label{
  top:0 !important;
  left:0 !important;
  transform: translate(calc(-50% + 32px),-100%);
}
</style>