地图标注物拖拽会变黑

[qrh919]

部分机型会出现拖拽地图时，出现标注物变黑，在谷歌浏览器最新的版本下也一样。

[github-actions[bot]]

hi @qrh919, welcome!

[github-actions[bot]]

Hi @qrh919, Please star this repo if you find it useful! Thanks :star:! 你好～ @qrh919 🌟 如果这个仓库对你有帮助，可以给我们点个star支持一下～你的支持对我们来说是最大的鼓励，感谢你的支持与点赞 🌟

[lvisei]

提供复现代码

[github-actions[bot]]

Hello, @qrh919, the information you provided is not enough for us to troubleshoot the problem. Please complete the issue description, provide gifs, screenshots, config, version. And explain the reproduction steps in detail. Thanks so much for your cooperation! The issue will be closed without any replay within 15 days.

你好 @qrh919，你所提供的信息不足于我们排查问题, 请按照 issue 模板填写相关信息, 提供 gif, 截图, 代码片段, 配置信息, 版本号, 可复现链接等方式, 详细说明复现步骤, 感谢配合, 谢谢! 15 天内未回复issue自动关闭。

[amberbeads]

提供复现代码

scene.on("loaded", () => { scene.addImage( "00", "https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_selfFactory.png" ); scene.addImage( "01", "https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_rival.png" ); scene.addImage( "02", "https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_cooperationFactory.png" ); scene.addImage( "03", "https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_generalRival.png" ); scene.addImage( "04", "https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_other.png" ); scene.addImage( "05", "https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_carton.png" );

const pointPositionData = [
  {
    longitude: "120.808067",
    latitude: "27.930832",
    type: "1",
    style: "01",
  },
  {
    longitude: "120.647392",
    latitude: "27.982082",
    type: "4",
    style: "04",
  },
  {
    longitude: "120.470008",
    latitude: "27.95961",
    type: "1",
    style: "01",
  },
];

const pointPositionLayer = new PointLayer({ zIndex: 12 })
  .source(pointPositionData, {
    parser: {
      type: "json",
      x: "longitude",
      y: "latitude",
    },
  })
  .shape("style", function (type) {
    return type;
  })
  .size("style", function (type) {
    if (type === "00") {
      return 25;
    } else if (type === "05") {
      return 10;
    }
    return 20;
  });
scene.addLayer(pointPositionLayer);

// 绑定事件
pointPositionLayer.on("click", (e) => {
  const { lng, lat } = e.lngLat;
  console.log(lng,lat);

  const marker = new Marker().setLnglat({ lng: lng, lat: lat });
  scene.addMarker(marker);
});

}); 是点击图标会黑掉，地图拖动一下图标又恢复正常

[lvisei]

是点击图标会黑掉，地图拖动一下图标又恢复正常

没有复现

[amberbeads]

是点击图标会黑掉，地图拖动一下图标又恢复正常

没有复现

有试下配置低的电脑上运行吗？L7对电脑配置有要求吗？有没有讨论群需要加下

[amberbeads]

https://github.com/user-attachments/assets/ec544866-1d67-495a-952d-859b8044352d

电脑配置：

代码如下：

<template>
  <div id="map" />
</template>

<script>
import {
  Scene,
  Zoom,
  PolygonLayer,
  LineLayer,
  PointLayer,
  Marker,
} from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'

export default {
  name: 'demo',
  data() {
    return {
      scene: null,
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      window._AMapSecurityConfig = {
        securityJsCode: 'xxx',
      }
      this.scene = new Scene({
        id: 'map',
        logoVisible: false,
        map: new GaodeMap({
          style: 'blank', // 使用无底图风格
          center: [120.664655, 27.913746],
          pitch: 40,
          rotation: 10,
          zoom: 10,
          skyColor: 'eaf2ff',
          token: 'xxx',
        }),
      })

      let self = this
      this.scene.on('loaded', () => {
        this.scene.addImage(
          '00',
          'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_selfFactory.png'
        )
        this.scene.addImage(
          '01',
          'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_rival.png'
        )
        this.scene.addImage(
          '02',
          'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_cooperationFactory.png'
        )
        this.scene.addImage(
          '03',
          'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_generalRival.png'
        )
        this.scene.addImage(
          '04',
          'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_other.png'
        )
        this.scene.addImage(
          '05',
          'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_carton.png'
        )

        //缩放
        const zoom = new Zoom({ position: 'bottomright' })
        self.scene.addControl(zoom)

        self.addMapArea()
        self.addPointPosition()
      })
    },
    //添加区域
    addMapArea() {
      var data = {
        type: 'FeatureCollection',
        features: [],
      }
      var labelData = []

      let self = this
      axios
        .get('https://geo.datav.aliyun.com/areas_v2/bound/330304.json')
        .then(function (res) {
          let resultData = res.data
          var featuresData = resultData.features[0]
          data.features.push(featuresData)
          labelData.push(featuresData.properties)

          const layer = new PolygonLayer({ zIndex: 2 })
            .source(data)
            .color('#F7F9FE')
            .shape('fill')

          const lineLayer = new LineLayer({
            zIndex: 3,
          })
            .source(data)
            .color('#0383FE')
            .size(1)

          const labelLayer = new PointLayer({
            zIndex: 4,
          })
            .source(labelData, {
              parser: {
                type: 'json',
                coordinates: 'centroid',
              },
            })
            .color('#0067E2')
            .shape('name', 'text')
            .size(12)
            .style({
              opacity: 1,
              stroke: '#fff',
              strokeWidth: 1,
              padding: [5, 5],
              textAllowOverlap: false,
              fontFamily: 'D-DIN',
              fontWeight: 'normal',
            })

          self.scene.addLayer(layer)
          self.scene.addLayer(lineLayer)
          self.scene.addLayer(labelLayer)
        })
    },
    addPointPosition() {
      const pointPositionData = [
        {
          longitude: '120.808067',
          latitude: '27.930832',
          type: '1',
          style: '01',
        },
        {
          longitude: '120.647392',
          latitude: '27.982082',
          type: '4',
          style: '04',
        },
        {
          longitude: '120.470008',
          latitude: '27.95961',
          type: '1',
          style: '01',
        },
      ]

      const pointPositionLayer = new PointLayer({ zIndex: 12 })
        .source(pointPositionData, {
          parser: {
            type: 'json',
            x: 'longitude',
            y: 'latitude',
          },
        })
        .shape('style', function (type) {
          return type
        })
        .size('style', function (type) {
          if (type === '00') {
            return 25
          } else if (type === '05') {
            return 10
          }
          return 20
        })
      this.scene.addLayer(pointPositionLayer)
      // 绑定事件
      pointPositionLayer.on('click', (e) => {
        const { lng, lat } = e.lngLat
        console.log(lng, lat)

        const marker = new Marker().setLnglat({ lng: lng, lat: lat })
        this.scene.addMarker(marker)
      })
    },
  },
}
</script>

<style lang="less" scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>

[lvisei]

未曾复现，代码如下

import {
  Scene,
  Zoom,
  PolygonLayer,
  LineLayer,
  PointLayer,
  Marker,
  Map
} from '@antv/l7'

const scene = new Scene({
  id: 'map',
  logoVisible: false,
  map: new Map({
    center: [120.664655, 27.913746],
    pitch: 40,
    rotation: 10,
    zoom: 10,
    skyColor: 'eaf2ff',
  }),
})

scene.on('loaded', () => {
  scene.addImage(
    '00',
    'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_selfFactory.png'
  )
  scene.addImage(
    '01',
    'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_rival.png'
  )
  scene.addImage(
    '02',
    'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_cooperationFactory.png'
  )
  scene.addImage(
    '03',
    'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_generalRival.png'
  )
  scene.addImage(
    '04',
    'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_other.png'
  )
  scene.addImage(
    '05',
    'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_carton.png'
  )

  addPointPosition()
})

function addPointPosition() {
  const pointPositionData = [{
    longitude: '120.808067',
    latitude: '27.930832',
    type: '1',
    style: '01',
  },
  {
    longitude: '120.647392',
    latitude: '27.982082',
    type: '4',
    style: '04',
  },
  {
    longitude: '120.470008',
    latitude: '27.95961',
    type: '1',
    style: '01',
  },
  ]

  const pointPositionLayer = new PointLayer({ zIndex: 12 })
    .source(pointPositionData, {
      parser: {
        type: 'json',
        x: 'longitude',
        y: 'latitude',
      },
    })
    .shape('style', function (type) {
      return type
    })
    .size('style', function (type) {
      if (type === '00') {
        return 25
      } else if (type === '05') {
        return 10
      }
      return 20
    })
  scene.addLayer(pointPositionLayer)
  // 绑定事件
  pointPositionLayer.on('click', (e) => {
    const { lng, lat } = e.lngLat
    console.log(lng, lat)

    const marker = new Marker().setLnglat({ lng: lng, lat: lat })
    scene.addMarker(marker)
  })
}

1. 应该和电脑无关，看一下浏览器控制台有没有报错，上传一下浏览器环境，像这样 https://github.com/antvis/L7/issues/2545#issuecomment-2185626103

2. 切换渲引擎为 regl 再看有没有异常

const scene = new Scene({
        renderer: 'regl'
        ...
});

[qrh919]

非常感谢，已经得到解决

[lvisei]

非常感谢，已经得到解决

切换渲引擎为 regl 如果可行，后续会升级，请上传浏览器环境报告，像这样 https://github.com/antvis/L7/issues/2545#issuecomment-2185626103

[amberbeads]

非常感谢，已经得到解决

切换渲引擎为 regl 如果可行，后续会升级，请上传浏览器环境报告，像这样 #2545 (comment)