leaflet加载geojson数据_webGIS实践：3_2_openlayer查询渲染geojson矢量要素

最新推荐文章于 2024-05-17 09:00:00 发布
最新推荐文章于 2024-05-17 09:00:00 发布
阅读量358 收藏
点赞数
文章标签： leaflet加载geojson数据 openlayer xyz加载

在geoserver中，我们已经分析过getFeature的url了。

通过getFeature，访问类似如下的url，可以返回一个geojson。

http://localhost:8080/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=gismap%3Av6_time_pref_pgn_utf_wgs84&LAYERS=gismap%3Av6_time_pref_pgn_utf_wgs84&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=114.59951733789063%2C39.30990146214762%2C116.59951733789063%2C41.30990146214762

但因为geoserver默认不支持跨域，所以我们要先解决一个geoserver的跨域问题。

一、配置geoserver支持跨域

打开geoserver-2.16.2webappsgeoserverWEB-INF web.xml，用sublime打开就行。

搜索Uncomment following filter to enable CORS，一共有两处，都被注释掉了，把注释掉的内容拿出来，使其支持跨域。

280aa5c99a61c3c4340ba27b074eae30.png

71289473a09cae16ae79e27b2a4c10ee.png

改成这样就行：

592bc4cd67d45556700b0df2d094430d.png

0a3afde752b7b775e6b79512bb4feb6f.png

二、配置浏览器支持跨域

我使用的是chrome浏览器。

在桌面快捷方式中，目标后面加上 --disable-web-security --user-data-dir，即可，注意有空格。

f1ebef9cf5e760769fbcc1e9b0d33156.png

三、前端实现

新建一个QueryFeatureOL.HTML文件。

f305b08a422cd8a4b7516b477f2def87.png

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>openlayer矢量要素渲染查询</title>
    <link rel="stylesheet" href="ol/ol.css">
    <script src="ol/ol.js"></script>
    <script src="jquery-1.7.2.js"></script>
    <style type="text/css">
        #map,
        html,
        body {
            height: 100%;
            width: 100%;
        }
        .content {
            width: 100px;
        }

    </style>
</head>

<body>
<div id="map"></div>
<div id="attributetable">
    <table>
        <thead>
        <tr>
            <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/';
    //视窗，openlayer默认坐标系是平面墨卡托
    var view = new ol.View({
        center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),
        zoom: 9
    });
    //图层，加载腾讯底图和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: 'http://localhost:8080/geoserver/wms?',//这个可以打开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',//图层，前面是工作空间，后面是图层名，
                    'exceptions': 'application/vnd.ogc.se_inimage',
                    'singleTile': true//单瓦片，渲染成一张图片
                }
            }),
        }),
    ];
    //地图
    var map = new ol.Map({
        target: 'map',
        layers: layers,
        view: view
    });
    //地图点击事件
    $("#map").click(function (e) {
        //获取地图上点击的地理坐标，平面墨卡托坐标系
        var t3857=map.getEventCoordinate(e);
        console.log(t3857);
        t4326=ol.proj.transform(t3857, 'EPSG:3857', 'EPSG:4326');
        console.log(t4326);
        // BBOX,minlng,minlat,maxlng,maxlat,平面墨卡托就是minx,miny,maxx,maxy，下面的url3857里的bbox是一个2m×2m的小矩形
        //构造请求url的时候，把坐标系写成3857，虽然后台数据是4326坐标系的，但geoserver能内部转换
        var url3857=baseurl+'geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=gismap%3Av6_time_pref_pgn_utf_wgs84&LAYERS=gismap%3Av6_time_pref_pgn_utf_wgs84&exceptions=application%2Fvnd.ogc.se_inimage&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A3857&STYLES=&WIDTH=101&HEIGHT=101&BBOX='+(t3857[0]-1).toString()+'%2C'+(t3857[1]-1).toString()+'%2C'+(t3857[0]+1).toString()+'%2C'+(t3857[1]+1).toString();
        console.log(url3857);
        $.ajax(
            {
                url:url3857,
                type:'GET',
                dataType:'json',
                headers:{'Content-Type':'application/json;charset=utf8'},
                success:function(data){
                    //这个方法直接把geojson转为feature数组
                    features=(new ol.format.GeoJSON()).readFeatures(data);
                    //新建矢量资源
                    var vectorSource = new ol.source.Vector({
                        features: features
                    });
                    //新建矢量图层
                    var vectorLayer = new ol.layer.Vector({
                        source: vectorSource,
                        style: polygonStyleFunction
                    });
                    //将矢量图层添加到map
                    map.addLayer(vectorLayer);
                    //更新属性表
                    for(var i=0;i<data['features'].length;i++){
                        var properties=data['features'][i]['properties'];
                        var name_py=properties['name_py'];
                        var name_ch=properties['name_ch'];
                        var tabletxt='<tr><td>'
                            +name_py+'</td><td>'
                            +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) {
        return feature.get('name_ch').toString();
    };
</script>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    body,
    button,
    input,
    select,
    #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>

四、前端效果

点击地图，既可以渲染矢量要素和注记，并展现属性表。

956c25e1192b646f7c300f7747c2fa15.png
weixin_39882589
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
38.（leaflet之家）leaflet叠加geojson图层
地图之家
10-09 500
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='vi
【WebGIS】leaflet入门-使用GeoJSON
paperperson的博客
04-30 4148
GeoJSON是一种非常流行的地理数据存储格式，他以轻量级、便于传播而流行。相比较动则数个文件的shapefile文件，geojson轻便太多了（当然shapefile文件的很多功能是GeoJSON）不能比的。在leaflet中，对GeoJSON也有着非常好的适配，我们可以直接解析GeoJSON格式的地理数据，这为我们的开发提供了很大的遍历，所以这一部分是非常重要的。这里再次提供官方的文档和GeoJSON的官方定义文档GeoJSON。
Leaflet加载GeoJSON数据，并添加到FeatureGroup
LbJ_MVP的博客
08-24 5333
Vue地图项目，加载 GeoJSON数据，并添加到定义好的 FeatureGroup 上；L.GeoJSON解析。
Leaflet【三】图层组 & geoJson & 热力图
最新发布
共勉
05-17 397
图层组功能允许用户将多个图层组合在一起，便于管理和控制。GeoJSON是一种基于JSON的地理空间数据交换格式，可以用于在Leaflet中加载和显示地理数据。热力图则是一种可视化技术，用于表示地理数据的密度分布。通过结合使用这三个功能，可以实现在Leaflet中创建具有丰富地理信息和交互性的地图应用。
leaflet：入门基础（三）之加载数据
热门推荐
Puzzle的博客
07-17 1万+
前言 上一篇 leaflet：入门基础（二） 讲了如何加载底图 这一篇将讲解如何加载自己已有的数据（未更完 1：加载Geojson数据 需要的数据：一个geojson数据（可以是点/线/面 注：如果手上有shp数据，可以通过https://mapshaper.org/转换得到geojson数据（使用说明[链接]） var map = new L.Map('map', { center: new L.LatLng(39.86,116...
Leaflet系列：加载GeoJSON数据
地理信息技术杂谈 博客，欢迎技术交流
08-24 6348
Leaflet是适用于桌面端和移动端交互地图的开源JavaScript类库。JS库的大小经过压缩后有38k左右，拥有开发者需要的全部地图功能。 Leaflet保持着简单、性能和实用性的设计思想。可以在所有主要的桌面和移动端平台上高效的运转，可以扩展插件，它有一个漂亮、易用和文档清晰的API，有一个简单、易读的源代码 Leaflet可以通过加载GeoJSON数据，批量加载点、线、面数据，并转化为相应...
leaflet加载geojson叠加显示功能代码
11-21
在本文中，我们将深入探讨如何使用Leaflet来加载和叠加显示GeoJSON数据。 首先，GeoJSON数据通常需要从其他格式（如ESRI Shapefile，简称shp）转换而来。MapShaper.org是一个在线工具，可以方便地将shp文件转换为...
Leaflet.VectorGrid:在Leaflet 1.0.0中显示网格化的矢量数据（切片的GeoJSON或protobuf矢量切片）
05-11
Leaflet.VectorGrid 在 1.0.0中显示网格化的矢量数据（切片的 ， 或）演示版 切片的GeoJSON 切片的TopoJSON（对后空混乱感到抱歉，topojson-to-geojson似乎无法正确处理） Protobuf矢量图块：OpenMapTiles，MapBox，...
HTML.rar_WebGIS源码_gis_html地图加载_web gis地图开发_地图web
09-21
开发WebGIS时，开发者需要理解GIS数据格式，如Shapefile、GeoJSON、KML等，以及如何将这些数据转换为可以在Web上显示的格式。同时，还需熟悉WMS（Web Map Service）、WFS（Web Feature Service）等OGC（开放地理空间...
webgis.rar_belt7em_moviecgx_webgis_webgis 放大缩小_webgis功能代码
09-24
它将地理信息、Web服务技术与数据库技术相结合，使用户可以通过浏览器等Web客户端访问、查询、分析和展示地图数据。本压缩包文件“webgis.rar_belt7em_moviecgx_webgis_webgis 放大缩小_webgis功能代码”包含实现...
esri-leaflet地图加载（geojson数据绘制边界）
孙霸天的专栏
08-19 7385
这两天一直琢磨如何在leaflet的地图上加载地图，查看过官方文档后发现可以使用geojson这个方法来加载我们所需要的地图边界（矢量的边界）。 我所使用的数据是国家2000的投影坐标系，要想在leaflet的地理坐标系系的图上展示边界的话，必须要把投影坐标系转换为地理坐标系，既（国家2000----wgs84），方法很简单使用arcgis的坐标转换工具就可以实现，但由于不知道转换的七参数，所以...
获取全国各地行政区的genjson数据以及使用leaflet加载行政区数据
爱吃雪糕的小布丁的博客
07-12 3235
使用阿里的DataV获取全国的行政区geojson数据以及使用leaflet框架加载获取到的行政区数据
leaflet地图中添加边界
写代码脑子疼
11-11 1054
一、阿里云的生成编辑可以现在生成相应边界的api或者图片（参数中的url就是生成的json文件。所以如果是生成的api边界就是需要用。是请求json数据的方法，支持跨域。方法获取解析出的json数据，再用。刚接触leaflet做个记录。
leaflet通过WFS服务加载geoserver 矢量数据
不去想结果，一直在路上
01-14 6023
leaflet通过WFS服务加载geoserver 矢量数据1.前言2.从geoserver获得geojson数据3.geoserver跨域配置4.根据请求结果生成layer5.完整代码 1.前言 leaflet默认支持的服务只有WMS，因此不能加载WFS数据，但是leaflet提供了另一个方法geoJson，它的作用是从一个geojson文件中加载地图，所以利用leaflet加载WFS数据的一个...
OpenLayers之多源数据加载七：矢量地图
不睡觉的怪叔叔的博客
08-09 4247
一、矢量地图介绍     矢量地图的图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。     矢量图形最大的优点是无论放大、缩小或旋转等图形都不会失真。矢量地图在地图项目中存在着大量的应用，是地图数据中非常重要的组成部分。     为了便于存储、传递、使用，矢量地图会按照一定的格式来表达，比如常...
基础知识系列（二）：geojson数据
A20231015的博客
11-26 292
【代码】基础知识系列（二）：geojson数据。
leaflet基础知识
lln0001的博客
09-16 473
leaflet学习和实践
Leaflet笔记——加载WFS标准的矢量数据
sxzhustar的专栏
06-01 5172
在学习一段时间ol之后，看到Leaflet做出的精美地图，比如绘制飞机航线图、带箭头、方向的线段等，就想研究研究。一开始也纠结openlayers和Leaflet哪个功能强大，捣鼓几天个人觉得，功能和系统性来说openlayers绝对强大，尤其对各种数据源的支持，非常全面和方便，功能封装的也比较好；Leaflet重点在于功能亮点，插件比较多，但是也比较散乱，api和帮助文档以及学习资料也远不及ol
leaflet如何过滤geojson数据
05-25
Leaflet可以通过使用GeoJSON数据过滤器来过滤数据。 首先，你需要创建一个GeoJSON层并将其添加到地图上。例如，假设你有一个名为`myLayer`的GeoJSON层： ```javascript var myLayer = L.geoJSON(myGeoJSONData).addTo(map); ``` 接下来，你可以使用`myLayer`的`filter`方法来过滤数据。例如，假设你要过滤一个名为`name`的属性，只显示值为`"John"`的特征： ```javascript myLayer.filter(function(feature) { return feature.properties.name === "John"; }); ``` 你可以在`filter`函数中使用任何JavaScript代码来定义过滤规则。如果返回`true`，则该特征将保留在图层中，否则，该特征将被过滤掉。 最后，你需要更新图层以反映过滤结果。可以通过使用`clearLayers`方法清除所有特征，然后使用`addData`方法添加过滤后的特征： ```javascript myLayer.clearLayers(); myLayer.addData(filteredGeoJSONData); ``` 完整的代码示例： ```javascript var myLayer = L.geoJSON(myGeoJSONData).addTo(map); myLayer.filter(function(feature) { return feature.properties.name === "John"; }); myLayer.clearLayers(); myLayer.addData(filteredGeoJSONData); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值