Estoy pensando en migrar de OpenLayers a Azure Maps y necesito revisar una lista de cosas que puedo hacer actualmente y debo poder hacer en Azure. Una de esas cosas es el estilo, donde

Estoy diseñando una capa en función de algunas cosas diferentes, una de las cuales es si el nombre de una característica existe en una matriz. Hay algunos otros requisitos, pero todos se derivan de la misma necesidad básica.

He visto que puedo definir una propiedad personalizada para cada polígono cuando se utiliza el estilo, pero no veo cómo configurar esto en función de una función personalizada (es decir, si una propiedad está en una matriz).

Esto es lo que estoy haciendo en OpenLayers (v3):

this._style = (feature, resolution) => {
    
    if (elsaMap.titlesWithContactInfo.includes(MapHelpers.Titles.getProperty(feature, MapHelpers.Titles.PROPERTY_NAMES.TITLE_NO))) {
        // Client has entered contact info, return named style
        return clientAddedContactStyle;
    }

    // No ownership information
    return noOwnershipStyle
}

¿Se puede hacer esto en Azure Maps? He revisado los documentos sobre el estilo basado en expresiones condicionales, pero no parece ayudar demasiado.

Alternativamente, ¿puedo escribir el estilo de una capa como una función pura?

https://docs.microsoft.com/en-us/azure/azure-maps/data-driven-style-expressions-web-sdk#conditional-expressions

0
Alistair R 3 ago. 2020 a las 17:49

1 respuesta

La mejor respuesta

Las funciones de devolución de llamada para el estilo no son compatibles ya que la lógica del estilo se transfiere a la GPU para su procesamiento. Sin embargo, puede convertir la lógica de su función en una expresión de estilo basada en datos. Las expresiones de estilo se pueden utilizar para recrear la lógica de funciones complejas como un conjunto de instrucciones que procesará la GPU. Esto es significativamente más rápido que usar devoluciones de llamada para diseñar y descarga este procesamiento del subproceso de la interfaz de usuario de la CPU única del navegador a la GPU. Aquí hay una expresión de ejemplo que verifica si una propiedad (título) está dentro de una matriz de valores y establece el color de una burbuja en consecuencia (el mismo principio funciona con polígonos).

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8" />
    <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/css/atlas.min.css?api-version=2" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=2"></script>

    <script type='text/javascript'>
        var map, datasource;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                zoom: 5,

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: 'tTk1JVEaeNvDkxxnxHm9cYaCvqlOq1u-fXTvyXn2XkA'
                }
            });

            //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);

                //Array of values to look into.
                var titlesWithContactInfo = ['titleA', 'titleB', 'titleC'];

                //Add some data that has a "title" property.
                datasource.add([
                    new atlas.data.Feature(new atlas.data.Point([0, 0]), { title: 'titleA' }),
                    new atlas.data.Feature(new atlas.data.Point([0, 1]), { title: 'titleC' }),
                    new atlas.data.Feature(new atlas.data.Point([1, 1]), { title: 'titleX' })
                ]);

                //Create a layer that styles shapes based on the title property. 
                var layer = new atlas.layer.BubbleLayer(datasource, null, {
                    color: [
                        'case',

                        //Get the title property from the feature and see if it is in the list of valid titles. 
                        ['in', ['get', 'title'], ['literal', titlesWithContactInfo]],

                        //Make the color green if the title is in the array.
                        'green',

                        //Make the color red if it isn't.
                        'red'
                    ]
                });

                map.layers.add(layer);
            });
        }
    </script>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;height:100%;"></div>
</body>
</html>

Tenga en cuenta que si cambia la matriz titleWithContactInfo, deberá actualizar la opción en la capa, ya que solo conocerá los valores pasados ​​cuando se establezca la opción. Básicamente, pasa la misma información de estilo a la función setOptions de la capa.

1
rbrundritt 3 ago. 2020 a las 16:46