Patrzę na migrację z Openlayers do Mapy Azure, i musi przejść przez listę rzeczy, które mogę obecnie robić i musi być w stanie zrobić na Azure. Jedną z tych rzeczy stylizacji, gdzie

Stylizuję warstwę na podstawie kilku różnych rzeczy, z których jeden jest, jeśli nazwa funkcji istnieje w tablicy. Jest kilka innych wymagań, ale wszystkie pochodzą z tej samej potrzeby bazy.

Widziałem, że mogę zdefiniować własność niestandardową dla każdego wielokąta podczas stylizacji, ale nie widzę, jak ustawić to w oparciu o funkcję niestandardową (tj. Czy nieruchomość znajduje się w tablicy).

Oto, co robię w 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
}

Czy można to zrobić na mapach Azure? Przeszedłem przez Dokumenty na temat stylizacji na podstawie wyrażeń warunkowych, ale nie wydaje się zbyt wiele pomagać.

Alternatywnie, czy mogę napisać styl dla warstwy jako czystej funkcji?

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

0
Alistair R 3 sierpień 2020, 17:49

1 odpowiedź

Najlepsza odpowiedź

Funkcje zwrotne do stylizacji nie są obsługiwane jako logika stylizacji jest przekazywana do GPU do przetwarzania. Można jednak konwertować logikę funkcji do wyrażenia stylu napędzanego przez dane. Wyrażenia stylowe mogą być używane do odtworzenia kompleksu logiki funkcji jako zestaw instrukcji, które przetworzy GPU. Jest to znacznie szybsze niż wykorzystywanie zwrotów zwrotnych do stylizacji i rozładowuje to przetwarzanie z pojedynczej wątku procesora CPU przeglądarki do GPU. Oto przykładowy wyraz, który sprawdza, czy właściwość (tytuł) znajduje się w tablicy wartości, i odpowiednio ustawia kolor bańki (te same prace główne z wielokątami).

<!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>

Należy pamiętać, że jeśli zmienisz tablicę tytułuWithContactInfo, musisz zaktualizować opcję w warstwie, ponieważ będzie to zdawać sobie sprawę z wartości przekazanych, gdy opcja jest ustawiona. Zasadniczo przekazuje te same informacje o funkcji Setoptions Funkcja warstwy.

1
rbrundritt 3 sierpień 2020, 16:46