async gridTypeChange(){
      //删除图层
      if (this.layerIds.length) {
        this.layerIds.forEach(id => {
          amap.removeLayer(id)
        this.layerIds = [];
      //删除数据源
      if (this.sourceIds.length) {
        this.sourceIds.forEach(id =>{
          amap.removeSource(id)
        this.sourceIds = [];
      //重新添加图层
      let res = await this.getAreaData();
      let rgbList = [];
      res.colorList.forEach(item => {
        let strlist = item.split(',');
        let rgbastr = `rgba(${strlist[0] + ',' + strlist[1] + ',' + strlist[2]},0.5)`;
        rgbList.push(rgbastr)
      let num = 0;
      res.arrlast.forEach((ite, index) => {
        num += 1;
        this.drawArea(ite, rgbList[index],res.nameList[index],num)
				
在Mapbox-gl-js中添加自定义图层前言一、制作geojson地图二、使用Tippecanoe将geojson转换成vector tile(.pbf)文件三、使用mapbox-gl-js三、Mapbox-gl-js中根据矢量数据的属性过滤显示
本文说明如何制作自定义的地图数据，并使用mapbox-gl-js进行显示
一、制作geojson地图
如果自定义的地图格式已经是geojson可跳过。
有时自定义数据来源较多，格式不定，此时需要将这些五花八门的格式统一成geojson格式。
可以通过Pyt
我们点击这这个图片能获取到数据中的fid 根据fid进行过滤 （本代码中因为页面功能需求还要过滤一层type值，因为有不同的图斑）
 map.setLayoutProperty( `pest_address-layer`,
            'icon-image',
            ['match',['get','type'],
            1,['match',['get',
				
一、在index.html全局引入mapbox-gl的js和css包，由于项目中会涉及到部分空间几何对象关系的计算，需借助turf.js，详细使用方法可参考https://blog.csdn.net/weixin_39150852/article/details/116758542
二、创建地图组件，初始化地图
<template>
  <div class="map-wrapper" :id="mapId"></div>
</template>
				
背景分析：采用Layer绘制方案中存在很多情况下需求在一张地图绘制n个属性显示的问题，例如行政区划面，边界等等。例如如下场合
未知多个元素汇集在同一张地图实例上去做显示，编辑等效果。
处理方案：
1.第一反应是N个layer叠加显示
优点：数据处理简单，执行编辑方案简单
缺点：需要使用存储全局变量多，绘制性能占用大，内存占用大，后续清理图层，清理数据麻烦
2.单图N元素的显示
核心利用 数据组装时 组装 features=[];
优点：需要使用存储变量少，绘制性能占用低，图层唯一，数据，图层清理简单。整体
   data: new Uint8Array(size * size * 4),
   onAdd: function () {
     const canvas = document.createElement('canvas')
     canvas.width = this.width
				
使用mapboxgl 实现特定的地图效果
最近完成的一个项目,dashboard 地图模块的需要和第三方对接，对接要求使用mapboxgl 来对接。以前的项目一直用leaflet库来处理地图需求，mapboxgl 库对我来说很陌生。学习研究一段时间，再基本实现了产品设计的地图交互功能后，我在这里写记录。
先上张设计图：
一、要求实现的功能
1.加载深圳地图瓦片、颜色采用暗色调
2.地图附有蓝色遮罩层，鼠标hover时 ，该区域高亮并展示相应的数据
3. 摄像头点位在地图上显示，两种类型，一个绿色一个蓝色，要
  <meta charset="utf-8" />
  <title>MapboxGL Marker Highlight Animation</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    .highlight-animation {
      animation: highlight 1s infinite;
    @keyframes highlight {
        opacity: 1;
        transform: scale(1);
      50% {
        opacity: 0.5;
        transform: scale(1.5);
      100% {
        opacity: 1;
        transform: scale(1);
  </style>
</head>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var lng = -122.4194; // 经度
var lat = 37.7749; // 纬度
var zoomLevel = 12; // 缩放级别
// 创建地图实例
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: zoomLevel
// 创建一个图层，并向地图添加一个marker
var marker = new mapboxgl.Marker({
  element: createMarkerElement()
  .setLngLat([lng, lat])
  .addTo(map);
// 为标记元素添加动画类
marker.getElement().classList.add('highlight-animation');
// 创建标记元素及样式
function createMarkerElement() {
  var el = document.createElement('div');
  el.className = 'marker';
  el.style.backgroundImage = 'url(https://example.com/your-marker-icon.png)'; // 替换为您自己的标记图标URL
  el.style.width = '40px';
  el.style.height = '40px';
  el.style.backgroundRepeat = 'no-repeat';
  el.style.backgroundSize = 'cover';
  return el;
</script>
</body>
</html>
请确保将YOUR_MAPBOX_ACCESS_TOKEN替换为您自己的Mapbox访问令牌，并将`https://example.com/your-marker-icon.png`替换为您自己的标记图标的URL。
通过上述代码，您将能够在MapboxGL地图上添加一个marker，并为其添加高亮闪烁的动画效果。根据您的需求，您可以调整地图的样式、标记的位置和动画效果。