leaflet学习笔记一(初识GeoJSON)

近期公司需要开发遥感方面的项目,故需要学习leaflet相关的知识,尤其是在地图上工具GeoJSON绘制图形,下面简介GeoJSON。

简介

Geojson是一个很重要的数据格式,结构清晰,表达简洁。

与ESRI的shapefile相比更加小巧简单,但是表现的数据内容却是一样的,我觉得GeoJson大有取代shapefile的势头。与还不是很成熟的topojson相比,geojson已经兼容很多前端后段的工具,有很多脚本插件。如下:

awesome-geojson 太多太多
geojson-js-utils 空间数据简单处理js实现
geojson-python-utils 空间数据简单处理python实现

结构说明

点的数据格式

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

type指的是数据类型,它是一个feature。它包含几何要素和属性。几何要素包含要素的类型和坐标。属性可

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Leaflet 中,GeoJSON 是一种常见的用于表示矢量数据的数据格式。GeoJSON 由一系列的点、线和多边形组成,可以用来表示地理位置、边界和区域。以下是一些使用 GeoJSONLeaflet 操作: 1. 加载 GeoJSON 数据:使用 Leaflet 的 ajax() 方法加载 GeoJSON 数据。你可以将 GeoJSON 数据存储在一个外部的 .json 文件中,然后使用 ajax() 方法加载该文件。 ```javascript // 加载 GeoJSON 数据 var geojsonLayer = new L.GeoJSON.AJAX("data.geojson"); ``` 2. 将 GeoJSON 数据添加到地图中:使用 addLayer() 方法将 GeoJSON 数据添加到地图中。 ```javascript // 将 GeoJSON 数据添加到地图geojsonLayer.addTo(map); ``` 3. 样式设置:使用 style() 方法设置 GeoJSON 数据的样式,包括颜色、填充、线宽等。 ```javascript // 设置 GeoJSON 数据的样式 geojsonLayer.style({ color: "#ff0000", weight: 2, opacity: 0.5, fillOpacity: 0.2, fillColor: "#ff0000" }); ``` 4. 弹出窗口:使用 bindPopup() 方法为 GeoJSON 数据添加弹出窗口。 ```javascript // 为 GeoJSON 数据添加弹出窗口 geojsonLayer.bindPopup("<b>Hello world!</b><br>I am a popup."); ``` 5. 事件绑定:使用 on() 方法为 GeoJSON 数据绑定事件,包括 click、mouseover 等。 ```javascript // 为 GeoJSON 数据绑定 click 事件 geojsonLayer.on("click", function(e) { console.log("Clicked", e); }); ``` 以上是使用 GeoJSONLeaflet 操作,你可以根据实际情况进行调整和扩展。需要注意的是,GeoJSON 数据需要符合 GeoJSON 标准格式,否则在加载和处理过程中可能会出现问题。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值