Leaflet 学习笔记（二）

leaflet 笔记（二）

图标创建

地图上的标记可以自定义，需要导入自己的图片

要制作自定义图标，我们通常需要两个图像——实际图标图像及其阴影图像。在本教程中，我们采用了 Leaflet 徽标并从中创建四个图像 — 3 个不同颜色的叶子图像和一个阴影图像：

总的来说，需要一个图片本体以及一个阴影图片

创建图标

由L.icon创建

 //创建标记
  var greenIcon = L.icon({
    iconUrl: './assets/leaf-green.png', //图标本体
    shadowUrl: './assets/leaf-green-shadow.png', //图标阴影

    iconSize: [38, 95], // size of the icon
    shadowSize: [50, 64], // size of the shadow
    iconAnchor: [22, 94], // 点的图标，将对应于标记的位置
    shadowAnchor: [4, 62], // the same for the shadow
    popupAnchor: [-3, -76] // 弹出窗口相对于 iconAnchor 应该打开的点
  });
  //添加标记
  var marker = L.marker([30.550317, 114.309043], {
    icon: greenIcon
  }).addTo(map);
  //添加弹窗
  marker.bindPopup("<b>Hello world!</b><br>我是一个绿叶.").openPopup();

如上有一个问题，图片需要透明底图

其实，有无阴影不是特别重要，阴影如果有需求可以通过css渲染出来，但我不会。。。。

如高德地图就有自带的阴影渲染，如果需要阴影可以二次封装。

无障碍地图

保留有用的默认值

传单带有一组有用的默认值。

默认情况下，地图容器和标记可通过键盘操作， 这使无法使用指针设备的用户能够使用。 在更改此类默认值之前，请考虑对用户的影响。

标记必须贴上标签

使用标记时， 确保每个都有唯一且具有描述性的替代项或标题至关重要：

var marker = L.marker([50.4501, 30.5234],
  {alt: 'Kyiv'}).addTo(map) // "Kyiv" is the accessible name of this marker
  .bindPopup('Kyiv, Ukraine is the birthplace of Leaflet!');

GeoJSON与leaflet结合使用

GeoJSON 是许多 GIS 技术和服务中非常流行的数据格式——它简单、轻量级、直接，而且 Leaflet 非常擅长处理它。在此示例中，您将学习如何创建从 GeoJSON 对象创建的地图矢量并与之交互。

关于地理JSON

根据 GeoJSON 规范 （RFC 7946）：

GeoJSON 是一种用于编码各种地理数据结构的格式 […]。GeoJSON 对象可以表示空间区域（几何）、空间边界实体（特征）或要素列表（特征集合）。GeoJSON 支持以下几何类型：点、线字符串、多边形、多点、多线字符串、多多边形和几何集合。GeoJSON 中的要素包含几何对象和其他属性，要素集合包含要素列表。

L.geoJSON(<Object> geojson?, <GeoJSON options> options?)

L.geoJSON(data, {
    style: function (feature) {
        return {color: feature.properties.color};
    }，
    filter：function (feature) {
    return true;
    }，
}).bindPopup(function (layer) {
    return layer.feature.properties.description;
}).addTo(map);

几个常用的属性：

1、filter：可以能过滤要素，例如我们可以只加载，point类型的要素。
2、style：给每个要素设置样式
3、onEachFeature：遍历每个要素

上述的bindPopup方法是给每个要素添加一个弹窗，然后用addTo方法添加到地图容器中。其他方法包括一些弹窗，图层一类方法都是一样的不在介绍，还有一些静态方法，详细见官方api。

来张图层继承图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4u64uSXI-1683946756712)(leaflet.assets/70.png)]

传单支持上述所有 GeoJSON 类型，但要素和要素集合效果最佳，因为它们允许您使用一组属性描述要素。我们甚至可以使用这些属性来设置传单向量的样式。下面是一个简单的 GeoJSON 功能的示例：

 map.addLayer(GaoDeLayer);
  var geojsonFeature = {
    "type": "Feature",
    "properties": {
      "name": "Coors Field",
      "amenity": "Baseball Stadium",
      "popupContent": "This is where the Rockies play!"//弹窗内容，需要在在调用geoJSON后绑定弹窗，操作如该部分最上面实例
    },
    "geometry": {
      "type": "Point",//类型，点
      "coordinates": [114.309043, 30.550317]//坐标，这里是正常显示的经纬度
    }
  };
  L.geoJSON(geojsonFeature, ).addTo(map);//生成GeoJSON，添加点到map


  // 点特殊，默认为标记图标，若要变为圆形，需要转换
  L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
      return L.circleMarker(latlng, geojsonFeature);
    }
  }).bindPopup(function (layer) {
    console.log(layer);
    return layer.defaultOptions.properties.popupContent;
  }).addTo(map);

解析

  // 点特殊，默认为标记图标，若要变为圆形，需要转换
  L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
      return L.circleMarker(latlng, geojsonFeature);
    }//类型，点；转换图表类型，返回新的图标类型style
  }).bindPopup(function (layer) {//layer为图层本身
    console.log(layer);
    return layer.defaultOptions.properties.popupContent;//弹窗属性内容
  }).addTo(map);

如图可以找到弹窗内容，并绑定。

我们可以创建一个空的 GeoJSON 图层并将其分配给一个变量，以便我们以后可以向其添加更多功能。

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

选项

风格

该选项可用于以两种不同的方式设置功能样式。首先，我们可以传递一个简单的对象，该对象以相同的方式设置所有路径（折线和多边形）的样式：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);

或者，我们可以传递一个函数，根据其属性设置各个特征的样式。在下面的示例中，我们检查 “party” 属性并相应地设置多边形的样式：

var states = [{
    "type": "Feature",//类型：要素
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",//几何类型:多边形
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",//几何类型
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-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);

点

点的处理方式与折线和面不同。默认情况下，将为地理 JSON 点绘制简单标记。我们可以通过在创建 GeoJSON 层时在 GeoJSON 选项对象中传递一个函数来改变这一点。此函数传递一个 LatLng，并应返回 ILayer 的实例，在这种情况下可能是标记或圆标记。pointToLayer

在这里，我们使用选项来创建圆标记：pointToLayer

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJSON(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

我们也可以在此示例中设置属性 — 如果您在函数中创建像圆形这样的矢量层，Leaflet 足够智能，可以将样式应用于 GeoJSON 点。style``pointToLayer