Leaflet简单使用

react使用leaflet

1、安装leaflet

npm install leaflet

2、引入Leaflet CSS

import "leaflet/dist/leaflet.css";

3、创建地图容器

<div id="map"> </div>

4、初始化地图

使用Leaflet的L.map方法来初始化地图，并设置视图和缩放级别

import L from "leaflet"
​
const myMap = L.map('map').setView([51.505,-0.09],13);

5、添加地图瓦片

使用L.tileLayer方法添加地图瓦片

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);

6、添加标记和弹出窗口

使用L.marker添加标记，并使用L.popup为其添加弹出窗口

L.marker([51.5, -0.09]).addTo(myMap)
  .bindPopup("<b>Hello world!</b>").openPopup();

在 Leaflet 中使用 GeoJSON

1、什么是GeoJson

GeoJSON 是一种用于编码各种地理数据结构的格式[...]。一个 GeoJSON 对象可以代表一个空间区域（Geometry），一个有空间界限的实体（Feature），或者一个特征列表（FeatureCollection）。GeoJSON支持以下几何体类型。点、线字符串、多边形、多点、多线字符串、多多边形和几何体集合。GeoJSON 中的特征包含一个几何对象和额外的属性，而特征集合则包含一个特征列表。高亮效果最好。

geojsonFeature 的简单例子

var geojsonFeature = {    
    "type": "Feature", //类型：这表明这是一个GeoJSON的Feature对象，它表示一个具体的地理实体
    "properties": { //属性, 用来存储与地理实体相关的非几何数据。 
        "name": "Coors Field",        
        "amenity": "Baseball Stadium",//类型或用途 
        "popupContent": "This is where the Rockies play!" //当在地图上点击这个地理特征时，弹出窗口中显示的内容。
    },    
    "geometry": {//定义了地理实体的几何形状    
        "type": "Point", //指定几何类型为点。     
        "coordinates": [-104.99404, 39.75621] //定义了点的坐标 
    } 
};

2、GeoJson图层

可以先创建一个空的GeoJSON图层，将其分配给一个变量，这样在以后向其添加更多的特征。

var myLayer = L.geoJSON().addTo(map);
myLayer.add(geojsonFeature);

也可以直接加上去

L.geoJSON(geojsonFeature).addTo(map);

3、选项

style

style有两种选项可用于以两种不同的方式为特征设置样式。首先，我们可以传入一个简单的对象，以相同的方式对所有路径（折线和多边形）进行样式处理

var myLines = [{
  "type":"LineString"
  "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
},{
  "type": "LineString",    
  "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}]
var myStyle = {    
    "color": "#ff7800",    
    "weight": 5,    
    "opacity": 0.65 };
L.geoJSON(myLines, {    
    style: myStyle }).addTo(map);

另外，我们也可以传递一个函数，根据单个特征的属性来确定其样式。

var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[-104.05, 48.99]]
    }
}, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[-109.05, 41.00]]
    }
}];
​
L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};
            case 'Democrat':   return {color: "#0000ff"};
        }
    }
}).addTo(map);

onEachFeature

onEachFeature 选项是一个函数，在将其添加到 GeoJSON 图层之前，会对每个 Feature 进行调用。使用这个选项的一个常见原因是在点击地物的时候给它们附加一个弹出窗口。

L.geoJSON(geojsonFeature, {
    onEachFeature: onEachFeature }).addTo(map);

filter

filter 选项可用于控制 GeoJSON feature 的可见性。传递一个函数作为 filter 选项，利用特征的属性值，通过返回 true 或 false 来控制可见性。

在下面的例子中，"Busch Field "将不会显示在地图上。

var someFeatures = [{
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "show_on_map": true
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
}, {
    "type": "Feature",
    "properties": {
        "name": "Busch Field",
        "show_on_map": false
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.98404, 39.74621]
    }
}];
​
L.geoJSON(someFeatures, {
    filter: function(feature, layer) {
        return feature.properties.show_on_map;
    }
}).addTo(map);