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 是一种用于编码各种地理数据结构的格式 […]。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