2017-09-30 10 views
1

MVTタイルレイヤーのフィーチャにフィーチャをスタイル設定するにはどうすればよいですか?OpenLayers MVTレイヤーとスタイルの設定

geoJSONレイヤー(geoJSONに変更するのと同じようなもの)を試してみましたが、geoJSONレイヤーが89MBでMVTが3MBなので、MVT相当のものはいいとは言えません。

は、ここに私がやったことだ:

var stySimple = new ol.style.Style({ 
 
\t \t \t \t fill: new ol.style.Fill({ 
 
\t \t \t \t \t color: 'transparent' //#ADD8E6' 
 
\t \t \t \t }), 
 
\t \t \t \t stroke: new ol.style.Stroke({ 
 
\t \t \t \t \t color: '#880000', 
 
\t \t \t \t \t width: 1 
 
\t \t \t \t }) 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t var styleClick = new ol.style.Style({ 
 
\t \t \t \t fill: new ol.style.Fill({ 
 
\t \t \t \t \t color: '#ADD8E6' 
 
\t \t \t \t }), 
 
\t \t \t \t stroke: new ol.style.Stroke({ 
 
\t \t \t \t \t color: '#008800', 
 
\t \t \t \t \t width: 2 
 
\t \t \t \t }) 
 
\t \t \t }); 
 
     
 
     
 
      var layer = 'aw:gis_hucs'; 
 
\t \t \t var huclayer = new ol.layer.VectorTile({ 
 
\t \t \t \t style: stySimple, 
 
\t \t \t \t source: new ol.source.VectorTile({ 
 

 

 
\t \t \t \t \t tilePixelRatio: 1, // oversampling when > 1 
 
\t \t \t \t \t tileGrid: ol.tilegrid.createXYZ({ 
 
\t \t \t \t \t \t maxZoom: 19 
 
\t \t \t \t \t }), 
 
\t \t \t \t \t format: new ol.format.MVT({featureClass: ol.Feature}), 
 
\t \t \t \t \t url: 'http://geo.host.org:8080/geoserver/gwc/service/tms/1.0.0/' + layer + '@EPSG%3A' + projection_epsg_no + '@pbf/{z}/{x}/{-y}.pbf' 
 
\t \t \t \t }) 
 
\t \t \t }); 
 
     
 
     var map = new ol.Map({ 
 
\t \t \t \t target: 'map', 
 
\t \t \t \t layers: [ 
 
\t \t \t \t \t \t huclayer 
 
\t \t \t \t ], 
 
\t \t \t \t view: new ol.View({ 
 
\t \t \t \t \t center: ol.proj.fromLonLat([-84.32470703125, 33.8799896240234]), 
 
\t \t \t \t \t zoom: 7 
 
\t \t \t \t }) 
 
\t \t \t }); 
 
     
 
     
 
     hoverInteraction = new ol.interaction.Select({ 
 
\t \t \t \t condition: ol.events.condition.pointerMove, 
 
\t \t \t \t layers: [huclayer], 
 
\t \t \t \t style: styleClick /****** NO BUENO 1 */ 
 
\t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t map.on('click', function(e) { 
 
\t \t \t \t \t \t var features = []; 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t map.forEachFeatureAtPixel(e.pixel, function(feature, layer) { 
 
\t \t \t \t \t \t \t features.push(feature); 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t features.forEach(function(cv) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t cv.setStyle(styleClick); /****** NO BUENO 2 */ 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t); 
 
\t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t 
 
\t \t \t map.addInteraction(hoverInteraction); 
 
\t \t \t hoverInteraction.on('select', function(e) { 
 
\t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t if (e.deselected) e.deselected.forEach(function(cv) { 
 
\t \t \t \t \t \t cv.setStyle(null); 
 
\t \t \t \t \t }); 
 
\t \t \t \t if (e.selected) e.selected.forEach(function(cv) { 
 
\t \t \t \t \t \t cv.setStyle(styleClick); /****** NO BUENO 3 */ 
 
\t \t \t \t \t }); 
 
\t \t \t \t console.log(e); 
 
\t \t \t }); 
 
     
 
    

私はかなり、落胆うつ病とイライラしています。 MVTレイヤー上のフィーチャーのスタイルをどのように設定する必要がありますか?

OLは4.1.12 Geoserverである私はと対話しようとしています層の良好な表現が、機能ごとの特徴に全くダイナミックなスタイリングを取得2.11

です。私は、そうでないことを示唆している投稿にもかかわらず、私はそれを動的に行うことはできません。また、MVTレイヤー上にあるフィーチャーにスタイルを設定することはできないが、それを参照するドキュメンテーションはありません。私は何のエラーもありません。上のコードを簡単に見えるように簡略化しましたが、jsfiddleには生きていないMVTレイヤーが必要です。

選択インタラクションは、アクティブな機能と非アクティブな機能の一覧を表示します。選択されたものが表示されない場合はどういうことですか?

答えて

1

ol.layer.VectorTileol.Featureの代わりにol.render.Featureフィーチャを持つソースで動作するように最適化されているため、フィーチャのスタイルの変更をリッスンしません。したがって、フィーチャスタイルを変更するたびに、huclayer.changed()に電話して、更新されたスタイルで再レンダリングをトリガする必要があります。

関連する問題