vue中使用腾讯地图.围栏使用

海上彼尚

已于 2023-11-13 15:41:09 修改

阅读量642

点赞数 1

分类专栏：前端开发插件文章标签： vue.js javascript 前端

于 2023-11-06 17:24:10 首次发布

本文链接：https://blog.csdn.net/weixin_63443072/article/details/134250714

版权

前端开发插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

废话少说，直接开始。

一、创建项目

我这里演示vue3。

# 创建vue项目
yarn create vite

创建完毕就可以使用啦~

二、引入

在index.html中引入下面代码：

<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的密钥&libraries=tools"></script>

三、使用

直接上代码

# html
<template>
  <div style="position: relative;">
    <div id="map_view"></div>
    <div id="edit_view">
      <button @click.stop="handleEdit">编辑</button>
      <button @click.stop="handleAdd">绘制</button>
      <button @click.stop="handleMerge">合并</button>
      <button @click.stop="handleSplit">拆分</button>
    </div>
  </div>
</template>

<style scoped>
#map_view {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#edit_view {
  display: flex;
}
</style>

script单独来：

1.创建地图实例

由于用的是语法糖，所以在setup中无法获取到dom。所以引入onMounted,在这里面使用。

import { onMounted } from 'vue';

var map, editor

onMounted(() => {
  // 创建地图实例
  map = new TMap.Map(document.getElementById('map_view'), {
    zoom: 17, // 设置地图缩放级别
    center: new TMap.LatLng(40.04019000341765, 116.27446815226199)
  })
})

2.实例化编辑模块

onMounted(() => {
  editor = new TMap.tools.GeometryEditor({
    map,
    // 可编辑图层
    overlayList: [
      {
        id: 'polygon1', // 随便给的
        selectedStyleId: 'highlight',
        overlay: new TMap.MultiPolygon({
          map,
          // 样式
          styles: {
            highlight: new TMap.PolygonStyle({
              color: 'rgba(255, 255, 0, 0.6)'
            })
          }
        })
      }
    ],
    actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, //编辑器的工作模式 DRAW INTERACT
    snappable: true, // 开启邻近吸附
    selectable: true,// 开启点选功能
    activeOverlayId: 'polygon1', // 激活图层
  })

  // 开始监听几何图形
  editor.on('draw_complete', geometry => {
    console.log(geometry)
  })

  // 监听删除、修改、拆分、合并完成事件
  let evtList = ['delete', 'adjust', 'split', 'union'];
  evtList.forEach(evtName => {
    editor.on(evtName + '_complete', evtResult => {
      console.log(evtName, evtResult);
    });
  });

  // 监听拆分失败事件，获取拆分失败原因
  editor.on('split_fail', (res) => {
    alert(res.message);
  });

  // 监听合并失败事件，获取合并失败原因
  editor.on('union_fail', (res) => {
    alert(res.message);
  });
})

3.添加功能

/**
 * @function 开始绘制地图
 */
const handleAdd = () => {
  // 指定图层处于编辑状态
  // editor.setActiveOverlay("polygon1");
  editor.setActionMode(2)
}

/**
 * @function 编辑地图 
 */
const handleEdit = () => {
  // 指定图层处于操作状态
  editor.setActionMode(1)
}

/**
 * @function 地图合并
 */
const handleMerge = () => {
  editor.union()
}

/**
 * @function 拆分地图
 */
const handleSplit = () => {
  editor.split()
}

4.设置初始点并操作

如果需要加载一个初始点位，那么可以预先创建出这个点：

 const firstPaths = [
    new TMap.LatLng(40.04051164600918, 116.27488518619089), //(纬度，经度)
    new TMap.LatLng(40.040943635857445, 116.27804611629756),
    new TMap.LatLng(40.03951759379146, 116.2783762087081),
    new TMap.LatLng(40.03891287066983, 116.2752049655744)
  ]

然后再可编辑图层中放入即可。

overlayList: [
{
   overlay: new TMap.MultiPolygon({
      geometries: [
         {
            id: 'hhhh',// 随意给的
            paths: firstPaths
          }
      ]
    }),
},

5.判断点位是否在区域内

自己看：

https://lbs.qq.com/webDemoCenter/glAPI/glComputeLib/isPointInPolygon

四、完整代码

<template>
  <div style="position: relative;">
    <div id="map_view"></div>
    <div id="edit_view">
      <button @click.stop="handleEdit">编辑</button>
      <button @click.stop="handleAdd">绘制</button>
      <button @click.stop="handleMerge">合并</button>
      <button @click.stop="handleSplit">拆分</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

var map, editor

/**
 * @function 开始绘制地图
 */
const handleAdd = () => {
  // 指定图层处于编辑状态
  editor.setActiveOverlay("polygon1");
  editor.setActionMode(2)
}

/**
 * @function 编辑地图 
 */
const handleEdit = () => {
  // 指定图层处于操作状态
  editor.setActionMode(1)
}

/**
 * @function 地图合并
 */
const handleMerge = () => {
  editor.union()
}

/**
 * @function 拆分地图
 */
const handleSplit = () => {
  editor.split()
}

onMounted(() => {
  // 创建地图实例
  map = new TMap.Map(document.getElementById('map_view'), {
    zoom: 17, // 设置地图缩放级别
    center: new TMap.LatLng(40.04019000341765, 116.27446815226199)
  })


  // 加载一个初始化的图层
  const firstPaths = [
    new TMap.LatLng(40.04051164600918, 116.27488518619089),
    new TMap.LatLng(40.040943635857445, 116.27804611629756),
    new TMap.LatLng(40.03951759379146, 116.2783762087081),
    new TMap.LatLng(40.03891287066983, 116.2752049655744)
  ]


  editor = new TMap.tools.GeometryEditor({
    map,
    // 可编辑图层
    overlayList: [
      {
        id: 'polygon1',
        selectedStyleId: 'highlight',
        overlay: new TMap.MultiPolygon({
          map,
          // 样式
          styles: {
            highlight: new TMap.PolygonStyle({
              color: 'rgba(255, 255, 0, 0.6)'
            })
          },
          geometries: [
            {
              id: 'hhhh',
              paths: firstPaths
            }
          ]
        }),
      },
    ],
    actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, //编辑器的工作模式 DRAW INTERACT
    snappable: true, // 开启邻近吸附
    selectable: true,// 开启点选功能
    activeOverlayId: 'polygon1', // 激活图层
  })

  // 开始监听几何图形
  editor.on('draw_complete', geometry => {
    console.log(geometry)
  })


  // 监听删除、修改、拆分、合并完成事件
  let evtList = ['delete', 'adjust', 'split', 'union'];
  evtList.forEach(evtName => {
    editor.on(evtName + '_complete', evtResult => {
      console.log(evtName, evtResult);
    });
  });

  // 监听拆分失败事件，获取拆分失败原因
  editor.on('split_fail', (res) => {
    alert(res.message);
  });
  // 监听合并失败事件，获取合并失败原因
  editor.on('union_fail', (res) => {
    alert(res.message);
  });
})
</script>

<style scoped>
#map_view {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#edit_view {
  display: flex;
}
</style>