首页 > 其他分享 >leaflet geoserver

leaflet geoserver

时间:2022-12-24 10:22:47浏览次数:42  
标签:xml FILTER 地块 CQL leaflet geoserver 图层 features

图层的查询条件 CQL_FILTER

直接通过某个值直接查询 列如

CQL_FILTER = `region_code = ${this.row.regionCode}`

CQL_FILTER = 'region_code in (xxxx,xxxx,xxxx,xxxx)'

判断某一个地块是否存在某一个区域中 列如

CQL_FILTER = `INTERSECTS(geom,polygon(( 
119.8733711 29.19246529,
....
一般可填写多边形地块点金纬度
)))`
// 判断返回接口中的 features 数组长度判断是否存在

判断某一个地块是否与某一个地块重叠 列如

CQL_FILTER = `CONTAINS(geom,polygon(( 
119.8733711 29.19246529,
....
一般可填写多边形地块点金纬度
)))`
// 判断返回接口中的 features 数组长度判断是否重叠

点击地块变色

var param = {
 service: "WFS",
 version: "1.0.0",
 request: "GetFeature",
 typeName: `图层名字`,//在某一个图层上查询
 maxFeatures: 9999999,//最大可查询到的数量
 outputFormat: "application/json",//返回的类型
 CQL_FILTER: sql,//查询条件
}
let { data } = await getGeoJsonFromGeoserver(param)
if (data.features.length > 0) {
 data.features.map(v => {
   let obj = L.geoJSON([v.geometry], {
     style: {
       color: '#fff', // 边框颜色
       weight: 1, // 边框粗细
       opacity: 1, // 透明度
       fillColor: '#fff', // 区域填充颜色
       fillOpacity: 0.3,  // 区域填充颜色的透明
    },
     pane: 'popupPane',// 层级,类似 z-index
     obj.on('click', (e) => {
    //点击地块时可拿到相应数据-可操作地块
  })
  }).addTo(this.map)
   this.list.push(obj)//这里一定需要存储一下,方便后面点击非地图区域时操作地块
})
}

// 变色
this.list.map(v=>{
 if(条件){
   v.setStyle({color:'red'})
}
 // 可移除某一个地块
 this.map.removeLayer(v)
})

删除某一个地块/图层

let xml = `<wfs:Transaction xmlns="http://www.opengis.net/wfs" xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" xmlns:shp330703-a="shp330703-a" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs https://map.phone366.com:8443/geoserver/schemas/wfs/1.0.0/WFS-basic.xsd shp330703-a https://map.phone366.com:8443/geoserver/shp330703-a/wfs" service="WFS" version="1.0.0">`
xml += "<wfs:Delete typeName='shp330703-a:grain_acre'>"
xml += '<Filter xmlns="http://www.opengis.net/ogc">'
xml += '<FeatureId fid="' + val + '"/>'//fid是图层自动生成的id
xml += '</Filter>'
xml += "</wfs:Delete>"
xml += " </wfs:Transaction>"
 

标签:xml,FILTER,地块,CQL,leaflet,geoserver,图层,features
From: https://www.cnblogs.com/newBugs/p/17002447.html

相关文章

  • leaflet利用hotline实现河流差值渲染热力图
    实现效果(这里做了1条主河道和5个支流):  核心代码使用了Leaflet.hotline插件,github下载地址链接详情见我之前整理的一篇文章介绍河流热力图核心代码逻辑://处理河流......
  • leaflet实现地图遮罩
    实现地图遮罩效果(主要显示目标区域内部,外部用暗色填充):地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的polygon,然后给这个polyon一个透明度为......
  • leaflet 领图 一个本地的类似百度地图工具-不连外网
    官网:​​https://leafletjs.com/​​​二次开发手册-中文:​​http://112.91.146.167:9090/api/​​领图(一款给力的开源离线地图解决方案)Leaflet官方教程Zoomlevels缩放......
  • GeoServer 发布PostGIS数据库中的栅格数据
    1.导入栅格数据进入PostgreSQL\bin目录,利用raster2pgsql工具导入栅格数据,具体命令如下所示:<!--分块,切片存储到PostGIS数据库中-->raster2pgsql-s4326-I-C-ME:/......
  • leaflet 使用kriging-contour.js 与 turf.js生成等值面
    效果如下:leaflet生成等值面网上搜索了好多资料但测试感觉都有点瑕疵,kriging.js 生成的canvas图片每个都是小方格影响美感,turf.js会有非法Polygon且有白色缝隙。就想着可......
  • Geoserver中预览图层时放大到某一层级不显示(样式Styles中未设置对应比例尺的样式)
    场景GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践):https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109636080geoserver在预览图层时,当发......
  • leaflet 设置图层优先级
    Leaflet在添加了区域、点位等图层之后,需要设置图层的优先级,可以通过pane来设置。this.map.createPane('tlop')this.map.getPane('tlop').style.zIndex=500letmark......
  • leaflet 用自定义pane实现图层顺序调整
    在Leaflet中,mappanes隐式地将图层组合在一起,而开发者并不知道这一点。这种分组允许Web浏览器以比单独处理图层更有效的方式同时处理多个图层。Mappanes使用z-ind......
  • leaflet 河流颜色渐变效果
    1、Leaflet-polycolor  github地址:https://github.com/Oliv/leaflet-polycolor 插件缺陷:需要把每个折点的颜色都指定才行,一般做不到2、Leaflet.hotline github......
  • leaflet常用插件汇总介绍
    1、LeafletAntPath(线条流动效果) 在交通项目、管网应用的项目中,常常需要标注出道路的走向、河流的流向或者管线的流向等等,LeafletAntPath能够很好的解决这类问题: ......