leaft 动态配置渲染河流

已于 2023-04-14 15:40:41 修改
阅读量1.6k 收藏 3
点赞数
分类专栏： leaflet 文章标签： leaflet
于 2022-03-19 16:26:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37550440/article/details/123596656
版权

动态配置渲染河流，颜色，宽度

版本1效果图：动态配置河流

 代码块

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Cookie
 * @Date: 2022-03-18 17:24:49
 * @LastEditors: Zhang
 * @LastEditTime: 2022-03-19 15:59:19
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./river1.json"></script>

<style>
  .leaflet-marker-icon.leaflet-interactive {
    font-size: 20px;
  }
  .box {
    position: absolute;
    top: 50px;
    left: 50px;
    /* width: 500px;
    height: 100px; */
    z-index: 10000;
  }
  .my-div-icon {
    display: none;
  }
  .el-select {
    width: 140px;
  }
</style>
<div id="app">
  <div id="map" style="width: 100vw; height: 100vh"></div>
  <div class="box">
    <span>请配置渲染河流:</span>
    <el-select v-model="value">
      <el-option
        v-for="item in options.showRiverName"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <span>请配置河流宽度:</span>
    <el-select v-model="width">
      <el-option
        v-for="item in widthOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <span>请配置河流颜色:</span>
    <el-select v-model="color">
      <el-option
        v-for="item in colorOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</div>
</head>
<body>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <script>


var map,mylayerGroup,color ="#306bff";
new Vue({
  el: '#app',
  data: {
    value: '新凯河',
    width: 6,
    color: color,
    options: {
      showRiverName: [
      {value:'松花江',label: '松花江'},
      {value:'新凯河',label: '新凯河'},
      {value:'饮马河',label: '饮马河'},
      ]
    },
    widthOptions: [
      {value:'1',label: '1'},
      {value:'6',label: '6'},
      {value:'12',label: '12'},
    ],
    colorOptions: [
      {value:'#306bff',label: '蓝色'},
      {value:'red',label: '红色'},
    ]
  },
  mounted() {
    this.init()
  },
  methods: {
      init() {
        map = L.map('map').setView([30.3367385888597, 120.135198302847], 9);
        var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
        L.tileLayer(wpUrl, {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        map.setView([43.88, 125.35])
        this.addRiver(this.value)
      },
      addRiver(val) {
        let optoins = {
            hidRiverName: []
        } 
        this.options.showRiverName.forEach(el => {
          if(el.label !== val) {
            optoins.hidRiverName.push(el.label)
          }
        });
        let width = this.width
        console.log(optoins.hidRiverName)
        let layer1  = L.geoJSON(river, {
              id: "RIVER_COLOR",
              style: function(geoJsonFeature) {
                // console.log(geoJsonFeature)
                let color = "#306bff"
                let color1 = "rgba(0,0,0,0)"
                let nameClass=geoJsonFeature.properties.DJ * 1>4?"fz24":"fz24"
                geoJsonFeature.properties.name = geoJsonFeature.properties.SSHL // 自定义name
                if (optoins.hidRiverName && optoins.hidRiverName.indexOf(geoJsonFeature.properties.SSHL) != -1) {
                  color = color1
                  addText(geoJsonFeature.properties)
                } else {
                  addText(geoJsonFeature.properties, nameClass)
                }
                // if (optoins.showRiverName) {
                //   if (optoins.showRiverName.indexOf(geoJsonFeature.properties.SSHL) != -1) {
                //     addText(geoJsonFeature.properties, nameClass)
                //     color = "#306bff"
                //   } else {
                //     color = "rgba(0,0,0,0)"
                //   }
                // }
                if (optoins.hidRiverLevel && optoins.hidRiverLevel.indexOf(geoJsonFeature.properties.DJ * 1) != -
                  1) {
                  color = "rgba(0,0,0,0)"
                }
                console.log(color)
                
                return {
                  fillColor: "#1100d6",
                  fillOpacity: 0.4,
                  // weight: getRiverWidth(geoJsonFeature.properties.HLDJ),
                  weight: width,
                  color: getColor(color)
                }
              }
        }).on("click", function(e) {
          console.log(e)
        })
        //  把这一组图层Layer放到同一个图层组layerGroup
        mylayerGroup = L.layerGroup([layer1])
        // 把图层组layerGroup添加到地图
        map.addLayer(mylayerGroup)
      },
      
  },
  watch: {
    value(newval,oldval) {
      mylayerGroup.clearLayers() // 删除图层
      this.addRiver(newval)
    },
    width(newval,oldval) {
      mylayerGroup.clearLayers()
      this.addRiver(this.value)
    },
    color() {
      mylayerGroup.clearLayers()
      color = this.color
      this.addRiver(this.value)
    }
  } 
})

function getColor(val) {
  if(val !=='rgba(0,0,0,0)') {
    // console.log(color)
    return color
  }else {
    return color1 = 'rgba(0,0,0,0)'
  }
}




function getRiverWidth(level) { //获取河流宽度
  let width = 12
  switch (level) {
    case "一级河流":
      width = 12
      break;
    case "二级河流":
      width = 10
      break;
    case "三级河流":
      width = 8
      break;
    case "四级河流":
      width = 6
      break;
    case "五级河流":
      width = 4
      break;
    case "六级河流":
      width = 4
      break;
    case "七级河流":
      width = 4
      break;
  }
  return width
}


function addText(data, className) { // 标记河流名字
  console.log(data)
  debugger
  
  let myIcon = L.divIcon({
    html: data.name,
    className: className ? className : 'my-div-icon',
    iconSize: 60,
  });
  let center = data.centroid ? data.centroid : data.center
  let marker = L.marker([center[1], center[0]], {
    icon: myIcon
  })
  map.addLayer(marker);
}

 </script>
</body>
</html>

river1.json数据:https://github.com/zhanghenxiao/leaflet.git

 版本2效果图：动态配置河流及添加省份渲染

 

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Cookie
 * @Date: 2022-03-18 17:24:49
 * @LastEditors: Zhang
 * @LastEditTime: 2022-03-19 15:59:19
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./data.json"></script>
<script src="./river1.json"></script>

<style>
  .leaflet-marker-icon.leaflet-interactive {
    font-size: 20px;
  }
  .box {
    position: absolute;
    top: 50px;
    left: 50px;
    /* width: 500px;
    height: 100px; */
    z-index: 10000;
  }
  .my-div-icon {
    display: none;
  }
  .rgba{
    color: rgba(0, 0, 0, 0);
  }
  .black {
    color: black;
  }
  .el-select {
    width: 140px;
  }
</style>
<div id="app">
  <div id="map" style="width: 100vw; height: 100vh"></div>
  <div class="box">
    <span>请配置渲染河流:</span>
    <el-select v-model="value">
      <el-option
        v-for="item in options.showRiverName"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <span>请配置河流宽度:</span>
    <el-select v-model="width">
      <el-option
        v-for="item in widthOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <span>请配置河流颜色:</span>
    <el-select v-model="color">
      <el-option
        v-for="item in colorOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</div>
</head>
<body>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <script>


var map,mylayerGroup,mylayerGroup2,mylayerGroup21,mylayerGroup22,
mylayerGroup3,color ="#306bff",isZoom=true,isClick=false,layerMarkers=[];
let style = {
  fillColor: "#e5dada",
  fillOpacity:.4,
  weight: 1 ,
  color: "#306bff"
}  
let style2 = {
  fillColor: "yellow",
  fillOpacity: 0.4,
  color: 'yellow'
}
function highlightFeature(e) {
  if(mylayerGroup3) {
      mylayerGroup3.clearLayers()
  }
  let layer2 = L.geoJSON(e.target.feature, {
      style: function (feature) {
          return {
          fillColor: "yellow",
          fillOpacity: 0.4,
          color: 'yellow',
        };
      }
  }).on('mouseover',function(e){
  var popup = L.popup();
      popup.setLatLng([e.latlng.lat,e.latlng.lng])
          .setContent(`<span>name:</span> <span>${e.layer.feature.properties.name}</span>`)
          .openOn(map);
  })
  mylayerGroup3 = L.layerGroup([layer2])
  map.addLayer(mylayerGroup3)
  // console.log(e);
  if(e.target.feature.properties.name === '吉林省') {
    mylayerGroup21.clearLayers()
    layerMarkers.clearLayers()
    isZoom =false
    vue.addRiver(vue.value,'yellow')
  } 
}

function onEachFeature(feature, layer) {
    layer.on({
      mouseover: highlightFeature,
    });
}
let vue = new Vue({
  el: '#app',
  data: {
    value: '松花江',
    width: 12,
    color: color,
    options: {
      showRiverName: [
      {value:'松花江',label: '松花江'},
      {value:'新凯河',label: '新凯河'},
      {value:'饮马河',label: '饮马河'},
      ]
    },
    widthOptions: [
      {value:'1',label: '1'},
      {value:'6',label: '6'}, 
      {value:'12',label: '12'},
    ],
    colorOptions: [
      {value:'#306bff',label: '蓝色'},
      {value:'red',label: '红色'},
    ]
  },
  mounted() {
    this.init()
  },
  methods: {
      init() {
        map = L.map('map').setView([29.40268, 106.54041], 5);
        var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
        L.tileLayer(wpUrl, {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        let geoJsonLayer = L.geoJson(data, {
          style,  
          onEachFeature: (feature, layer) => {//onEachFeature回调  关键方法
            if (onEachFeature) {
        　　　　　　onEachFeature(feature, layer); }
        　　 }
        }).addTo(map)
        this.addRiver(this.value)
      },
      addRiver(val) {
          let width = this.width
          let layerName = val         
          let layerColor =  isClick? 'yellow': this.color
          let layer1  = L.geoJSON(river, {
                id: "RIVER_COLOR",
                onEachFeature: (feature, layer) => {//onEachFeature回调  关键方法
          　　　　　　this.riverOnEachFeature(feature, layer,layerName,width,layerColor);
                }
          　　 
        })
         //  把这一组图层Layer放到同一个图层组layerGroup
        //  mylayerGroup = L.layerGroup([layer1])
        // // // 把图层组layerGroup添加到地图
        // map.addLayer(mylayerGroup)
        // console.log('getBounds');
        // console.log(layer1.getBounds()); 
        

      },

      riverOnEachFeature(feature, layer,layerName,width,color) {
        let nameClass=''
          if(feature.properties.SSHL !== layerName) {
            let layer1 = L.geoJSON(feature, {
              style: function (feature) {
                  return {
                  fillColor: "red",
                  fillOpacity: 0.4,
                  color: 'red',
                };
              }
            }).on("click", function(e) {
          console.log(e)
          let layer2 = L.geoJSON(e.layer.feature, {
              style: function (feature) {
                console.log('feature');
                console.log(feature);
                  return {
                  fillColor: "rgba(0,0,0,0)",
                  fillOpacity: 0.4,
                  color: 'rgba(0,0,0,0)',};
              }
          }).bindPopup(function (layer) {
            return  `<h1>${layer.feature.properties.SSHL}</h1>`
          })

        }).bindPopup(function (layer) {
            return  `<h1>${layer.feature.properties.SSHL}</h1>`
        }) // 不显示其他河流则不添加到图层就行
        // mylayerGroup2 = L.layerGroup([layer1])
        // map.addLayer(mylayerGroup2)   
        // console.log(11);
        
        }else {
          let layer1 = L.geoJSON(feature, {
              style: function (feature) {
                // console.log(feature);
                addText(feature.properties, nameClass='black')
                  return {
                  fillColor: color,
                  fillOpacity: 0.4,
                  weight: width,
                  color: color,
                };
              }
          }).on("click", function(e) {
          isClick = true
          let layer2 = L.geoJSON(e.layer.feature, {
              style: function (feature) {
                console.log('feature');
                console.log(feature);
                  return {
                    fillColor: "yellow",
                    fillOpacity: 0.4,
                    weight: 12,
                    color: 'yellow'};
              }
          }).bindPopup(function (layer) {
            return  `<h1>${layer.feature.properties.SSHL}</h1>`
          })
          mylayerGroup22 = L.layerGroup([layer2])
          map.addLayer(mylayerGroup22)
          // console.log(e)
        }).bindPopup(function (layer) {
            return  `<h1>${layer.feature.properties.SSHL}</h1>`
        })
        let bounds = layer1.getBounds() // 返回地图视图的经纬度边界
        console.log(bounds);
        if(isZoom){
          map.flyToBounds([
            [bounds._southWest.lat, bounds._southWest.lng],
            [bounds._northEast.lat, bounds._northEast.lng]
          ]) 
        }
        mylayerGroup21 = L.layerGroup([layer1])
        map.addLayer(mylayerGroup21)           
        }
        
      },
      

      
  },
  watch: {
    value(newval,oldval) {
      this.value = newval
      if(mylayerGroup21) {
         mylayerGroup21.clearLayers()
      }
      if(mylayerGroup22) {
         mylayerGroup22.clearLayers()
      }
      layerMarkers.clearLayers()
      isZoom = true
      isClick = false
      this.addRiver(this.value)
    },
    width(newval,oldval) {
      this.width = newval
      // mylayerGroup.clearLayers()
      if(mylayerGroup21) {
         mylayerGroup21.clearLayers()
      }
      layerMarkers.clearLayers()
      isZoom = true
      isClick = false
      this.addRiver(this.value)
    },
    color(newval,oldval) {
      this.color = newval
      // mylayerGroup.clearLayers()
      if(mylayerGroup21) {
         mylayerGroup21.clearLayers() // 删除图层
      }
      layerMarkers.clearLayers()
      color = this.color
      isZoom = true
      isClick = false
      this.addRiver(this.value)
    }
  } 
})

function getColor(val) {
  if(val !=='rgba(0,0,0,0)') {
    // console.log(color)
    return color
  }else {
    return color1 = 'rgba(0,0,0,0)'
  }
}


function addText(data, className) {
  let myIcon = L.divIcon({
    html: data.SSHL,
    className: className ? className : 'my-div-icon',
    iconSize: 60,
  });
  let center = data.centroid ? data.centroid : data.center
  let marker = L.marker([center[1], center[0]], {
    icon: myIcon
  })
  layerMarkers = L.layerGroup([marker])  //  设置marker 图层组，方便图层管理
  map.addLayer(layerMarkers);
  }
 </script>
</body>
</html>

流氓也是种气质 _Cookie
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Leaflet--建设移动设备友好的互动地图
weixin_33868027的博客
06-14 118
Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发，尽管代码仅有 33 KB，但它具有开发者开发在线地图的大部分功能。 Leaflet是一个为建设移动设备友好的互动地图。而开发的现代的、开源的 JavaScript 库。它是由 Vladi...
leaflet-canvas:在 Leaflet 渲染到画布之前加载的脚本
06-10
传单画布 在 Leaflet 渲染到画布之前加载的脚本
水体渲染小结
the_shy33的博客
07-26 2410
最近接触了水体渲染，发现水体渲染这一块所涉及到的知识非常的多，所以这里就来总结一下大概有的知识点，并展示一下一些粗略的水体效果。 因为水体渲染实在是太多，因为考虑到开发环境是移动端，一切都以性能为主而去尽量还原水体，我通过XMIND编写了一个思维导图，下面先展现水体渲染的一个大致的思路。 简单概括水体渲染可以分为两大块，分别是水体着色和水体动画，因为本demo是使用一块面片来模拟水体，所以一些比较复杂的效果会比较难以实现，毕竟考虑到移动端的性能问题，而且在里面也有很多细分的技术，下面便一一介绍。 1.反射
Leaflet 加载Mapbox studio pbf格式矢量切片（二）
做GIS梦的人
09-24 3081
关于使用加载加载Mapbox studio pbf格式矢量切片，还有一种方案，使用leaflet-mapbox-gl。 这个插件的本质是在leaflet上添加一个div图层，把这个div给mapbox作为容器进行渲染。可以简单的理解为两个div的叠加，当你移动地图时，两个地图同步移动。注意把Mapbox的地图背景设置成透明的MapboxGL设置地图背景透明，否则永远看不到leaflet图层。 ...
Leaflet入门指南：从零开始创建交互式地图
最新发布
cheungxiongwei的博客
08-02 795
在本篇Leaflet入门指南中，我们从头开始创建了一个交互式地图，并通过WebStorm集成实现了地图的展示。通过安装Leaflet库和创建HTML文件，我们成功地在网页上展示了地图，并向地图添加了标记和弹出窗口。无论你是初学者还是有经验的开发者，这个指南都能帮助你了解Leaflet库的基础知识，让你迈出地图开发的第一步。开始探索和使用Leaflet的强大功能，构建属于自己的地图项目，并享受这令人兴奋的学习过程吧！
leaflet实现点击线段高亮与线段动画
qq_45689385的博客
04-16 2587
1、获取geoJSON数据，绘制到地图中,此时透明的设置为0隐藏，至于geoJSON数据是怎么处理的请移步到leaflet简单使用 //绘制河流线段 drawRiveLineData(states) { // states：处理过后的 geoJSON 数据 let self = this this.riverGeoJson = L.geoJSON(states, { style: function(feature) { // 设置样式 return { ..
excel-vba.rar_VBA复制 筛选_VBa_latecis_leaft91_vba自动筛选
09-19
利用EXCEL VBA 实现复制自动筛选后的数据区域程序
纯CSS图片预加载实例 摆脱Javascript预载的束缚
09-25
有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫不麻烦的预载你的图片,需要的朋友可以了解下
leaflet中文api
05-17
leaflet中文api
leaflet-color-markers:标准传单标记的颜色变化
04-13
传单颜色标记 标准传单标记的颜色变化： 颜色 标记2x 记号笔 内部颜色 外面的颜色 蓝色的 ＃2A81CB ＃3274A3 金子 ＃FFD326 ＃C1A32D 红色的 ＃CB2B3E ＃982E40 ...var greenIcon = new L ....
Leaflet.MultiOptionsPolyline, 多颜色多段线的传单插件.zip
09-18
Leaflet.MultiOptionsPolyline, 多颜色多段线的传单插件 Leaflet.MultiOptionsPolyline支持多段线的多个样式的小叶 -plugin 。在这里你可以看到一个演示程序。用法看看这个演示。 包含源代码的链接。...
leaflet-wmts:leaflet 加载 WMTS 服务地图底图，如国内各级天地图服务
05-22
leaflet加载wmts图层 L.tileLayer.wmts("http://www.ais.msa.gov.cn/MapService",{ "layer": "default","style": "default","format": "image/png","tilematrixSet": "advsea" //高级海图 advsea ,基础海陆混合 ...
完整鹰眼图实现
11-18
完整鹰眼图实现,地图可以用自己定义的地图！可以执行，可以自己修改！
Map-Block-Leaflet:WordPress:world_map:的地图块传单
04-29
古腾堡的Leaft地图块 该项目的目的是在Google Maps中提供一种将WordPress内容包含在Maps中的替代方法，为此，我利用了Gutenberg编辑器的新功能 我将传单用于地图和作为阿尔及利亚的搜索引擎 目标 在WordPress内容内...
Leaflet系列：分享切片动态渲染
地理信息技术杂谈 博客，欢迎技术交流
01-08 1558
在leaflet上，根据加载的切片数据，使用webgl的方式，动态渲染hillshade和contour（轮廓图效果）。 github地址： https://github.com/frogcat/leaflet-tilelayer-glue 原始底图： 使用contour渲染效果图： 使用hillshade渲染效果图： 在网站上有一个预览效果，点击即可打开网页进行查看。 此效果使用了webg...
[VUE+Leaflet开发案例一][海洋环境监测系统] 第4章 修改配置参数
liu2004051957的博客
04-10 137
本系列文章的主题是详细分享一个基于VUE+Leaflet应用框架的WebGIS前端系统开发案例，从应用场景、开发技术、开发环境、开发调试、功能开发、系统发布等多个开发过程进行详细讲解及代码分享。
leaflet基本使用
qq_43519131的博客
03-31 3766
官网（英文）：https://iclient.supermap.io/examples/leaflet/examples.html#iServer。高德官网的名词解释：https://lbs.amap.com/api/javascript-api/guide/abc/components。项目地址 gitee：https://gitee.com/philippines-kisses-snow/leaflet-map。（1）直接添加，官网当中是直接建立一个标记，并添加到地图（不推荐，不好管理）
Leaflet空间分析
kudouranaaa的博客
10-27 572
Leaflet空间分析，包括缓冲区分析，叠加分析，核密度分析
pcl outofcore源码解析
06-07
PCL（Point Cloud Library）是一个开源的、跨平台的点云处理框架，它提供了大量的点云处理算法和工具，其中之一就是 Out-of-Core（OOC）模块。OOC模块可以在内存不足的情况下处理大规模点云数据，它将点云数据分成多个块（chunks）进行处理，每个块可以被存储到硬盘上，不需要全部加载到内存中。 Out-of-Core模块的源代码位于PCL库的pcl/outofcore目录下，它包含了多个类和文件，其中最核心的是OutofcoreOctree类。下面是OutofcoreOctree类的主要代码结构和功能解析： 1. 类定义: ``` template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeBaseNode; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeAbstractNode; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeDiskContainer; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeRamContainer; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeBase; template<typename PointT, typename LeafT> class OutofcoreOctreeBaseNode<OutofcoreOctreeBase<OutofcoreOctreeDiskContainer<OutofcoreOctreeBaseNode<OutofcoreOctreeDiskContainer<PointT>, PointT, LeafT>, PointT, LeafT> >, PointT, LeafT>; template<typename PointT, typename LeafT> class OutofcoreOctreeBaseNode<OutofcoreOctreeBase<OutofcoreOctreeRamContainer<OutofcoreOctreeBaseNode<OutofcoreOctreeRamContainer<PointT>, PointT, LeafT>, PointT, LeafT> >, PointT, LeafT>; template<typename PointT, typename LeafT> class OutofcoreOctreeBase<OutofcoreOctreeDiskContainer<OutofcoreOctreeBaseNode<OutofcoreOctreeDiskContainer<PointT>, PointT, LeafT>, PointT, LeafT> >; template<typename PointT, typename LeafT> class OutofcoreOctreeBase<OutofcoreOctreeRamContainer<OutofcoreOctreeBaseNode<OutofcoreOctreeRamContainer<PointT>, PointT, LeafT>, PointT, LeafT> >; template<typename PointT, typename LeafT> class OutofcoreOctreeDiskContainer<OutofcoreOctreeBaseNode<OutofcoreOctreeDiskContainer<PointT>, PointT, LeafT>, PointT, LeafT>; template<typename PointT, typename LeafT> class OutofcoreOctreeRamContainer<OutofcoreOctreeBaseNode<OutofcoreOctreeRamContainer<PointT>, PointT, LeafT>, PointT, LeafT>; template<typename PointT, typename LeafT> class OutofcoreOctreeDiskContainer<boost::shared_ptr<OutofcoreOctreeBaseNode<OutofcoreOctreeDiskContainer<PointT>, PointT, LeafT> >, PointT, LeafT>; template<typename PointT, typename LeafT> class OutofcoreOctreeRamContainer<boost::shared_ptr<OutofcoreOctreeBaseNode<OutofcoreOctreeRamContainer<PointT>, PointT, LeafT> >, PointT, LeafT>; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeBaseNode { }; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeAbstractNode { }; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeDiskContainer { }; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeRamContainer { }; template<typename Container, typename PointT, typename LeafT> class OutofcoreOctreeBase { }; ``` 2. OutofcoreOctreeBaseNode类： OutofcoreOctreeBaseNode是OutofcoreOctree模块的最基本的节点类型，它是一个模板类，需要指定点云数据容器类型(Container)、点云类型(PointT)和叶子节点类型(LeafT)。OutofcoreOctreeBaseNode类定义了节点的基本属性和行为，例如节点的索引、节点的深度、节点的父节点和子节点等。OutofcoreOctreeBaseNode还提供了一些方法，如添加点云数据、获取包围盒等。 3. OutofcoreOctreeAbstractNode类： OutofcoreOctreeAbstractNode类是OutofcoreOctreeBaseNode类的基类，它定义了纯虚函数，需要在子类中实现。OutofcoreOctreeAbstractNode类主要提供了节点的一些抽象方法，如获取节点的包围盒、获取节点的点云数据等。 4. OutofcoreOctreeDiskContainer类和OutofcoreOctreeRamContainer类： OutofcoreOctreeDiskContainer类和OutofcoreOctreeRamContainer类是点云数据容器类，它们分别用于处理硬盘存储和内存存储的点云数据。这两个类都继承自OutofcoreOctreeAbstractNode类，因此都需要实现OutofcoreOctreeAbstractNode类中的纯虚函数。OutofcoreOctreeDiskContainer类和OutofcoreOctreeRamContainer类都提供了一些方法，如添加点云数据、获取包围盒等。 5. OutofcoreOctreeBase类： OutofcoreOctreeBase类是OutofcoreOctree模块的主要类，它是一个模板类，需要指定点云数据容器类型(Container)、点云类型(PointT)和叶子节点类型(LeafT)。OutofcoreOctreeBase类封装了OutofcoreOctreeBaseNode类和OutofcoreOctreeAbstractNode类的一些方法，提供了一些高级的功能，如点云数据的读取、写入、压缩、解压等。OutofcoreOctreeBase类还提供了一些方法，如获取节点、获取包围盒等。 总体来说，Out-of-Core模块的源代码结构比较复杂，涉及到多个类和文件，但其核心代码就是OutofcoreOctree类。OutofcoreOctree类的实现非常精简和高效，它通过将点云数据分块存储到硬盘上，实现了对大规模点云数据的高效处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值