前言

leaflet 入门开发系列环境知识点了解：

内容概览

leaflet结合turf.js实现多边形分割
源代码 demo 下载

效果图如下：

本篇实现的思路：turf.js中提供了一中多边形的裁剪方法是使用多边形去裁剪多边形，但是如果实际工作中需要使用到线去裁剪多边形却无法满足。刚好单位有个项目需求就是利用线去分割图形的，在github搜索，找到一篇利用leaflet结合turf.js实现多边形分割的，github地址如下：https://github.com/FWC1994/clip-polygon

  • 完整代码如下：
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>多边形切割demo</title>

<link href="./style.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/leaflet.draw/1.0.2/leaflet.draw.css" rel="stylesheet">

</head>

<body onload="loadMap()">

<div id='map'></div>

<div id='msg'>先在地图上点击要裁剪的多边形</div>

<div id='reset' onclick="resetClip()">重置</div>

</body>

<script src="https://cdn.bootcss.com/Turf.js/5.1.6/turf.min.js"></script>

<script src="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.js"></script>

<script src="https://cdn.bootcss.com/leaflet.draw/1.0.2/leaflet.draw.js"></script>

<script src="./clip.js"></script>

<script>

var map = null;

var editLayer = null;

var drawView = null;

var polygonLayer = null;

var clipResultLayer = null;

var clipLineLayer = null;

var colorList = ['#00FF66','#66CCFF','#6600FF','#FF9933','#FF3333']

function loadMap(){

// 创建地图对象

map = L.map('map',{attributionControl: false}).setView([39.91036,116.403704], 10);

var basemap = L.tileLayer('http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {

attribution: ''

}).addTo(map);

// 创建标绘图层

drawView = new L.geoJSON(null, {}).addTo(map);

clipResultLayer = new L.geoJSON(null, {}).addTo(map);

// 创建多边形图层及添加测试geojson数据

polygonLayer = L.geoJSON(null, {

style: function (feature) {

return {color: '#fff'};

}

}).addTo(map);

polygonLayer.addData({

"type": "Feature",

"geometry": {

"type": "Polygon",

"coordinates": [[

[116.2535,40.009898], [116.25144,39.971495], [116.324225,39.990436],

[116.296072,40.032509], [116.2535,40.009898]

]]

}

});

polygonLayer.addData({

"type": "Feature",

"geometry": {

"type": "Polygon",

"coordinates": [

[[116.490393,39.88435], [116.596823,39.895413], [116.626349,39.784167], [116.409369,39.775197], [116.490393,39.88435]],

[[116.502285,39.870091],[116.516018,39.800887],[116.599789,39.795744], [116.567001,39.870486], [116.502285,39.870091]

]

]

}

});

polygonLayer.addData({

"type": "Feature",

"geometry": {

"type": "MultiPolygon",

"coordinates": [

[

[[116.361303,39.926488], [116.454001,39.935439], [116.437521,39.874338], [116.359243,39.876973], [116.361303,39.926488]]

],

[

[[116.493530,40.058103], [116.665192,40.064410], [116.677551,39.930801], [116.512756,39.947648], [116.493530,40.058103]]

]

]

}

});

// 添加Leaflet.Draw标绘功能

clipLineLayer = new L.Draw.Polyline(map);

clipLineLayer.setOptions({

showLength:false,

shapeOptions:{

stroke: true,

color: '#3388ff',

weight: 1,

opacity: 0.7,

dashArray: '5,5'

}

})

L.drawLocal.draw.handlers.polyline.tooltip = {

start: '点击地图开始裁剪',

cont: '点击地图开始裁剪',

end: '双击地图或点击最后一个点完成裁剪'

}

//地图或图层事件绑定

/* map.on('click',function(evt){

console.log(evt.latlng.lng.toFixed(6)+','+evt.latlng.lat.toFixed(6))

}) */

polygonLayer.on('click', function(evt) {

if(drawView){

drawView.clearLayers()

}

editLayer = evt.layer;

polygonLayer.setStyle(

{color: '#fff'}

)

editLayer.setStyle(

{color: '#ecf53e'}

)

clipLineLayer.enable();

document.getElementById('msg').innerText='绘制切割线'

});

map.on('draw:created', function(evt){

drawView.addLayer(evt.layer)

var clipLine = L.polyline(evt.layer.editing.latlngs[0])

var intersects = turf.lineIntersect(turf.polygonToLine(editLayer.feature), clipLine.toGeoJSON());

try{

var clippedPolygon = geoUtil.polygonClipByLine(editLayer.feature,clipLine.toGeoJSON());

for(var i=0; i < clippedPolygon.features.length; i++){

var newLayer = new L.geoJSON(clippedPolygon.features[i], {

style: {color:colorList[i]}

});

clipResultLayer.addLayer(newLayer);

}

document.getElementById('msg').innerHTML='<div style="color:#3fcf3f;">多边形裁剪成功</div>'

}catch(error){

document.getElementById('msg').innerHTML='<div style="color:#ff0000;">'+error.state+':</br>'+error.message+'</div>'

}

})

var baseMaps = {

"蓝黑底图": basemap,

};

var overlayMaps = {

"polygon图层": polygonLayer,

"裁剪result图层": clipResultLayer

};

L.control.layers(baseMaps, overlayMaps).addTo(map);

}

function resetClip(){

clipResultLayer.clearLayers();

drawView.clearLayers();

polygonLayer.setStyle(

{color: '#fff'}

)

document.getElementById('msg').innerText='先在地图上点击要裁剪的多边形';

}

</script>

</html>

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

leaflet结合turf.js实现多边形分割(附源码下载)的更多相关文章

  1. openlayers5-webpack 入门开发系列结合 turf.js 实现等值线（附源码下载）

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  2. leaflet 结合 geoserver 实现地图空间查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  3. leaflet 结合 geoserver 实现地图属性查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  4. leaflet 实现克里金插值功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. Cesium专栏-地形开挖2-任意多边形开挖（附源码下载）

    “任意多边形地形开挖” 是“地形开挖”的补充篇,在这节里,我们介绍关于如何使用任意多边形对地形进行开挖,同时,由于有不少小伙伴也咨询了关于“地形开挖”篇后序内容中的填充地形的效果,之前没放出来,是想让 ...

  6. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. leaflet 结合 Echarts4 实现迁徙图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  8. arcgis api 3.x for js 解决 textSymbol 文本换行显示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

随机推荐

  1. 【Oracle】复制表结构和表数据

    1.既复制表结构也复制表数据:CREATE TABLE tab_new AS SELECT * FROM tab_old; 2.只复制表结构:CREATE TABLE tab_new AS SELEC ...

  2. [HNOI2008]Cards（dp，Burnside引理）

    Burnside引理: 参考自 某大佬对Burnside引理和Polya定理的讲解 相关概念 群:在数学中,群表示一个拥有满足封闭性.满足结合律.有单位元.有逆元的二元运算的代数结构. 置换群:由有限 ...

  3. HDU 3839 Ancient Messages（DFS）

    In order to understand early civilizations, archaeologists often study texts written in ancient lang ...

  4. vscode python开发插件推荐

    vscode作为一款好用的轻量级代码编辑器,不仅支持代码调试,而且还有丰富的插件库,可以说是免费好用,对于初学者来说用来写写python是再合适不过了.下面就推荐几款个人觉得还不错的插件,希望可以帮助 ...

  5. Linux 安装Jenkins

    1.安装jdk1.8 下载地址:https://github.com/frekele/oracle-java/releases 下载 root@123:~/my_java# wget https:// ...

  6. 从桌面到Web - 领域模型的创建

    天佑武汉,天佑中国.这次为全国人民作出巨大牺牲的武汉人是坚强和担当的. 这次疫情期间的自我隔离的一个副作用是第一次享受这个超长假期,本来想好好学习一下Web技术的,但家里的唯一一台计算机被占用,不得已 ...

  7. 共轭先验（conjugate prior）

    共轭是贝叶斯理论中的一个概念,一般共轭要说是一个先验分布与似然函数共轭: 那么就从贝叶斯理论中的先验概率,后验概率以及似然函数说起: 在概率论中有一个条件概率公式,有两个变量第一个是A,第二个是B , ...

  8. 脚本在Shell可以执行成功，放到crontab里执行失败

    一.背景 自己写了个监控MGR状态的脚本,直接在Linux的Shell环境下可以执行成功,但是只要放到crontab里执行,就失败,脚本内容如下 #!/bin/bash MAIL_ADDR=`cat ...

  9. 解决docker容器无网络、无法连接互联网----长期更新

    众所周知,docker有三种默认的网络模式,分别是: bridge host none 然后需要注意的就是内核转发这个,一定不要忘了!配置方法如下 echo -e "net.ipv4.ip_ ...

  10. 我学React Native开发的经历(一) 第一周学习，环境搭建及demo1,一个导航跳转页面

    大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多 ...