区块链技术博客
www.b2bchain.cn

leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)求职学习资料

本文介绍了leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

前言

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

  • leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
  • leaflet 在线例子
  • leaflet 插件,leaflet 的插件库,非常有用

内容概览

leaflet结合turf.js实现绘制图形缓冲分析buffer功能
源代码demo下载

绘制图形buffer实现借助了一个插件turf.js:http://turfjs.org
leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)

效果图如下:
leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)

  • 部分核心代码,完整的见源码demo下载
    “`
    var bufferstyle = {
    fillColor: “#e6d933”,
    fillOpacity: 0.3,
    stroke: true,
    fill: true,
    color: “#FF0000”,
    opacity: 1,
    weight: 2,
    };
    var map = L.map(‘map’);
    L.tileLayer(‘http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}’).addTo(map);
    var geojsonLayers = L.featureGroup([]).addTo(map);
    var bufferLayers = L.featureGroup([]).addTo(map);
    map.setView(L.latLng(22.95186415, 113.90271877), 14); //设置缩放级别及中心点

    //map.pm.setLang(‘zh’);
    map.pm.addControls({
    position: ‘topleft’,
    drawCircle: false,
    drawMarker:false,
    drawCircleMarker:false,
    drawPolyline:false,
    drawRectangle:false,
    drawPolygon:false,
    cutPolygon:false,
    editMode:false,
    dragMode:false,
    removalMode:false
    });

    map.on(‘pm:create’, e => {
    geojsonLayers.addLayer(e.layer);
    map.pm.disableDraw(“CircleMarker”);
    map.pm.disableDraw(“Line”);
    map.pm.disableDraw(“Polygon”);
    });

前言

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

  • leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
  • leaflet 在线例子
  • leaflet 插件,leaflet 的插件库,非常有用

内容概览

leaflet结合turf.js实现绘制图形缓冲分析buffer功能
源代码demo下载

绘制图形buffer实现借助了一个插件turf.js:http://turfjs.org
leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)

效果图如下:
leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)

  • 部分核心代码,完整的见源码demo下载
    “`
    var bufferstyle = {
    fillColor: “#e6d933”,
    fillOpacity: 0.3,
    stroke: true,
    fill: true,
    color: “#FF0000”,
    opacity: 1,
    weight: 2,
    };
    var map = L.map(‘map’);
    L.tileLayer(‘http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}’).addTo(map);
    var geojsonLayers = L.featureGroup([]).addTo(map);
    var bufferLayers = L.featureGroup([]).addTo(map);
    map.setView(L.latLng(22.95186415, 113.90271877), 14); //设置缩放级别及中心点

    //map.pm.setLang(‘zh’);
    map.pm.addControls({
    position: ‘topleft’,
    drawCircle: false,
    drawMarker:false,
    drawCircleMarker:false,
    drawPolyline:false,
    drawRectangle:false,
    drawPolygon:false,
    cutPolygon:false,
    editMode:false,
    dragMode:false,
    removalMode:false
    });

    map.on(‘pm:create’, e => {
    geojsonLayers.addLayer(e.layer);
    map.pm.disableDraw(“CircleMarker”);
    map.pm.disableDraw(“Line”);
    map.pm.disableDraw(“Polygon”);
    });

前言

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

  • leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
  • leaflet 在线例子
  • leaflet 插件,leaflet 的插件库,非常有用

内容概览

leaflet结合turf.js实现绘制图形缓冲分析buffer功能
源代码demo下载

绘制图形buffer实现借助了一个插件turf.js:http://turfjs.org
leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)

效果图如下:
leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)

  • 部分核心代码,完整的见源码demo下载
    “`
    var bufferstyle = {
    fillColor: “#e6d933”,
    fillOpacity: 0.3,
    stroke: true,
    fill: true,
    color: “#FF0000”,
    opacity: 1,
    weight: 2,
    };
    var map = L.map(‘map’);
    L.tileLayer(‘http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}’).addTo(map);
    var geojsonLayers = L.featureGroup([]).addTo(map);
    var bufferLayers = L.featureGroup([]).addTo(map);
    map.setView(L.latLng(22.95186415, 113.90271877), 14); //设置缩放级别及中心点

    //map.pm.setLang(‘zh’);
    map.pm.addControls({
    position: ‘topleft’,
    drawCircle: false,
    drawMarker:false,
    drawCircleMarker:false,
    drawPolyline:false,
    drawRectangle:false,
    drawPolygon:false,
    cutPolygon:false,
    editMode:false,
    dragMode:false,
    removalMode:false
    });

    map.on(‘pm:create’, e => {
    geojsonLayers.addLayer(e.layer);
    map.pm.disableDraw(“CircleMarker”);
    map.pm.disableDraw(“Line”);
    map.pm.disableDraw(“Polygon”);
    });

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们