maptalks / issues

Repo of issues for webgl layers
3 stars 0 forks source link

GridLayer 当pitch为0时,设置的1米线10米线显示不正常,100米线时有时无(如图2);当不为0时,显示正常(如图1) #752

Open zhanghp007 opened 1 month ago

zhanghp007 commented 1 month ago

001 002

fuzhenn commented 1 month ago

麻烦提供一下重现代码

zhanghp007 commented 1 month ago

import { GridLayer } from 'maptalks.gridlayer' import { GroupGLLayer, GLTFLayer, } from 'maptalks-gl'

 // 添加网格线层
// 1米网格线
var gridsone = [
    {
        center: [0, 0],     // center of the grid
        width : 1,        // width of the grid cell
        height: 1,        // height of the grid cell
        unit: 'meter',

        cols: [-gridlength/2, gridlength/2],
        rows: [-gridlength/2, gridlength/2],

        // data format
        data : [

        ]
    }
];
var optionsone = {
    properties:{
        type: 'grid',
    },
    minZoom:20,
    symbol : {
        lineColor : '#5D5D5D',  // #bbb
        lineWidth : 1,
        lineOpacity : 0.2,
    }
};
var gridLayerone = new GridLayer('gridone', gridsone, optionsone);
gridLayerone.addTo(map);

// 10米网格线
var gridsten = [
    {
        center: [0, 0],     // center of the grid
        width : 10,        // width of the grid cell
        height: 10,        // height of the grid cell
        unit: 'meter',

        cols: [-gridlength/20, gridlength/20],
        rows: [-gridlength/20, gridlength/20],

        // data format
        data : [

        ]
    }
];
var optionsten = {
    properties:{
        type: 'grid',
    },
    minZoom:16,
    symbol : {
        lineColor : '#8D8D8D',
        lineWidth : 1,
        lineOpacity : 0.4,
    }
};
var gridLayerten = new GridLayer('gridten', gridsten, optionsten);
gridLayerten.addTo(map);

// 100米网格线
var gridshundred = [
    {
        center: [0, 0],     // center of the grid
        width : 100,        // width of the grid cell
        height: 100,        // height of the grid cell
        unit: 'meter',

        cols: [-gridlength/200, gridlength/200],
        rows: [-gridlength/200, gridlength/200],

        // data format
        data : [
        ]
    }
];
var optionshundred = {
    properties:{
        type: 'grid',
    },
    minZoom:12,
    symbol : {
        lineColor : '#A9A9A9',  // #BBB
        lineWidth : 1,
        lineOpacity : 0.6,
    }
};
var gridLayerhundred = new GridLayer('gridhundred', gridshundred, optionshundred);
gridLayerhundred.addTo(map);

// 设置视角 if(map.getPitch() === 0) { map.setPitch(60); // 设置倾视角为60 }else{ map.setPitch(0); // 设置倾视角为0 }