MapServer WFS Leaflet Интерактивная карта.

Mapserver, GeoServer, MapGuide, Google и другое ПО для веб-картографии
Ответить
ullu
Новоприбывший
Сообщения: 1
Зарегистрирован: 05 сен 2020, 10:36
Репутация: 0
Откуда: Махачкала

MapServer WFS Leaflet Интерактивная карта.

Сообщение ullu » 23 окт 2020, 19:35

Здравствуйте, коллеги!
Прошу помощи.
Мне нужно выделение объекта в 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: '&copy; <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-WFST
Пытался применить инструкцию с официального сайта Leaflet https://leafletjs.com/examples/choropleth/ , но безрезультатно - данные там подгружаются с файла .js в формате geojson. Мне же нужен именно сервис wfs, т.к. данные идут с базы .sqlite (связка Mapserver+QGis+Spatialite) - т.е. данные редактируются в QGis и постоянно обновляются, к этой же базе данных подключается Mapserver и выводит эти данные в Leaflet. Не знаю как применить тот пример в моем случае.
Нет знаний в javascript программировании, пытаюсь применять готовые примеры.
Также не хватает времени и знания английского. Уже голову сломал.

Ответить

Вернуться в «Веб-картография»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 7 гостей