【Python@GIS】在leaflet 加载 flask 后台数据（一）因为前期项目一个小的需求，需要将已有的wkt

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

因为前期项目一个小的需求，需要将已有的wkt数据在地图上叠加显示。处理的方式有很多，但是都感觉不是特别方便。因为在之前看到过有类是的在线处理工具，如geosjon生成工具和图层简化工具等，加上前段时间学习了flask，python开发 web的框架，所以想着集合flask 、gdal和leaflet做一个web端的转换工具；
环境搭建
- python环境:利用anaconda管理工具，python版本3.6，flask等插件直接通过anaconda下载
- gdal：通过anaconda工具直接下载或者 conda install gdal
- 地图：leafletjs最新版本
- UI：直接使用的bootstrap
- 开发工具：pycharm
创建项目
- 直接通过pycharm新建项目，选择flask，修改项目文件路径，然后配置Python环境，最后点击创建
- 引入web端jsapi

创建web页面引入js和css文件

  ```html
      <link rel="stylesheet" href="{{ url_for('static',filename='libs/bootstrap/css/bootstrap.css') }}">
      <link rel="stylesheet" href="{{ url_for('static',filename='libs/leaflet/leaflet.css') }}">
      <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
      
      <script src="{{ url_for('static',filename='libs/leaflet/leaflet.js') }}"></script>
      <script src="{{ url_for('static',filename='libs/bootstrap/js/bootstrap.js') }}"></script>
      <script src="{{ url_for('static',filename='libs/jquery-3.4.1.min.js')}}"></script>
  ```

初始化地图

    var map;
    function initMap(){
    
    map =L.map('map',{
        center:[30.66655,104.067108],
        zoom:10
    })     
    addBaseLayer(); 
    }
    
    function addBaseLayer(){
        var option = {
            maxZoom: 17,
            minZoom: 1,
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            attribution:
                "<a target='_blank' href='https://www.tianditu.gov.cn/'>天地图</a> ",
    
        }
        L.tileLayer('https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图key', option).addTo(map);
        L.tileLayer('https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图key', option).addTo(map);
    
    }

app.py 中路由

from flask import Flask,render_template
@app.route('/')
def index_page():
    return  render_template('index.html')

选中 app.py 右键运行

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

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