Azure Maps - IconOptions - 图像 - 'marker-green'答案

【问题标题】：Azure Maps - IconOptions - image - 'marker-green'Azure Maps - IconOptions - 图像 - 'marker-green'
【发布时间】：2021-01-13 03:57:48
【问题描述】：

IconOptions 的图像属性中没有“绿色标记”的内置选项。

我该如何实施？

https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.iconoptions?view=azure-maps-typescript-latest

【问题讨论】：

标签： azure-maps

【解决方案1】：

您必须将图像添加到地图图像精灵。有所有内置图标的模板等等，如下所示：https://azuremapscodesamples.azurewebsites.net/?sample=All%20built-in%20icon%20templates%20as%20symbols

您可以将模板加载到地图中并将其显示在符号图层中，如本示例所示：https://azuremapscodesamples.azurewebsites.net/?sample=Symbol%20layer%20with%20built-in%20icon%20template

这是使用“标记”图标模板的示例，并赋予它绿色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Symbol layer with built-in icon template - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico"/>
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;
        
        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Create a data source to add your data to.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Add a point to the center of the map.
                datasource.add(new atlas.data.Point([0, 0]));

                //Create an icon from one of the built-in templates and use it with a symbol layer.
                map.imageSprite.createFromTemplate('myTemplatedIcon', 'marker', 'green', '#fff').then(function () {

                    //Add a symbol layer that uses the custom created icon.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            image: 'myTemplatedIcon'
                        }
                    }));
                });
            });
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;height:600px;"></div>
</body>
</html>

【讨论】：