leaflet - 传单如何过滤标记
问题描述
所以我要展示两件事,1)这是图像
2)这是我的代码:这是我的代码:
// center of the map
var center = [14.240861626831018, 121.12966240455648];
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl,
{
maxZoom: 17,
minZoom:13
}),
map = new L.Map('map',
{
attributionControl: false,
center: new L.LatLng(14.240861626831018, 121.12966240455648), zoom: 13
}),
drawnItems = L.featureGroup().addTo(map);
L.control.layers({
'osm': osm.addTo(map),
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',
{
attribution: 'google',
maxZoom: 20,
minZoom:13
}),
"monolight": L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
{
attribution: 'google',
maxZoom: 20,
minZoom:13,
id: 'mapbox.light'
}),
"dark": L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}{r}.png',
{
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 20,
minZoom:13
})
}, { 'Enable markers': drawnItems },
{
position: 'bottomleft',
collapsed: true
}).addTo(map);
map.addControl(new L.Control.Draw({
position: 'bottomleft',
edit: {
edit:false,
remove: true,
featureGroup: drawnItems,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
},
// disable toolbar item by setting it to false
polygon: true,
polyline:true,
circle: false,
rectangle:false,
marker: true,
circlemarker: false
}
}));
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
map.addLayer(layer);
if (type === 'marker') {
layer.bindPopup('LatLng: ' + layer.getLatLng()).openPopup();
}
});
我想知道是否可以使用复选框分隔标记?我的意思是我想为每个标记制作单独的复选框。就像我只想显示线条一样,我可以隐藏标记和多边形。对不起,混乱。谢谢!
解决方案
推荐阅读
- amazon-web-services - 如何在 Raspbian OS 上运行 AWS ecs-cli - Raspberry Pi 3 B+
- r - R闪亮中的多个反应选择输入
- c++ - 带索引的二叉树节点
- aws-lambda - AWS Cognito 和 AWS Lambda - SAM 本地
- python - 熊猫导入:ModuleNotFoundError:没有名为“pandas._libs.tslib”的模块
- javascript - AJAX 获取请求和 javascript
- javascript - 使 .then() 函数返回一个由另一个函数使用的承诺
- google-cloud-platform - 即使 Google Cloud 显示它们也找不到匹配的索引
- sql-server - Azure 本地数据网关——要走的路,还是矫枉过正?
- html - 我的选择选项在 AngularJS 中更改为 null