前言

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. qt中的拖拽及其使用技巧

    关于qt中的拖放操作,首先可以看这篇官方文档:http://doc.qt.io/qt-5.5/dnd.html 一.QDrag 首先是创建QDrag,可以在mousePressEvent或者mouse ...

  2. AI领域有什么职业？怎样才能在AI领域找到工作？

    AI领域是一个很吃香的行业,在这个行业中,很多人都是高薪的,而且有些学生为了以后能够接触到这个行业,都在大学的时候,学习这个专业,那么大家知道AI领域有什么职业吗?下面我们就来给大家讲解一下. 1.算 ...

  3. AVLtree（C++实现）有统一的旋转操作

    在学习完AVLtree之后,我发现,左旋,右旋均可以采用统一的旋转方式来实现,所以把代码贴在下面 代码是完整的AVLTree实现 C++标准为C++11 在ubuntu 18.04下通过编译和调试 / ...

  4. Python zmq的三种简单模式

    ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高. 是一个消息处理队列库,可在多个 ...

  5. (.text+0x18): undefined reference to `main'

    在将VS中的程序移植到ubuntu中出现的一个问题,主要原因是在vs中默认的主函数写成int _tmain(), 而在gcc编译时要找的是int main().改过来就可以了.

  6. Gloang Swagger

    功能 自动化生产接口文档 安装 # 安装swaggo get -u github.com/swaggo/swag/cmd/swag # 安装 gin-swagger go get -u github. ...

  7. 一、Shell概述

    什么是Shell 解释Shell脚本名词之前,我们先来说下什么是Shell? Shell是一个命令解释器,它在操作系统的最底层,负责直接与用户对话,把用户的输入解释给操作系统,并处理各种各样的操作系统 ...

  8. JavaScript 初学者容易犯的几个错误，你中招没？

    JavaScript 是对初学者比较友好的一门编程语言,基本上花个半小时看下语法就能写出能运行的代码.JavaScript 是动态脚本语言,对数据类型没有太多的限制,写起来非常灵活.但正因为如此,初学 ...

  9. GORM入门指南

    gorm是一个使用Go语言编写的ORM框架.它文档齐全,对开发者友好,支持主流数据库. gorm介绍 Github GORM 中文官方网站内含十分齐全的中文文档,有了它你甚至不需要再继续向下阅读本文. ...

  10. shell命令之一天一见

    一.在统计行数时常要用的到命令包括 w.c.l, 在这里做个简单的介绍. 语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也 ...