<template>
  <div>
    <div id="container"></div>
    <button @click="cut">11</button>
    <button @click="cut1">22</button>
    <button @click="click1">33</button>
  </div>
</template>

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

let map = null
let polyline = null
let passedPolyline = null
let mouseTool = 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: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType'],

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

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

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

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

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


  let polyEditor = new AMap.PolygonEditor(map);
  polyEditor.on('add', function (data) {
    console.log(data);
    let polygon = data.target;
    polyEditor.addAdsorbPolygons(polygon);
  })
  polyEditor.on('adjust', function (data) {
    // 获取区域坐标
    console.log(polyEditor.getTarget()._opts.path)
  })
  polyEditor.open();

  // initroad()
  // pathSimplifierInsLine()
  closedFigure()
}).catch(e => {
  console.log(e);
})

// 绘制路线
const initroad = () => {
  // 绘制还未经过的路线
  polyline = new AMap.Polyline({
    path: [[116.478935, 39.997761], [103.85094, 35.987496], [106.205794, 38.458831], [108.983569, 34.285675], [111.761777, 40.875595]],
    showDir: true,
    strokeColor: '#77DDFF', // 线颜色--浅蓝色
    strokeWeight: 6, // 线宽
    lineJoin: 'round', // 折线拐点的绘制样式

  })
  polyline.on('mouseover', (data) => {
    console.log(data)
  })
  // 绘制路过了的轨迹
  passedPolyline = new AMap.Polyline({
    strokeColor: '#00BBFF', // 线颜色-深蓝色
    path: [[116.478935, 39.997761], [103.85094, 35.987496]],
    strokeWeight: 6 // 线宽
  });

  map.add(polyline);
  map.add(passedPolyline);
  // 自适应已绘制的图形
  map.setFitView(map.getAllOverlays("polyline"))
  mouseTool = new AMap.MouseTool(map);
  //
  mouseTool.rule({
    startMarkerOptions: {//可缺省
      icon: new AMap.Icon({
        size: new AMap.Size(19, 31),//图标大小
        imageSize: new AMap.Size(19, 31),
        image: "//webapi.amap.com/theme/v1.3/markers/b/start.png"
      }),
      offset: new AMap.Pixel(-9, -31)
    },
    endMarkerOptions: {//可缺省
      icon: new AMap.Icon({
        size: new AMap.Size(19, 31),//图标大小
        imageSize: new AMap.Size(19, 31),
        image: "//webapi.amap.com/theme/v1.3/markers/b/end.png"
      }),
      offset: new AMap.Pixel(-9, -31)
    },
    midMarkerOptions: {//可缺省
      icon: new AMap.Icon({
        size: new AMap.Size(19, 31),//图标大小
        imageSize: new AMap.Size(19, 31),
        image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png"
      }),
      offset: new AMap.Pixel(-9, -31)
    },
    lineOptions: {//可缺省
      strokeStyle: "solid",
      strokeColor: "#FF33FF",
      strokeOpacity: 1,
      strokeWeight: 2
    }
    //同 RangingTool 的 自定义 设置，缺省为默认样式
  });
}

// 绘制带点路线
const pathSimplifierInsLine = () => {
  AMapUI.load(['ui/misc/PathSimplifier', 'lib/$', 'lib/utils'], function (PathSimplifier, $) {

    var pathSimplifierIns = new PathSimplifier({
      zIndex: 100,
      //autoSetFitView:false,
      map: map, //所属的地图实例
      getPath: function (pathData, pathIndex) {
        var points = pathData.points,
            lnglatList = [];
        for (var i = 0, len = points.length; i < len; i++) {
          lnglatList.push(points[i].lnglat);
        }
        return lnglatList;
      },
      getHoverTitle: function (pathData, pathIndex, pointIndex) {
        if (pointIndex >= 0) {
          //point
          return pathData.name + '，' + pathData.points[pointIndex].name;
        }
        return pathData.name + '，点数量' + pathData.points.length;
      },
      renderOptions: {
        renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
      }
    });

    // window.pathSimplifierIns = pathSimplifierIns;

    //设置数据
    pathSimplifierIns.setData([{
      name: '路线0',
      points: path.map(e => {
        return {
          name: "点",
          lnglat: e
        }
      })
    }]);

    //选中路线0
    pathSimplifierIns.setSelectedPathIndex(0);

    pathSimplifierIns.on('pointClick', function (e, info) {
      console.log('Click: ' + info.pathData.points[info.pointIndex].name);
    });
  });

}

// 绘制闭合图形
const closedFigure = () => {

  let path2 = [
    [116.368904, 39.913423],
    [116.382122, 39.901176],
    [116.387271, 39.912501],
    [116.368904, 39.913423]
  ];

  let polyline2 = new AMap.Polyline({
    path: path2,
    borderWeight: 2, // 线条宽度，默认为 1
    strokeColor: 'red', // 线条颜色
    lineJoin: 'round' // 折线拐点连接处样式
  });

  // 自适应已绘制的图形
  map.add(polyline2);
  map.setFitView(map.getAllOverlays("polyline"))
}

const cut = () => {
  map = new AMap.Map("container", {  //设置地图容器id
    viewMode: "3D",    //是否为3D地图模式
    zoom: 16,           //初始化地图级别
    center: [116.397428, 39.90923], //初始化地图中心点位置
    layers: [new AMap.TileLayer.Satellite()],
  });
  initroad()
}

const cut1 = () => {
  map = new AMap.Map("container", {  //设置地图容器id
    viewMode: "3D",    //是否为3D地图模式
    zoom: 16,           //初始化地图级别
    center: [116.397428, 39.90923], //初始化地图中心点位置
  });
  initroad()
}
const click1 = () => {
  map.remove([polyline, passedPolyline]);
}
</script>
<style>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>