Прошу помощи.
Мне нужно выделение объекта в Leaflet при клике мышью. Добился только выделения всего слоя при наведении курсора, а нужно именно по объектам и при клике.
Вот мой неуклюжий код:
Код: Выделить всё
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<title></title>
<style>
html, body, #map {
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="../dist/leaflet-wfst.src.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([50, 50], 3);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var defaultStyle = {
color: "#2262CC",
weight: 2,
opacity: 0.6,
fillOpacity: 0.1,
fillColor: "#2262CC",
fillColor: 'transparent'
};
var highlightStyle = {
color: 'red',
weight: 5,
opacity: 0.6,
fillOpacity: 0.65,
fillColor: 'red',
fillColor: 'transparent'
};
var polygons = new L.WFS({
version: '1.1.0',
url: 'http://localhost/cgi-bin/mapserv.exe?map=E:/data/test/test.map',
request: 'GetFeature',
showExisting: true,
typeNS: 'ms',
typeName: 'Regions',
crs: L.CRS.EPSG3857,
geometryField: 'msGeometry',
style: defaultStyle
});
map.addLayer(polygons);
var popup = L.popup();
polygons.on('click', function (event) {
popup
.setLatLng(event.latlng)
.setContent(event.layer.getProperty('NAME') + '<br/>' + event.layer.getProperty('ADM3_NAME'))
.openOn(map);
});
polygons.on('mouseover', function (e) {
var layer = e.target;
layer.setStyle(highlightStyle);
});
polygons.on('mouseout', function (e) {
var layer = e.target;
layer.setStyle(defaultStyle);
});
</script>
</body>
</html>
Код: Выделить всё
MAP
NAME "WFS"
STATUS ON
FONTSET "E:/data/fonts/fonts.list"
EXTENT -180 -90 180 90
SIZE 1600 700
IMAGECOLOR 255 255 255
SHAPEPATH "E:/data/test/shp/"
WEB
IMAGEPATH "E:/tiles/ms_tmp/"
IMAGEURL "/ms_tmp/"
METADATA
"wfs_title" "Regions Russia"
"wfs_abstract" "Regions Russia"
"wfs_onlineresource" "http://localhost/cgi-bin/mapserv?map=/data/test/test.map&"
"wfs_srs" "EPSG:4326 EPSG:3857"
"wfs_enable_request" "*"
END
END
PROJECTION
"init=epsg:3857"
END
LAYER
NAME "Regions"
DATA "Regions.shp"
STATUS ON
TYPE POLYGON
CLASS
NAME "Regions"
STYLE
COLOR 255 128 128
OUTLINECOLOR 255 0 0
END
END
METADATA
"wfs_title" "Regions Russia"
"wfs_abstract" "Regions Russia"
"wfs_onlineresource" "http:/localhost/cgi-bin/mapserv?map=/data/test/test.map&"
"wfs_enable_request" "*"
"gml_include_items" "all"
"gml_featureid" "fid"
END
PROJECTION
"init=epsg:4326"
END
END
END
Пытался применить инструкцию с официального сайта Leaflet https://leafletjs.com/examples/choropleth/ , но безрезультатно - данные там подгружаются с файла .js в формате geojson. Мне же нужен именно сервис wfs, т.к. данные идут с базы .sqlite (связка Mapserver+QGis+Spatialite) - т.е. данные редактируются в QGis и постоянно обновляются, к этой же базе данных подключается Mapserver и выводит эти данные в Leaflet. Не знаю как применить тот пример в моем случае.
Нет знаний в javascript программировании, пытаюсь применять готовые примеры.
Также не хватает времени и знания английского. Уже голову сломал.