vue-mapvgl在卫星图层中不正常标记

vue-mapvgl的icon在卫星图层中不正常显示，在默认图层正常显示
正常展示：

异常展示：

代码如下：


```html

<template>
    <div class="app-container" style="padding: 0;">
        <div class="map-box">
            <el-bmap 
                ref="map" 
                vid="bmapDemo" 
                :min-zoom="14" 
                :max-zoom="20" 
                :tilt="tilt" 
                :heading="heading" 
                :bmap-manager="bmapManager" 
                :center="center" 
                :zoom="zoom"
                :events="events" class="bmap-demo">
                <el-bmapv-view>
                    <el-bmapv-icon-layer :icon="icon" :width="width" :height="height" :data="deviceDate" :enable-picked="true" :zoomThreshold="thresholdList"></el-bmapv-icon-layer>
                </el-bmapv-view>
            </el-bmap>


</template>
<script>
import { BMapManager } from 'vue-bmap-gl';
import VueBMap from 'vue-bmap-gl';

let bmapManager = new VueBMap.BMapManager();

export default({
    name:"bigMap",
    components: {},
    data(){
        return{
            center:[121, 37],
            loaded:false,
            bmapManager,
            zoom: 14,
            center: [124.4673031945, 41.985339349],
            tilt: 60,
            heading: 0,
            icon: '@/assets/images/map/gnss.png',
            width: 24,
            height: 24,
            map: null,
            thresholdList:[{

            }],
            events: {
                init: (o) => {
                    this.map = o;
                    console.log(o.getCenter());
                    console.log(this.$refs.map.$$getInstance());
                },
                'moveend': () => {
                },
                'zoomchange': () => {
                },
                'click': (e) => {
                    alert('map clicked');
                }
            },
            deviceDate:[{
                geometry: {
                    type: 'Point',
                    coordinates: [124.4673031885,41.9853393455],
                },
                properties: {
                    icon: '@/assets/images/map/gnss.png'
                }
                },{
                geometry: {
                    type: 'Point',
                    coordinates: [124.4669295841,41.9859151068],
                },
                properties: {
                    icon: '@/assets/images/map/gnss.png'
                }
            }]
        }
    },
    methods:{
    }
})
</script>

[ 使icon图层在卫星图层正常展示]

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

5条回答默认最新

MarkHan_ 2023-03-16 09:49

关注

该回答引用GPTᴼᴾᴱᴺᴬᴵ
可能是因为卫星图层的透明度问题导致图标不显示，您可以尝试修改图标的zIndex属性，将其设置为一个较大的值，比如999，或者尝试将卫星图层的透明度设置为较小的值，比如0.5，以便更好地显示图标。例如，您可以修改代码如下：

<template>
  <div class="app-container" style="padding: 0;">
    <div class="map-box">
      <el-bmap
        ref="map"
        vid="bmapDemo"
        :min-zoom="14"
        :max-zoom="20"
        :tilt="tilt"
        :heading="heading"
        :bmap-manager="bmapManager"
        :center="center"
        :zoom="zoom"
        :events="events"
        class="bmap-demo"
      >
        <el-bmapv-view>
          <el-bmapv-icon-layer
            :icon="icon"
            :width="width"
            :height="height"
            :data="deviceDate"
            :enable-picked="true"
            :zoomThreshold="thresholdList"
            :zIndex="999"
          ></el-bmapv-icon-layer>
        </el-bmapv-view>
      </el-bmap>
    </div>
  </div>
</template>

如果问题仍然存在，请尝试在Vue Devtools中检查icon图标的路径是否正确，并确保图标文件可访问。

编辑记录

报告相同问题？

关注问题

码龄粉丝数原力等级 --

vue-mapvgl在卫星图层中不正常标记

5条回答默认最新

码龄粉丝数原力等级 --

问题事件

码龄粉丝数原力等级 --

码龄粉丝数原力等级 --

vue-mapvgl在卫星图层中不正常标记

5条回答 默认 最新

问题事件

5条回答默认最新