Leaflet WFST

แผ่นพับ-WFST

เลเยอร์ไคลเอ็นต์ OGC WFS-T สำหรับแผ่นพับ

ติดตั้งปลั๊กอิน

ผ่านทางเวลา 13.00 น.:

  npm i leaflet-wfst --save

ผ่านทาง Bower:

  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 ) ;

ชื่อตัวเลือก	ค่าเริ่มต้น	ความคิดเห็น
cr	แอล.ซีอาร์เอส.EPSG3857	ระบบอ้างอิงเชิงพื้นที่สำหรับเลเยอร์ ควรใช้ ICRS เช่น Proj4Leaflet
แสดงที่มีอยู่	จริง	โหลดคุณสมบัติที่มีอยู่ในเลเยอร์การสร้าง
เรขาคณิตField	'รูปร่าง'	ฟิลด์สำหรับจัดเก็บรูปทรงเรขาคณิต สำหรับบริการที่ไม่ใช่ธุรกรรมอาจละเว้นได้
URL	-	URL ของ WFS เช่น http://demo.opengeo.org/geoserver/osm/ows
ประเภทNS	-	พิมพ์เนมสเปซ
ประเภทชื่อ	-	พิมพ์ชื่อ
พิมพ์NSName	-	พิมพ์ชื่อเนมสเปซ
เนมสเปซUri	-	URI เนมสเปซ
ความทึบ	1	ความทึบของชั้น
สไตล์	-	สไตล์เวกเตอร์ใบปลิว ฟังก์ชั่นหรือวัตถุ
กรอง	-	ตัวกรองใด ๆ ดูตัวกรอง
คุณสมบัติสูงสุด	-	จำกัดจำนวนคุณสมบัติที่ส่งคืน

ตัวอย่าง 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.MultiPolygon
• แอล.มัลติโพลีไลน์
• L.LatLngBounds

กิจกรรม

ทริกเกอร์เหตุการณ์สองประเภท:

• โหลด - ทริกเกอร์เมื่อทั้งคำขอ 'DescribeFeatureType' และ 'GetFeature' สำเร็จ และคุณสมบัติต่างๆ ได้รับการแยกวิเคราะห์เป็นเลเยอร์แผ่นพับสำเร็จแล้ว
• ข้อผิดพลาด - ทริกเกอร์เมื่อคำขอ 'DescribeFeatureType' หรือ 'GetFeature' ใด ๆ ล้มเหลว และฟีเจอร์ไม่ได้รับการแยกวิเคราะห์เป็นเลเยอร์แผ่นพับ

เรขาคณิตของเครื่องหมายจะเขียนเป็น posNode สำหรับเรขาคณิตของเลเยอร์อื่นๆ ทั้งหมดจะเขียนเป็น posList

กรอง

การดำเนินการเข้ารหัสตัวกรอง OGC v1.1.0

การใช้งานตัวกรองส่งคืนเนื้อหาภายในขององค์ประกอบตัวกรองเท่านั้น

ข้อควรพิจารณาบางประการสำหรับตัวสร้างตัวกรองทั้งหมด:

• "expression" - propertyName, ตัวอักษร, ตัวกรองตัวดำเนินการ หรือฟังก์ชัน
• "propertyExpression" - หากอาร์กิวเมนต์ในตำแหน่งนี้ไม่ใช่องค์ประกอบและไม่ใช่วิธี "การแสดงออก" ก็สงสัยว่าจะเป็น propertyName
• "literalExpression" - หากอาร์กิวเมนต์ในตำแหน่งนี้ไม่ใช่ Element และไม่ใช่ "expression" ก็สงสัยว่าจะเป็นตัวอักษร

ชื่อ	ตัวสร้าง
บัตรประจำตัวประชาชน
GmlObjectId	L.Filter.GmlObjectId(รหัสค่า)
การเปรียบเทียบ
คุณสมบัติเท่ากับ	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)
คุณสมบัติIsLike	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(การแสดงออก)
เชิงพื้นที่
บีบ็อกซ์	L.Filter.BBox (ชื่อคุณสมบัติสตริง ขอบเขต latLngBounds, ICRS crs)
เท่ากับ	L.Filter.Equals(ชื่อคุณสมบัติสตริง, เรขาคณิตของเลเยอร์, ​​ICRS crs)
ไม่ปะติดปะต่อ	L.Filter.Disjoint(ชื่อคุณสมบัติสตริง, เรขาคณิตของเลเยอร์, ​​ICRS crs)
สัมผัส	L.Filter.Touches (ชื่อคุณสมบัติสตริง, เรขาคณิตของเลเยอร์, ​​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)
บัฟเฟอร์ระยะห่างเชิงพื้นที่
ดีภายใน	L.Filter.DWithin(ชื่อคุณสมบัติสตริง, เรขาคณิตของเลเยอร์, ​​ICRS crs, ระยะทางค่า, หน่วยสตริง)
เกิน	L.Filter.Beyond(ชื่อคุณสมบัติสตริง, เรขาคณิตของเลเยอร์, ​​ICRS crs, ระยะทางของค่า, หน่วยสตริง)
อื่น
การทำงาน	L.Filter.Function(สตริงชื่อฟังก์ชัน[, นิพจน์]*)
ชื่อทรัพย์สิน	L.Filter.propertyName(ชื่อสตริง)
ตัวอักษร	L.Filter.literal(ค่า)

PropertyName และ Literal คือฟังก์ชันและส่งกลับ Gml โดยตรง

ตัวอย่าง

รหัสคุณลักษณะ

ตามมาตรฐานจะมีตัวกรองสองตัว - GmlObjectID และ FeatureID แต่ตัวกรองล่าสุดถูกทำเครื่องหมายว่าเลิกใช้แล้ว ดังนั้นจึงไม่มีการใช้งาน

ตัวอย่าง:

  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 >

คุณสมบัติIsLike

ตัวกรองนี้ยอมรับออบเจ็กต์แอตทริบิวต์ทางเลือก:

 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 >

บีบ็อกซ์

ตัวอย่าง:

    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

• รูปหลายเหลี่ยม

bbox ตัวกรองสาธิต

• บีบ็อกซ์

ใบอนุญาต

ใบอนุญาตเอ็มไอที