geoserver发布瓦片_webGIS实践：4_4_python django整合geoserver+openlayer前后端

最新推荐文章于 2024-02-20 13:43:17 发布
最新推荐文章于 2024-02-20 13:43:17 发布
阅读量360 收藏 1
点赞数 1
文章标签： geoserver发布瓦片 geoserver发布瓦片数据 openlayer xyz加载 vue openlayer不能彻底删除图层

接上文，前端页面访问django转发的WMS服务，而不直接访问geoserver发布的。

geoserver.py

添加两个方法：

# 渲染geoserver页面
def geoserverget(request):
    return render(request, 'GeoserverOL.HTML')

# 提交 gml到geoserver
def geoserverpost(request):
    if request.POST:
        head = {"Content-Type": "text/xml; charset=UTF-8", "Connection": "close"}
        r = requests.post('http://localhost:8080/geoserver/wfs', data=request.POST['gml'], headers=head)
    return HttpResponse(r.text)

二、urls.py

增加两个url。

url(r'^geoserver$', geoserver.geoserverget),
url(r'^geoserverpost$', geoserver.geoserverpost),

三、页面

首先需要下载一个脚本jquery.cookie.js，放到静态文件夹中。因为django会设置cookie验证，以免恶意攻击，这个脚本就是为了获取cookie，拼接请求头的。（文后附有git连接）

3de412446d86e8f1b3928e193f65f4be.png

在html中，在引入jquery-1.7.2.js后，引入jquery.cookie.js。

Get请求直接替换url：

url: '/getwmts?'

var url4326='/getfeature?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=gismap%3Av6_time_pref_pgn_utf_wgs84_geoserver&LAYERS=gismap%3Av6_time_pref_pgn_utf_wgs84_geoserver&exceptions=application%2Fvnd.ogc.se_inimage&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4326&STYLES=&WIDTH=101&HEIGHT=101&BBOX='+(t4326[0]-0.0001).toString()+'%2C'+(t4326[1]-0.0001).toString()+'%2C'+(t4326[0]+0.0001).toString()+'%2C'+(t4326[1]+0.0001).toString();

post请求要加请求头：

headers: {"X-CSRFToken": $.cookie('csrftoken')},

全部代码如下：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>openlayer与geoserver交互</title>
    <link rel="stylesheet" href="{% static 'ol/ol.css'%}">
    <script src="{% static 'ol/ol.js'%}"></script>
    <script src="{% static 'jquery-1.7.2.js'%}"></script>
    <script src="{% static 'jquery.cookie.js'%}"></script>
    <style type="text/css">
        #map,
        html,
        body {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<form class="form-inline">
  <label>操作方式 &nbsp;</label>
  <select id="interaction">
    <option value="search">查看</option>
    <option value="insert">增加</option>
    <option value="modify">修改</option>
    <option value="delete">删除</option>
  </select>
  <label>先操作对象，再点击 &nbsp;</label>
      <input type="button" id="creategml" name="name" value="提交" />
</form>
<div id="map"></div>
<div id="attributetable">
    <table>
        <thead>
        <tr>
            <th>fid</th>
            <th>name_py</th>
            <th>name_ch</th>
        </tr>
        </thead>
        <tbody id="attributetbody">
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    //线上线下访问url不同，可变配置提出
    var baseurl ='http://localhost:8080/';
    // 获取坐标系
    var proj4326=ol.proj.get('EPSG:4326');
    // 打印坐标系的轴方向，默认的轴方向为neu，生成GML文件，经纬度会是反的
    console.log(proj4326.getAxisOrientation()); 
    // 新建坐标系，修改轴方向为enu，经度、纬度、高程
    var proj = new ol.proj.Projection({  code: 'EPSG:4326',  
        axisOrientation: 'enu',
        units:proj4326.getUnits(),
        canWrapX:true,
        extent:proj4326.getExtent(),
        global:true,
        worldExtent:proj4326.getWorldExtent(),
    });
    // 覆盖原来的4326坐标系，目的是为了保证生成GML文件中经纬度不反
    ol.proj.addProjection(proj);
    var proj4326new=ol.proj.get('EPSG:4326');
    console.log(proj4326new);

    //视窗，openlayer默认坐标系是平面墨卡托，设定为WGS84
    var view = new ol.View({
        center: [116.400146,40.250184],
        zoom: 9,
        projection: 'EPSG:4326',
    });
    //图层，加载腾讯底图和geoserver发布的wmts
    var layers = [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"
            })
        }),
        new ol.layer.Image({
            source: new ol.source.ImageWMS({
                ratio: 1,
                url: '/getwmts?',//这个可以打开geoserver的preview，看openlayer页面截取url
                // 请求参数
                params: {
                    'SERVICE': 'WMS',
                    'VERSION': '1.1.0',
                    'REQUEST': 'GetMap',
                    'FORMAT': 'image/png',
                    'TRANSPARENT': true,
                    'tiled': true,
                    'LAYERS': 'gismap:v6_time_pref_pgn_utf_wgs84_geoserver',//图层，前面是工作空间，后面是图层名，
                    'exceptions': 'application/vnd.ogc.se_inimage',
                    'singleTile': true//单瓦片，渲染成一张图片
                }
            }),
        }),
    ];
    //地图
    var map = new ol.Map({
        target: 'map',
        layers: layers,
        view: view
    });
    // 添加工具图层，新增、修改、删除选择都在这个图层上进行
    var source = new ol.source.Vector({ wrapX: false });
    var vector = new ol.layer.Vector({
        source: source,
        style: polygonStyleFunction
    });
    map.addLayer(vector);
    // 仅以绘制面举例
    var draw = new ol.interaction.Draw({
            source: source,
            type: "Polygon"
    });
    // 定义选择控件与修改控件
    var select = new ol.interaction.Select({
        wrapX: false
    });
    var modify = new ol.interaction.Modify({
        features: select.getFeatures()
    });
    // 变化时触发
    var typeInteraction = document.getElementById('interaction');
    typeInteraction.onchange = function() {
            map.removeInteraction(select);
            map.removeInteraction(modify);
            map.removeInteraction(draw);
        if (typeInteraction.value=='insert'){
            map.addInteraction(draw);
        }
        if (typeInteraction.value=='modify'){
            map.addInteraction(select);
            map.addInteraction(modify);
        }
    };

    // 完成绘制（drawend）时激活
    draw.once("drawend",function (e) {
        // draw工具不可用
        draw.setActive(false);
        // 属性框
        var tabletxt='<tr><td>'
        +'<input type="text" id="fid" value="fid" />'+'</td><td>'
        +'<input type="text" id="name_py" value="name_py" />'+'</td><td>'
        +'<input type="text" id="name_ch" value="name_ch" />'+'</td></tr>';
        $("#attributetbody").append(tabletxt);
    });
    // 点击按钮向geoserver提交数据
    $("#creategml").click(function() {
        if (typeInteraction.value=='search'){
            alert('支持insert update delete');
        }
        // 获取feature列表
        var features=source.getFeatures();
        // 获取一个feature
        var feature=features[0];
        var fid=$("#fid").val();
        var name_py=$("#name_py").val();
        var name_ch=$("#name_ch").val();
        // update和delete的时候需要fid
        feature.setId(fid);
        feature.set('name_py',name_py);
        feature.set('name_ch',name_ch);
        // 创建WFS解析器 
        var WFSTSerializer = new ol.format.WFS();
        var insertFeatures=[];
        var updateFeatures=[];
        var deleteFeatures=[];
        if (typeInteraction.value=='insert'){
            insertFeatures.push(feature);
        }
        if (typeInteraction.value=='modify'){
            var updatefeature=select.getFeatures().getArray()[0];
            updatefeature.setId(fid);
            updatefeature.set('name_py',name_py);
            updatefeature.set('name_ch',name_ch);            
            updateFeatures.push(updatefeature);
        }
        if (typeInteraction.value=='delete'){
            deleteFeatures.push(feature);
        }
        // 格式：writeTransaction(inserts, updates, deletes, options)
        // updates和deletes都需要要素有唯一ID，进行索引
        // insert因为是新增，所以不需要
        var featObject = WFSTSerializer.writeTransaction(insertFeatures,
            updateFeatures, deleteFeatures, {
                featureNS: 'http://geoserver/mapgis',//工作区URI
                featurePrefix: 'gismap',//工作区名称
                featureType: 'gismap:v6_time_pref_pgn_utf_wgs84_geoserver',//图层名称
                srsName: 'EPSG:4326',//坐标系
        });
        var serializer = new XMLSerializer();
        var featString = serializer.serializeToString(featObject);
        // 打印到控制台看看效果，openlayer默认生成的GML中几何字段名为geometry
        console.log(featString);
        // 清空属性表
        $("#attributetable").html('<table><thead><tr><th>fid</th><th>name_py</th><th>name_ch</th></tr></thead><tbody id="attributetbody"></tbody></table>');
        // 上传到geoserver
        $.ajax({
            type: 'POST',
            url: '/geoserverpost',
            headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrftoken，并设置到请求头中
            {#contentType:'application/json',#}
            data: {'gml':featString},
            {#dataType: 'json',#}
            success: function(data){
                source.removeFeature(feature);
                console.log(data);
            },
            error:function(data){
                source.removeFeature(feature);
                console.log(data);
            }
        });
    })

    //地图点击事件
    $("#map").click(function (e) {
        if (typeInteraction.value=='insert'){
            return;
        };
        if (typeInteraction.value=='modify'){
            return;
        };
        if (typeInteraction.value=='delete'){
            return;
        };

        //获取地图上点击的地理坐标，WGS84坐标系
        var t4326=map.getEventCoordinate(e);
        //构造请求url
        var url4326='/getfeature?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=gismap%3Av6_time_pref_pgn_utf_wgs84_geoserver&LAYERS=gismap%3Av6_time_pref_pgn_utf_wgs84_geoserver&exceptions=application%2Fvnd.ogc.se_inimage&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4326&STYLES=&WIDTH=101&HEIGHT=101&BBOX='+(t4326[0]-0.0001).toString()+'%2C'+(t4326[1]-0.0001).toString()+'%2C'+(t4326[0]+0.0001).toString()+'%2C'+(t4326[1]+0.0001).toString();
        $.ajax(
            {
                url:url4326,
                type:'GET',
                dataType:'json',
                headers:{'Content-Type':'application/json;charset=utf8'},
                success:function(data){
                    //这个方法直接把geojson转为feature数组
                    features=(new ol.format.GeoJSON()).readFeatures(data);
                    // 将feature数组中第一个feature放到source中
                    source.addFeature(features[0]);
                    //更新属性表
                    var fid=data['features'][0]['id'];
                    var properties=data['features'][0]['properties'];
                    var name_py=properties['name_py'];
                    var name_ch=properties['name_ch'];
                    var tabletxt='<tr><td>'
                    +'<input type="text" id="fid" value="'+fid+'" />'+'</td><td>'
                    +'<input type="text" id="name_py" value="'+name_py+'" />'+'</td><td>'
                    +'<input type="text" id="name_ch" value="'+name_ch+'" />'+'</td></tr>';
                    $("#attributetbody").append(tabletxt);
                },
                error:function(data){
                    console.log('faile');
                    console.log(data);
                }
            }
        );
    });
    //制图风格，标注内容要从要素中获取，每个要素的name_ch属性不同，所以制图风格是方法，而不是静态的
    function polygonStyleFunction(feature) {
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(192, 0, 0, 1)',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'rgba(192, 192, 192, 0.5)'
            }),
            text: createTextStyle(feature)
        });
    };
    //创建注记
    function createTextStyle(feature) {
        return new ol.style.Text({
            font: '20px Microsoft YaHei',
            text:  getText(feature),
            fill: new ol.style.Fill({
                color: 'rgba(192, 0, 0, 1)'
            }),
            stroke: new ol.style.Stroke({color: 'rgba(255, 255, 255, 1)', width: 1}),
        })
    };
    //获取要素属性内容
    function getText(feature) {
        if (feature.get('name_ch')){
            return feature.get('name_ch').toString();            
        } else{
            return 'tool';
        }
    };
</script>
<style type="text/css">
    #map {
        width: 100%;
        height: 100%;
    }
    #attributetable {
        width: 100%;
        height: 5%;
        margin: 10px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
    }
    th,td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }
    th {
        background-color: #C00000;
        font: bold 16px "微软雅黑";
        color: #fff;
    }
    td {
        font: 14px "微软雅黑";
    }
    tbody tr {
        background-color: #f0f0f0;
    }
    tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
    }
</style>
</html>

四、git连接

工程代码git地址：https://github.com/yimengyao13/gismap-python-django.git

前端的js库，也可以从git上下载。

weixin_39636707
关注
webGIS实践（geoserver+openlayer+django）4_4_python django整合geoserver+openlayer前后端
吴道简的博客
05-17 902
接上文，前端页面访问django转发的WMS服务，而不直接访问geoserver发布的。 一、geoserver.py 添加两个方法： # 渲染geoserver页面 def geoserverget(request): return render(request, 'GeoserverOL.HTML') # 提交 gml到geoserver def geoserverpost(request): if request.POST: head = {"Co..
GeoServer+Django(python3)+leaflet构建地图服务
吴道简的博客
06-17 2063
做个最简单的，地图服务用GeoServer发布；Django做后端转发服务请求，leaflet做前端渲染并实现绘制功能。 Python是python3.7，IDE是社区版pycharm。 GeoServer如何发布地图，并测试数据位置见视频教程与图文教程： https://zhuanlan.zhihu.com/p/377826133 本例代码见git，如果觉得有用，辛苦帮忙点个star： https://github.com/yimengyao13/geoserver_django_leaflet
带Alpha通道的TIFF文件在GeoServer发布PNG瓦片失败的问题
最新发布
诗酒趁养狗
02-20 602
但从报错也看不出所以然，只能一点点对比QGIS转坐标系之后的文件和ArcGIS转坐标系之后文件的区别。最后发现，虽然两个文件用ArcGIS看都是四个波段，但是如果用Photoshop打开，不能发布png的文件中有Alpha通道，能发布的文件没有Alpha通道。Alpha通道是计算机图形学中的术语，指的是特别的通道，意思是“非彩色”通道，主要是用来保存选区和编辑选区。理论上Alpha通道跟透明度没有直接关系，但是也可以用Alpha通道来存透明度。错误是显示png编码失败，找不到扫描线提取器。
GeoServer扩展功能之发布矢量瓦片
夜郎King的博客
10-01 1万+
本文将首先简单介绍矢量瓦片的基本知识，同时将矢量瓦片和栅格瓦片进行简单对比，最后以GeoServer为例，重点讲述在GeoServer中如何发布矢量瓦片，并在GeoServer中进行数据浏览展示。
通过geoserver发布地图瓦片数据
热门推荐
moyebaobei1的博客
03-06 2万+
最近项目需要离线部署地图服务，中间找了一个合作的公司。现在项目接近尾声，总体感觉合作的公司不成熟，我们自己之前更是没有接触过这种地理信息服务相关的业务，中间也有各种甩锅的经历，这不是重点就不细说了。 项目始于Cesium, 中间结合了倾斜模型，模型单体化，离线地图服务部署。今天 主要说一下离线地图服务部署的问题。 地图数据来源 离线地图数据来源，这里需要瓦片数据，一般有好多公司提供下载...
webGIS实践（geoserver+openlayer+django）4_2_python django整合geoserver wms服务
吴道简的博客
05-17 984
转发geoserver的WMS服务需要三个方法，一个是get瓦片参数，返回png图片；一个是get矢量要素参数，返回json；一个是post gml到后台。 一、get png 在geoserver.py中添加一个方法。 import requests # 获取wmts服务 def wmts(request): url='http://localhost:8080/geoserver/wms?SERVICE=WMS&VERSION=1.1.0&'+\ 'REQ
webGIS实践（geoserver+openlayer+django）3_0_openlayer加载瓦片地图
吴道简的博客
05-16 962
本章开始地图的前端渲染。 因为geoserver内部嵌的前端是openlayer，所以先讲openlayer的使用。 但openlayer相对来说，还是要难一些，小众一些，所以不想用openlayer的，可以看后面的leaflet专题，脚本库不一样，实现效果一样。 本文主要看openlayer怎么加载地图。 一、js库代码下载 前端脚本库可以用网络资源，也可以下载下来，但openlayer官网不是很稳定，所以可以把examples、docs、sources都下载下来。 下载链接：https.
webGIS实践（geoserver+openlayer+django）4_0_python django后端搭建web工程
吴道简的博客
05-17 855
仅有geoserver发布的WMS服务和前端页面，是无法部署到主机上提供服务的，所以，我们需要有一个后台。 前面《从零开始，构建电子地图网站》中已经讲过了JAVA springboot工程的搭建。 这里再讲一下，怎么用Python django搭建一个后台，Python常用于数据处理，它上手要比JAVA快。 一、环境部署 IDE：pyCharm Python：Python3.7 打开cmd，先升级pip，运行python -m pip install –upgrade pip。 接着运行：pi
webGIS实践（geoserver+openlayer+django）4_3_python django配置静态文件
吴道简的博客
05-17 540
一、配置js和css 网页访问需要配置的图片、js、css都是静态文件。配置静态文件的目的是，当程序启动的时候，可以通过url来获取这些内容。 settings.py中添加： STATIC_URL = '/static/' STATICFILES_DIRS=[ os.path.join(BASE_DIR, "static_files"), ] 新建一个static_files文件夹，静态文件都放在这里面。 将ol.js和ol.css复制到static...
webGIS实践（geoserver+openlayer+django）3_1_openlayer展绘点线面注记
吴道简的博客
05-16 429
上一篇已经讲了，怎么加载瓦片地图。 这篇就看看怎么简单的渲染矢量点线面数据。 最简单的，绘制点线面注记。 效果长这样： 新建一个文件FeatureOL.HTML。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>openlayer渲染矢量要素</title> &l...
PostGIS, GeoDjango+OpenLayers 三者结合实现webgis
12-26
PostGIS, GeoDjango，OpenLayers 三者结合实现webgis。
webGIS实践（geoserver+openlayer+django）4_1_python django实现http get和post
吴道简的博客
05-17 648
因为我们要用django做geoserver+openlayer的后端，所以只看get和post怎么实现就行了。 一、结构 工程结构如下图： 在新建工程的基础上，新建了一个gismap/geoserver.py；在templates中新建了两个页面get.html和post.html。 二、程序 1. geoserver.py 一共三个方法，一个是get请求，一个是post请求，一个是渲染get页面。 # -*- coding: utf-8 -*- from django.h..
webGIS实践（geoserver+openlayer+django）2_1_geoserver部署与图层发布（Linux）
吴道简的博客
05-16 618
接上文。使用linux系统发布，这里用的腾讯云。 一、修改端口号 因为发布程序，端口号不能冲突。我们之前已经有一个程序占用8080端口了，所以需要把geoserver程序的端口号改一下。 （如果没有需要，可以不改。） 修改\geoserver-2.16.2-bin\geoserver-2.16.2\start.ini文件，将： jetty.port=8080 修改为： jetty.port=8084 二、安装字体 因为图层注记需要中文字体，所以我们需要确保云主机上有中文字体。 这里.
webGIS实践（geoserver+openlayer+django）3_6_openlayer与geoserver交互增删改查
吴道简的博客
05-17 770
一、效果 操作方式选择 查看，在图面上点选，可以渲染对应的矢量要素，表格中有要素的属性，点击 提交，会提示只支持insert、update、delete。 操作方式选择 增加，切换到绘制，可以在图面上绘制几何对象，完成绘制后，在属性表中修改属性，点击 提交，完成新增。 操作方式先 查看，选中对象，操作方式切换到 修改，可以修改矢量要素的几何和属性，点击 提交，完成新增。 操作方式先 查看，选中对象，操作方式切换到 删除，可以将选中的要素删除。 二、代码 增加...
geoserver发布瓦片_webGIS实践：geoserver+openlayer+django目录索引
weixin_39613839的博客
11-29 77
吴瑨map：webGIS实践：0_0_目标确立与拆解吴瑨map：webGIS实践：1_0_数据获取与数据入库吴瑨map：webGIS实践：2_0_geoserver部署（window）吴瑨map：webGIS实践：2_1_geoserver部署与图层发布（Linux）吴瑨map：webGIS实践：2_2_geoserver style配置与QGIS连接数据库配图吴瑨map：webGIS实践：2_3...
Geoserver静态瓦片服务
我就是那个帕吉
07-07 1960
愿你出走半生,归来仍是少年！
使用openlayers加载geoserver发布的arcgis瓦片
chengbo_eva的博客
06-08 1532
使用openlayers加载geoserver发布的arcgis瓦片
webGIS实践（geoserver+openlayer+django）0_0_目标确立与拆解
吴道简的博客
05-16 689
之前已经完成了，从零开始，构建电子地图网站。 索引目录参见：https://blog.csdn.net/sinat_41310868/article/details/105447836 数据库用的是postgresql，后端用的是springboot2，前端用的是leaflet。 地图可展示，可交互，这已经满足了大部分的需求了。 但是当我们需要展示大量数据，例如几万个面，几百万个点，很难通过上述方式实现，数据传输和页面渲染都会非常吃力。 这种情况下，怎么办呢？ 常规的办法是，先将数据在后端.
geoserver发布瓦片数据_使用GeoServer发布Shapfile数据
weixin_39743414的博客
11-23 1089
1.准备数据 实验数据：链接：https://pan.baidu.com/s/1ThIwRpRIAiOQGeQba5UO6g 提取码：mvd5 下载nyc_roads.zip，然后解压到E:/geoserver/nyc_roads。该数据已经经过投影变换，投影为EPSG:2908。2.启动GeoServer 选择”开始>所有程序>GeoServer2.1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值