ホーム>プログラミング関連>その他のソースコード
ダウンロード

リーフレット-WFST

リーフレットの OGC WFS-T クライアント層。

プラグインのインストール

npm経由: 

  npm i leaflet-wfst --save

バウワー経由: 

  bower i leaflet-wfst --save

GitHub から: 

  npm i -S git://github.com/Flexberry/Leaflet-WFST.git#v1.1.1

ここで、#v1.1.1 は特定のリリースのバージョンです。

初期化オプション

   options: {
        crs : L . CRS . EPSG3857 ,
        showExisting : true ,
        geometryField : 'Shape' ,
        url : '' ,
        typeNS : '' ,
        typeName : '' ,
        opacity : 1 ,
        style : {
            color : 'black' ,
            weight : 1
        }
    }

例

 const wfstPointOptions = {
  crs : L . CRS . EPSG4326 ,
  showExisting : true ,
  geometryField : 'geom' ,
  url : `http://localhost:8080/geoserver/wfs` ,
  typeNS : 'test' ,
  typeName : 'test' ,
  maxFeatures : 90 ,
  opacity : 1 ,
  style : function ( layer ) {
    // you can use if statemt etc
    return {
      color : 'black' ,
      weight : 1
    }
  } ,
} ;
const wfstPoint = new L . WFST ( wfstPointOptions , new L . Format . GeoJSON ( {
  crs : L . CRS . EPSG4326 ,
  pointToLayer ( geoJsonPoint , latlng ) {
    const layer = new L . CircleMarker ( latlng , {
      radius : 10 ,
    } ) ;
    return layer ;
  } ,
} ) ) ;
wfstPoint . addTo ( map ) ;
オプション名デフォルトコメント
crs L.CRS.EPSG3857レイヤーの空間参照システムは、ICRS を実装する必要があります (Proj4Leaflet など)。
show既存の真実レイヤー作成時に既存のフィーチャをロードする
ジオメトリフィールド'形'ジオメトリを保存するフィールド。非トランザクション サービスの場合は省略できる
URL - WFS URL (例: http://demo.opengeo.org/geoserver/osm/ows)
NS型-型名前空間
タイプ名-型名
typeNSName -名前空間名を入力します
名前空間Uri -名前空間URI
不透明度1レイヤーの不透明度
スタイル-リーフレットのベクトル スタイル。関数またはオブジェクト
フィルター-任意のフィルター。フィルターを参照
maxFeature -返される特徴量を制限する

基本的な WFS の例 - ビュー

 var map = L . map ( 'map' ) . setView ( [ 0 , 0 ] , 2 ) ;

var boundaries = new L . WFS ( {
    url : 'http://demo.opengeo.org/geoserver/ows' ,
    typeNS : 'topp' ,
    typeName : 'tasmania_state_boundaries' ,
    crs : L . CRS . EPSG4326 ,
    style : {
        color : 'blue' ,
        weight : 2
    }
} ) . addTo ( map )
  . on ( 'load' , function ( ) {
      map . fitBounds ( boundaries ) ;
  } )

メソッド

toGml(crs) 関数を使用してリーフレット クラスを拡張します。

  • L.マーカー
  • L.ポリゴン
  • L.ポリライン
  • L.マルチポリゴン
  • L.マルチポリライン
  • L.LatLngBounds

イベント

2 種類のイベントをトリガーします。

  • load - 「DescribeFeatureType」リクエストと「GetFeature」リクエストの両方が成功し、フィーチャがリーフレット レイヤーに正常に解析されたときにトリガーされます。
  • エラー - 「DescribeFeatureType」または「GetFeature」リクエストが失敗し、フィーチャがリーフレット レイヤーに解析されていない場合にトリガーされます。

マーカーのジオメトリは posNode として書き込み、他のすべてのレイヤーのジオメトリは posList として書き込みます。

フィルター

OGCフィルターエンコーディングv1.1.0の実現

フィルター実装は、フィルター要素の内部コンテンツのみを返します。

すべてのフィルター コンストラクターに関する考慮事項:

  • "expression" - propertyName、リテラル、演算子フィルターまたは関数
  • "propertyExpression" - この位置の引数が要素でなく、「式」メソッドでもない場合は、propertyName であると考えられます。
  • "literalExpression" - この位置の引数が要素ではなく、「式」でもない場合、リテラルであると考えられます。
名前コンストラクタ
ID
GmlObjectId L.Filter.GmlObjectId(値ID)
比較
プロパティは等しいL.Filter.EQ(propertyExpression firstArgument, literalExpression SecondArgument, bool matchCase)
プロパティが等しくないL.Filter.NotEQ(propertyExpression firstArgument, literalExpression SecondArgument, bool matchCase)
プロパティが未満であるL.Filter.LT(propertyExpression firstArgument, literalExpression SecondArgument, bool matchCase)
プロパティはより大きいL.Filter.GT(propertyExpression firstArgument, literalExpression SecondArgument, bool matchCase)
プロパティが小さいか等しいL.Filter.LEQ(propertyExpression firstArgument, literalExpression SecondArgument, bool matchCase)
プロパティが大きいか等しいL.Filter.GEQ(propertyExpression firstArgument, literalExpression SecondArgument, bool matchCase)
プロパティは似ていますL.Filter.Like(文字列プロパティ名,文字列 likeExpression,オブジェクト属性)
プロパティが Null であるL.Filter.IsNull(文字列プロパティ名)
プロパティは次の間ですL.Filter.IsBetween(propertyExpression firstArgument, literalExpression lowerBoundary, literalExpression upperBoundary)
オペレーター
追加L.Filter.Add(式, 式)
サブL.Filter.Sub(式, 式)
マルL.Filter.Mul(式, 式)
ディビジョンL.Filter.Div(式, 式)
論理
そしてL.Filter.And(式[, 式]*)
またはL.Filter.Or(式[, 式]*)
ないL.Filter.Not(式)
空間的
BボックスL.Filter.BBox(文字列プロパティ名、latLngBounds境界、ICRS crs)
等しいL.Filter.Equals(文字列プロパティ名、レイヤージオメトリ、ICRS crs)
ばらばらL.Filter.Disjoint(string propertyName, Layer geometry, ICRS crs)
タッチL.Filter.Touches(string propertyName, Layer geometry, ICRS crs)
内でL.Filter.Within(文字列プロパティ名、レイヤージオメトリ、ICRS crs)
重複L.Filter.Overlaps(文字列プロパティ名、レイヤージオメトリ、ICRS crs)
十字架L.Filter.Crosses(文字列プロパティ名、レイヤージオメトリ、ICRS crs)
交差するL.Filter.Intersects(文字列プロパティ名、レイヤージオメトリ、ICRS crs)
含まれていますL.Filter.Contains(文字列プロパティ名、レイヤージオメトリ、ICRS crs)
空間距離バッファ
D範囲内L.Filter.DWithin(文字列プロパティ名、レイヤージオメトリ、ICRS crs、値距離、文字列単位)
超えてL.Filter.Beyond(文字列プロパティ名、レイヤージオメトリ、ICRS crs、値距離、文字列単位)
他の
関数L.Filter.Function(文字列関数名[, 式]*)
プロパティ名L.Filter.propertyName(文字列名)
リテラルL.Filter.literal(値)

PropertyName と Literal は関数であり、Gml を直接返します。

例

機能ID

標準では、GmlObjectID と FeatureID という 2 つのフィルターがありますが、latest は非推奨としてマークされているため、実装されていません。

例： 

  var filter = new L . Filter . GmlObjectID ( 1 ) ;

結果の XML: 

  < ogc : Filter xmlns : ogc = " http://www.opengis.net/ogc " >
    < ogc : GmlObjectId xmlns : gml = " http://www.opengis.net/gml " gml : id = " 1 " />
  </ ogc : Filter >

プロパティは等しい

  var filter = new L . Filter . EQ ( 'city' , 'Perm' ) ;
  filter . toGml ( )

結果の XML: 

  < ogc : PropertyIsEqualTo >
    < ogc : PropertyName >city</ ogc : PropertyName >
    < ogc : Literal >Perm</ ogc : Literal >
  </ ogc : PropertyIsEqualTo >

プロパティは似ています

このフィルターはオプションの属性オブジェクトを受け入れます。 

 attributes: {
    wildCard : '*' ,
    singleChar : '#' ,
    escapeChar : '!' ,
    matchCase : true
  } 
  var filter = new L . Filter . Like ( 'city' , '*perm*' , { matchCase : false } ) ;
  filter . toGml ( )

結果の XML: 

  < ogc : ogc:PropertyIsLike wildCard = " * " singleChar = " # " escapeChar = " ! " matchCase = " false " >
    < ogc : PropertyName >city</ ogc : PropertyName >
    < ogc : Literal >*perm*</ ogc : Literal >
  </ ogc : ogc:PropertyIsLike >

Bボックス

例： 

    var filter = new L . Filter . BBox ( 'ogr_geometry' , L . latLngBounds ( L . latLng ( 40.712 , - 74.227 ) , L . latLng ( 40.774 , - 74.125 ) ) , L . CRS . EPSG4326 ) ;
    filter . toGml ( )

結果の XML: 

  < ogc : Filter xmlns : ogc = " http://www.opengis.net/ogc " >
    < ogc : BBOX >
      < ogc : PropertyName >ogr_geometry</ ogc : PropertyName >
      < gml : Envelope xmlns : gml = " http://www.opengis.net/gml " srsName = " EPSG:4326 " >
        < gml : lowerCorner >-74.227 40.712</ gml : lowerCorner >
        < gml : upperCorner >-74.125 40.774</ gml : upperCorner >
      </ gml : Envelope >
    </ ogc : BBOX >
  </ ogc : Filter >

交差する

例： 

  var filter = new L . Filter . Intersects ( 'ogr_geometry' , L . polygon ( [ L . latLng ( 40.712 , - 74.227 ) , L . latLng ( 40.774 , - 74.125 ) , L . latLng ( 40.734 , - 74.175 ) ] ) , L . CRS . EPSG4326 ) ;
  filter . toGml ( ) ;

結果の XML: 

  < ogc : Filter xmlns : ogc = " http://www.opengis.net/ogc " >
    < ogc : Intersects >
      < ogc : PropertyName >ogr_geometry</ ogc : PropertyName >
      < gml : Polygon xmlns : gml = " http://www.opengis.net/gml " srsName = " EPSG:4326 " srsDimension = " 2 " >
        < gml : exterior >
          < gml : LinearRing srsDimension = " 2 " >
            < gml : posList >-74.227 40.712 -74.125 40.774 -74.175 40.734 -74.227 40.712</ gml : posList >
          </ gml : LinearRing >
        </ gml : exterior >
      </ gml : Polygon >
    </ ogc : Intersects >
  </ ogc : Filter >

WFST の例

編集プラグイン - Leaflet.Editable 

 L . WFST . include ( MultiEditableMixin ) ;

var wfst = new L . WFST ( {
    url : 'http://myserver/geoserver/ows' ,
    typeNS : 'myns' ,
    typeName : 'POIPOINT' ,
    style : {
        color : 'blue' ,
        weight : 2
    }
} ) . addTo ( map ) . once ( 'load' , function ( ) {
            map . fitBounds ( wfst ) ;
            wfst . enableEdit ( ) ;
        } ) ;

map . on ( 'editable:created' , function ( e ) {
    wfst . addLayer ( e . layer ) ;
} ) ;

map . on ( 'editable:editing' , function ( e ) {
    wfst . editLayer ( e . layer ) ;
} ) ;

"wfs:Transaction" POST リクエストを作成するには、save() メソッドを呼び出します (Leaflet.EasyButton を使用した例) 

 L . easyButton ( 'fa-save' , function ( ) {
     wfst . save ( ) ;
 } , 'Save changes' ) ;

レイヤーのプロパティ

 //simple layer
layer = new L . Marker ( [ 0 , 0 ] ) ;
layer . feature = {
  id : 1 ,
  properties : {
    a : 'a' ,
    b : 'b'
  }
} ;

//get value by key 'a'
var a = layer . getProperty ( 'a' ) ;

//change values
layer . setProperties ( {
  a : 'b' ,
  b : 'a'
} ) ;

//add new property
layer . setProperties ( {
  c : 'c'
} ) ;

//delete properties
layer . deleteProperties ( [ 'a' , 'b' , 'c' ] ) ;

デモ

GML 読み取り形式のデモ

  • マーカー
  • ポリゴン
  • ポリライン

GeoJSON 読み取り形式のデモ

  • ポリゴン

デモフィルターボックス

  • Bボックス

ライセンス

MITライセンス

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて