【Python@GIS】在leaflet 加载 flask 后台数据 （三）

关注公众号"seeling_GIS"，回复『前端视频』，领取前端学习视频资料

• 完成效果图

  
  
  flask_完成_3.png

新增绘制功能，并将绘制的绘制对象转化成geojson和wkt数据，并在右侧文本框中显示输出

主要是调用了 ogr的 CreateGeometryFromJson方法

• 修改 ogr_geometry.py 文件

  # *_* coding:utf8 *_*  
    from osgeo import  ogr  
    # geojson 转 wkt 
    def create_geojson_to_wkt(json):
        newjson = json.replace('\t','').replace('\n','')
        geo = ogr.CreateGeometryFromJson(newjson)
        return  geo.ExportToWkt()
  
  

• 修改 app.py

  @app.route('/gis/geojsontowkt/',methods=['POST'])
  def geojson_to_wkt():
  
      data  = json.loads(request.data.decode())
  
      value = data.get('value')
  
      wkt = create_geojson_to_wkt(value)
  
      print(wkt)
  
      return jsonify({ "wkt":wkt})
  
  

• 修改 index.html 新增绘制功能的引用和对控件的实例化

  
  function  addDrawControl() {
  
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '© OpenStreetMap contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }); 
        drawnItems = L.featureGroup().addTo(map);
    L.control.layers({
        'osm': osm.addTo(map),
        "google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
            attribution: 'google'
        })
    }, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
    map.addControl(new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly: {
                allowIntersection: false
            }
        },
        draw: {
            polygon: {
                allowIntersection: false,
                showArea: true
            }
        }
    }));
  
    map.on(L.Draw.Event.CREATED,  (event)=> {
        var layer = event.layer;
  
        setGeoJSONText(layer.toGeoJSON().geometry)
        json2wkt()
        drawnItems.addLayer(layer);
    });
  }
  

• 修改 index.js 重构方法，并 新增 json2wkt方法

  function doPost(url,data,func) {
  
    var data_str = JSON.stringify({
        value:data
    })
    $.ajax({
        url,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: data_str,
        dataType: "json",
        success:func,
        error:errorFunc
    })
  }
  function geoToWkt(data) { 
      setInWkt(data.wkt)
  }
  function  json2wkt(){
    // drawnItems.clearLayers();
    doPost("/gis/geojsontowkt/",document.fm.outgeojson.value,geoToWkt)
  }
  

---

更多精彩 扫描二维码或者搜索公众号 ‘seeling_GIS’

seeling_GIS