无法让自定义图像在 Azure Maps 中显示为符号

Question

我真的找不到关于如何执行此操作的任何好的文档或任何好的示例。

这是我的代码。这是 Asp.net 核心视图中的运行。

var imageMarker = "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png";

for (var i = 0; i < locationData; i++) {

                let imageName = 'image' + i;

                map.imageSprite.add(imageName, imageMarker).then(function () {

                    //Create a data source and add it to the map.
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);

                    //Create a point feature and add it to the data source.
                    datasource.add(new atlas.data.Feature(new atlas.data.Point(i.longitude, i.latitude), {
                        name: i.name
                    }));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Pass in the id of the custom icon that was loaded into the map resources.
                            image: imageName,
                            //Optionally scale the size of the icon.
                            size: 0.5
                        },
                        textOptions: {
                            //Add some text
                            textField: name,
                            //Offset the text so that it appears on top of the icon.
                            offset: [0, -2]
                        }
                    }));
                });

            }

我没有收到任何错误。符号只是没有出现在地图上。

下面链接的示例适用于我的 map.events.add 就绪函数。

Image Sprite sample

非常感谢任何帮助！谢谢！

Answer 1

这是最终对我有用的东西。我在这方面与 Microsoft 支持部门合作。 locationData 包含图像、经度和纬度。经度和纬度的最小值和最大值也被传入以设置相机边界。我原始代码的最大问题是将 iconOptions 大小设置为 0.5。该插件不喜欢那样。现在设置为 1。

function addMarkerSymbols(locationData, min_long, min_lat, max_long, max_lat)
    {

        map.setCamera({
            bounds: [min_long, min_lat, max_long, max_lat],
            padding: 50
        });

        $.each(locationData, function (i, item)
        {

            map.imageSprite.add('default-icon' + i, item.locationImage);
            //Create a data source and add it to the map.
            var datasource = new atlas.source.DataSource();
            map.sources.add(datasource);

            //Add a data set to the data source.
            datasource.add(new atlas.data.Feature(new atlas.data.Point([item.longitude, item.latitude]), null));

            //Create a symbol layer to render the points.
            layer = new atlas.layer.SymbolLayer(datasource, null, {
                iconOptions: {
                    //The map control has built in icons for bar, coffee and restaurant that we can use.
                    image: 'default-icon' + i,
                    anchor: 'center',
                    allowOverlap: true,
                    size: 1
                }
            });
            map.layers.add(layer);

        });

    }

无法让自定义图像在 Azure Maps 中显示为符号

Can't get custom images to display in Azure Maps as Symbols

azure-maps