在 leaflet 加载 flask 后台数据 （3）
webgis 2020-02-02
python
flask
leaflet
# 完成效果图
新增绘制功能，并将绘制的绘制对象转化成 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()
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 修改 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})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 修改 index.html 新增绘制功能的引用和对控件的实例化
function addDrawControl() {
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> 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);
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 修改 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21