前言

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. mongoskin 是让 Node.js 支持 MongoDB 的内嵌访问层。

    mongoskin 是让 Node.js 支持 MongoDB 的内嵌访问层.

  2. [ Python入门教程 ] Python中JSON模块基本使用方法

    JSON (JavaScript Object Notation)是一种使用广泛的轻量数据格式,Python标准库中的json模块提供了一种简单的方法来编码和解码JSON格式的数据.用于完成字符串和p ...

  3. GP工作室—Alpha版本发布1

    目录 GP工作室-Alpha版本发布1 一.简介 1.1作业要求 1.2团队成员 二.软件下载安装说明 五.项目总结 @(Gold Point团队の项目计划) GP工作室-Alpha版本发布1 一.简 ...

  4. Java程序员学习Go语言—之一

    转载:https://www.luozhiyun.com/archives/206 GOPATH 工作空间 GOPATH简单理解成Go语言的工作目录,它的值是一个目录的路径,也可以是多个目录路径,每个 ...

  5. pc端的弹性布局适配方案

    方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果. function adaptor(){ //为了便于计算,这里以19 ...

  6. Jmeter之BeanShell断言使用

    1.Bean Shell常用内置变量 JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:用来记录日志文件,写入到j ...

  7. mysql -- collection一对多查询

    数据库表 角色组表: CREATE TABLE `sso_character_group` ( `group_id` ) NOT NULL AUTO_INCREMENT COMMENT '角色组ID' ...

  8. HDU 3839 Ancient Messages（DFS）

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

  9. 从O365中获取users到D365中 使用flow

    在我上篇blog中讲解到了怎么用代码把O365 users 获取到D365中. 从O365中获取users到D365中 这几天一直在研究flow, 发现flow可以更简单的完成这个功能. 一开始没有考 ...

  10. 实验20：IPv6

    实验17-1: IPv6 静态路由 Ø    实验目的通过本实验可以掌握(1)启用IPv6 流量转发(2)配置IPv6 地址(3)IPv6 静态路由配置和调试(4)IPv6 默认路由配置和调试 Ø   ...