Mapbox GL и .net ядро ​​webApi - PullRequest
Новая
       4

Mapbox GL и .net ядро ​​webApi

0 голосов
/ 13 ноября 2018

Я перехожу из Leaflet в Mapbox GL и у меня возникают проблемы с данными.Мой webApi проверен, но я не могу плавно интегрировать их.

Подход, от которого я отказался, основываясь на их примерах и моих собственных исследованиях, выглядит следующим образом: 

        map = new mapboxgl.Map({
            container: 'mapdiv',
            style: 'mapbox://styles/mapbox/streets-v10'
            , center: start
            , zoom: $scope.zoom
            , transformRequest: (url, resourceType) => {
                if (resourceType === 'Source' && url.startsWith(CONFIG.API_URL)) {
                    return {
                        headers: {
                            'Authorization': 'Bearer ' + localStorageService.get("authorizationData")
                            , 'Access-Control-Allow-Origin': CONFIG.APP_URL
                            , 'Access-Control-Allow-Credentials': 'true'
                        }
                    }
                }
            }
        });

Это прохождение моего OAuth2токен (или, по крайней мере, я так думаю) и часть межсайтового скриптинга CORS.

Сопровождая вышесказанное: 

map.addSource(layerName, { type: 'geojson', url: getLayerURL($scope.remLayers[i]) });
map.getSource(layerName).setData(getLayerURL($scope.remLayers[i]));

Пытаясь также безрезультатно: 

map.addSource(layerName, { "type": 'geojson', "data": { "type": "FeatureCollection", "features": [] }});
map.getSource(layerName).setData(getLayerURL($scope.remLayers[i]));

Хотя ошибок нет, Fiddler не показывает никаких запросов к моему слою webApi.Все остальные показывают, но Mapbox, кажется, не вызывает их.

URL выглядит так: http://localhost:49198/api/layer/?bbox=36.686654090881355,34.72821077223763,36.74072742462159,34.73664000652042&dtype=l&id=cf0e1df7-9510-4d03-9319-d4a1a7d6646d&sessionId=9a7d7daf-76fc-4dd8-af4f-b55d341e60e4

Поскольку это не помогло, я попытался сделать его более ручным, используя мои существующие $ httpвызовы, которые частично работают. 

map = new mapboxgl.Map({
            container: 'mapdiv',
            style: 'mapbox://styles/mapbox/streets-v10'
            , center: start
            , zoom: $scope.zoom
            , transformRequest: (url, resourceType) => {
                if (resourceType === 'Source' && url.startsWith(CONFIG.API_URL)) {
                    return {
                        headers: {
                            'Authorization': 'Bearer ' + localStorageService.get("authorizationData")
                        }
                    }
                }
            }
        });

               map.addSource(layerName,
                    {
                        "type": 'geojson',
                        "data": { "type": "FeatureCollection", "features": [] }
                    });

Сложная задача - знать, когда следует выполнять вызов для извлечения данных.Единственное место, которое я смог найти, было событие данных карт, которое теперь выглядит так: 

map.on('data', function (e) {
            if (e.dataType === 'source' && e.isSourceLoaded === false && e.tile === undefined) {
                // See if the datasource is known
                for (var i = 0; i < $scope.remLayers.length; i++) {
                    if (e.sourceId === $scope.remLayers[i].name) {
                        askForData(i)
                    }
                }
            }
        });

    function askForData(i) {
        var data = getBBoxString(map);
        var mapZoomLevel = map.getZoom();
        if (checkZoom(mapZoomLevel, $scope.remLayers[i].minZoom, $scope.remLayers[i].maxZoom)) {
            mapWebSvr.getData({
                bbox: data, dtype: 0, id: $scope.remLayers[i].id, buffer: $scope.remLayers[i].isBuffer, sessionId
            },  
                function (data, indexValue, indexType) {
                    showNewData(data, indexValue, indexType);
                },
                function () {
                    // Not done yet.
                },
                i,
                0
            );
        }
}

    function showNewData(ajxresponse, index, indexType) {
        map.getSource($scope.remLayers[index].name).setData(ajxresponse);
        map.getSource($scope.remLayers[index].name).isSourceLoaded = true;
    }

Это все работает с одним исключением.Это продолжает стрелять снова и снова.Некоторые из этих вызовов возвращают много данных для веб-вызова, поэтому на данный момент это не решение.Это похоже на то, что данные никогда не устраивают, даже если они отображаются на карте!В событии данных есть параметр isSourceLoaded, но для него не установлено значение true.Я искал пример, пытался установить isSourceLoaded в нескольких местах (как с кодом выше), но безрезультатно.

У кого-нибудь есть метод, успешно выполняющий эту основную функцию поиска данных, или он может указать наошибки в моем коде?Или даже укажи мне на рабочий пример ...

Я потратил слишком много времени на это сейчас и мог бы с некоторой помощью помочь.

1 Ответ

0 голосов
/ 14 ноября 2018

После небольшого бега у меня есть решение.Письмо от Mapbox указывало на заполнение данных в событии загрузки - что я сейчас и делаю.Это не было тем решением, которое я искал, поскольку данные должны обновляться, когда карта перемещается, масштабируется и т. Д. - требуются дополнительные поиски.После более тщательного изучения решение было найдено.Использование разрыва кода на событии рендеринга запросит информацию при изменении ограничивающей рамки. 

        var renderStaticBounds = getBoundsString(map.getBounds());
        map.on('render', function (e) {
            if (renderStaticBounds != getBoundsString(map.getBounds())) {
                renderStaticBounds = getBoundsString(map.getBounds());
                for (var i = 0; i < $scope.remLayers.length; i++) {
                    askForData(i);
                }
            }
        });
        function getBoundsString(mapBounds) {
            var left = mapBounds._sw.lng;
            var bottom = mapBounds._sw.lat;
            var right = mapBounds._ne.lng;
            var top = mapBounds._ne.lat;
            return left + ',' + bottom + ',' + right + ',' + top;
        }

Это, мы надеемся, сэкономит кому-то время на разработку.

...