【Python@GIS】在leaflet 加載 flask 後臺數據 （二）

關注公衆號"seeling_GIS"，回覆『前端視頻』，領取前端學習視頻資料

• 完成效果圖
  

源碼獲取：關注公衆號，回覆：flask

• 創建 ogr_geometry.py 文件

  # *_* coding:utf8 *_* 
  
    from osgeo import  ogr 
  
    # wkt 轉 geojson
    def create_wkt_to_geojson(wkt):
        geo = ogr.CreateGeometryFromWkt(wkt)
        return geo.ExportToJson()
  

• 修改 app.py

    # 引入 
    import json
  
    from flask import Flask,render_template,request
  
    from flask_wtf.csrf import CSRFProtect
  
    from gis.ogr_geometry import create_wkt_to_geojson
  # 新增 wkt_to_geojson
    @csrf.exempt
    @app.route('/gis/wkttogeojson/',methods=['POST'])
    def wkt_to_geojson():
  
        data  = json.loads(request.data.decode())
        print(data)
        inwkt = data.get('inwkt')
  
        outgeojson = create_wkt_to_geojson(inwkt)
  
        print(inwkt,outgeojson)
  
        return  outgeojson
  
  

• 修改 index.html 新增面板

   <div class="panel   panel-primary panel-postion">
   <div class="panel-heading">
       <h3 class="panel-title">WKT TO GEOJSON</h3>
   </div>
   <div class="panel-body">
       <form   name="fm">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
           <textarea name="inwkt"   cols="40"   rows="4" placeholder="請輸入wkt"   style="OVERFLOW:   hidden"></textarea><br />
           <textarea name="outgeojson"   cols="40"   rows="4" placeholder="輸出geojson"   style="OVERFLOW:   hidden">{{ outgeojson }}</textarea><br /> 
       </form> 
       <button class="btn btn-primary" onclick="transform()" >確定</button>
 </div>
</div>

• 修改 index.js 新增 transform 方法

  function  transform(){
    var data = JSON.stringify({
        inwkt:document.fm.inwkt.value
    })
    $.ajax({
        url: "/gis/wkttogeojson/",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: data,
        dataType: "json",
        success: function (data) {
            document.fm.outgeojson.value=JSON.stringify(data)
            var geojsonLayer =  L.geoJSON(data).addTo(map)
            map.flyToBounds(geojsonLayer.getBounds())
        }
    })
    }

---

更多內容，歡迎關注公衆號