Как быстро раскрасить слой из табличных данных в Openlayers - PullRequest
Новая
       29

Как быстро раскрасить слой из табличных данных в Openlayers

0 голосов
/ 31 мая 2019

Я сохранил файл geojson (около 150 полигонов) на Geoserver и вызвал этот слой с WFS в OpenLayers (v4.6.4). Чтобы закрасить каждый многоугольник, я использовал функцию, основанную на этом примере: http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html

Цвет каждого полигона зависит от значения, хранящегося в моей базе данных postgresql. Это работает, но слишком медленно для моего приложения (локально около 4 секунд, на удаленном сервере более 10 секунд).

У кого-нибудь есть идея улучшить производительность? Использовать сервис WMS вместо WFS? К названию векторного слоя?

Это мое определение моего слоя: 

var format = 'image/png';

var projection = new ol.proj.Projection({
          code: 'EPSG:4326',
          units: 'degrees',
          axisOrientation: 'neu'
      });

var map = new ol.Map({
        controls: ol.control.defaults({
          attribution: false
        }).extend([mousePositionControl]),
        overlays: [overlay],
        target: 'map',
        layers: [
          district_layer
        ],
        view: new ol.View({
           projection: projection
        })
      });


//definition and adding of the district layer
          var format_geojson = new ol.format.GeoJSON();
          var districtSource = new ol.source.Vector({
            format: format_geojson,
            url : 'http://'+ $location.host() + ':8080/geoserver/project/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=project:District_07072018&outputFormat=application%2Fjson',
            strategy : ol.loadingstrategy.bbox

          });
          var district_layer = new ol.layer.Vector({
            renderMode: 'image',
            source: districtSource,
            style: styleFunction
          });
          map.addLayer(district_layer);
          //when the layer is ready to be customize
          var key = districtSource.on('change', function(event) {
            if (districtSource.getState() == 'ready') {
              var district_value_object = {};
            //if ($scope.district_name_list && $scope.value) {
              if ($scope.district_name_list && $scope.color_value[99]) {
                for (var i=0;i<$scope.district_name_list.length;i++){
                  district_value_object[$scope.district_name_list[i].eng_name] = $scope.color_value[99][i]; 
                }
              }
              district_layer.getSource().forEachFeature(function(feature) {
                var district_eng_name = feature.get('Eng_Name');
                if (district_value_object[district_eng_name]) { //value
                  //set the feature name to be able to get it in the styleFunction
                  feature.set('Value', district_value_object[district_eng_name]);
                }
              });
            }
          });

Любая помощь советов будет очень признателен. Спасибо.

...