vue3的mars3d点击右键出现置顶、向下、向上等选项

最新推荐文章于 2024-09-06 18:06:33 发布

苍风的心上人

最新推荐文章于 2024-09-06 18:06:33 发布

阅读量354

点赞数 1

文章标签： vue3 mars3d

本文链接：https://blog.csdn.net/qq_46131497/article/details/137264187

版权

本文介绍了如何在Vue3项目中使用imengyu/vue3-context-menu插件创建右键上下文菜单，针对树形结构和列表中的地图图层，提供了图层置顶、上移、下移和置底的功能，并展示了相关方法如`setLayerLocal`的实现。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

下载插件 @imengyu/vue3-context-menu

npm i @imengyu/vue3-context-menu

在要使用的页面中引入一下代码

import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
import ContextMenu from "@imengyu/vue3-context-menu";

如果是使用在树的结构里：要使用template去定义数据
在这里插入图片描述
如果是列表里

@contextmenu="onContextMenu($event)"

根据需要，如果只在特定行才能点击右键出现下拉框需要在onContextMenu方法中做判断

import * as mapWork from "./map.js";
// 存储已经选择的图层-在每选中一个地图的时候都存储到selectLayers，
// 通过改变selectLayers中数据的index，来给图层赋值zIndex的值
let selectLayers = ref([]);
const onContextMenu = (e, node, data) => {
// 我这儿是如果没有连接的行 就不能显示
  if (!data.url) {
    return;
  }
  e.preventDefault();
  ContextMenu.showContextMenu({
    theme: "mac dark",
    x: e.x,
    y: e.y,
    items: [
      {
        label: "图层置为顶层",
        onClick: () => {
          let topLayer = selectLayers.value.splice(selectLayers.value.indexOf(data.id), 1);
          selectLayers.value.push(topLayer[0]);
          // mapWork是我定义的地图方法的总称
          mapWork.setLayerLocal(selectLayers.value);
        }
      },
      {
        label: "图层上移一层",
        onClick: () => {
          let index = selectLayers.value.indexOf(data.id);
          [selectLayers.value[index], selectLayers.value[index + 1]] = [selectLayers.value[index + 1], selectLayers.value[index]];
          mapWork.setLayerLocal(selectLayers.value);
        }
      },
      {
        label: "图层下移一层",
        onClick: () => {
          let index = selectLayers.value.indexOf(data.id);
          [selectLayers.value[index - 1], selectLayers.value[index]] = [selectLayers.value[index], selectLayers.value[index - 1]];
          mapWork.setLayerLocal(selectLayers.value);
        }
      },
      {
        label: "图层置为底层",
        onClick: () => {
          let topLayer = selectLayers.value.splice(selectLayers.value.indexOf(data.id), 1);
          selectLayers.value.unshift(topLayer[0]);
          mapWork.setLayerLocal(selectLayers.value);
        }
      }
    ]
  });
};

// 改变图层位置   地图对应的方法 layerArr:Array<string>
export async function setLayerLocal(layerArr) {
  let zIndexNum = 0;
  for (let i = 0; i < layerArr.length; i++) {
  // layersArr获取对应的图层
    let layersArr = map.getLayers().filter(item => item.options.id.toString().indexOf(layerArr[i]) != -1);
    // 给对应的图层加上zIndex的值
    layersArr.forEach(item => {
      let ops = map.getLayerById(item.options.id).options;
      map.getLayerById(item.options.id).setOptions({
        ...ops,
        zIndex: ++zIndexNum
      });
    });
  }
}