Azure Maps 从点属性设置图层offset选项时触发浏览器警告如何解决

解决方法 #

出现警告的核心原因是Azure Maps的表达式校验逻辑要求offset参数必须为[数字, 数字]格式的二元数组，你直接通过['get', 'offset']取值时，校验器无法提前确认属性值的类型和格式是否符合要求，因此触发类型不匹配警告。

你可以通过显式声明数组返回类型的方式消除警告，同时优化判断逻辑，以下是两种可用的正确写法：

写法1：完整校验逻辑（兼容性最好）

适合需要严格校验属性格式的场景：

layers.pointLayer.setOptions({
    iconOptions: {
        offset: [
            'case',
            // 校验offset属性存在，且是长度为2的数字数组
            ['all', 
                ['has', 'offset'],
                ['==', ['length', ['get', 'offset']], 2],
                ['==', ['typeof', ['at', 0, ['get', 'offset']]], 'number'],
                ['==', ['typeof', ['at', 1, ['get', 'offset']]], 'number']
            ],
            // 显式声明返回值为数组，通过校验
            ['array', ['get', 'offset']],
            // 不符合条件时返回默认偏移
            ['literal', [0, 0]]
        ]
    }
})

写法2：简化写法（代码更短）

用coalesce表达式替代case判断，逻辑等价且代码更简洁：

layers.pointLayer.setOptions({
    iconOptions: {
        offset: [
            'coalesce',
            // 声明返回长度为2的数字数组
            ['array', ['get', 'offset'], 2, 'number'],
            ['literal', [0, 0]]
        ]
    }
})

两种写法都可以正常从点属性中读取offset值，同时不会触发浏览器控制台警告。

内容的提问来源于stack exchange，提问作者OJB1