Map
Changes
ModelData/WebModel/WebDataManager.cs 2(+2 -0)
web-map/Content/Site.css 19(+19 -0)
web-map/Scripts/SiteScripts/Events.js 112(+101 -11)
web-map/Scripts/SiteScripts/Init.js 24(+22 -2)
web-map/Scripts/SiteScripts/Output.js 38(+34 -4)
web-map/Views/Map/Map.cshtml 54(+51 -3)
Details
ModelData/WebModel/WebDataManager.cs 2(+2 -0)
diff --git a/ModelData/WebModel/WebDataManager.cs b/ModelData/WebModel/WebDataManager.cs
index f7e5ba8..c10e633 100644
--- a/ModelData/WebModel/WebDataManager.cs
+++ b/ModelData/WebModel/WebDataManager.cs
@@ -54,11 +54,13 @@ namespace ModelData.WebModel
foreach (var type in context.SettlementTypes)
temp.Add(type.Title);
model.arrayNameTypes = temp.ToArray();
+ Array.Sort(model.arrayNameTypes);
temp.Clear();
foreach (var region in context.Regions)
temp.Add(region.Title);
model.arrayNameRegions = temp.ToArray();
+ Array.Sort(model.arrayNameRegions);
temp.Clear();
foreach (var settlement in context.MapPoints)
web-map/Content/Site.css 19(+19 -0)
diff --git a/web-map/Content/Site.css b/web-map/Content/Site.css
index edb9213..0b7f1c2 100644
--- a/web-map/Content/Site.css
+++ b/web-map/Content/Site.css
@@ -191,3 +191,22 @@ a.article, a.article:hover {
#sidebar-right .sidebar-right-text {
padding: 0.2rem 0.2rem;
}
+
+.yandexMapsFilterElement {
+ box-sizing: border-box !important;
+ overflow: hidden;
+ padding-right: 13px;
+ padding-left: 30px;
+ max-width: 250px;
+ width: 200px;
+ max-height: 250px;
+ text-overflow: ellipsis;
+ font-size: 13px;
+ line-height: 28px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ position: relative;
+ border-bottom: 1px solid #eee;
+}
diff --git a/web-map/Scripts/SiteScripts/AjaxQuery.js b/web-map/Scripts/SiteScripts/AjaxQuery.js
index 48e8f6a..22e5d85 100644
--- a/web-map/Scripts/SiteScripts/AjaxQuery.js
+++ b/web-map/Scripts/SiteScripts/AjaxQuery.js
@@ -43,10 +43,10 @@ function GetAllPoints(YearMin, YearMax) {
// Нужно ли делать выборку
// |
// |
- // | Выгрузить коллекцию на карту
+ // | фильтры
// | |
// | |
- FillDataArrays(data, true, true);
+ FillDataArrays(data, true, false);
},
error: function (response) {
web-map/Scripts/SiteScripts/Events.js 112(+101 -11)
diff --git a/web-map/Scripts/SiteScripts/Events.js b/web-map/Scripts/SiteScripts/Events.js
index 40337a0..969ebb9 100644
--- a/web-map/Scripts/SiteScripts/Events.js
+++ b/web-map/Scripts/SiteScripts/Events.js
@@ -24,7 +24,7 @@ function changePlacemarkPreset(placemark, preset) {
// Заполнение массивов из исходного (response.data)
// В соответствии с параметрами поселения
-function FillDataArrays(fromData, isNeedSelect = false, isNeedPlaceCollection = false) {
+function FillDataArrays(fromData, isNeedSelect = false, isNeedFilters = false) {
Collections.AllGeoObjects.removeFromMap(Map);
@@ -36,30 +36,79 @@ function FillDataArrays(fromData, isNeedSelect = false, isNeedPlaceCollection =
Collections.FindName = '';
console.log('Количество загруженных поселений ' + fromData.arraySettlements.length);
-
+
Collections.Names = fromData.arrayNameSettlements;
Collections.SettlementTypes = fromData.arrayNameTypes;
- Collections.Regions = fromData.arrayNameRegions;
+ Collections.Regions = fromData.arrayNameRegions;
+
AutoCompleteInit(Collections.Names);
+ filterCollectionInit(Collections.Filters.Type, Collections.SettlementTypes, 'filterGroupTypes', 'countTypes');
+ filterCollectionInit(Collections.Filters.Region, Collections.Regions, 'filterGroupRegions', 'countRegions');
Collections.All = fromData.arraySettlements;
- LoadCollection(fromData.arraySettlements, isNeedSelect, isNeedPlaceCollection);
+ LoadCollection(fromData.arraySettlements, isNeedSelect, isNeedFilters);
}
// Функция заполнения Яндекс-коллекций Яндекс-объектами из JSON массива
-function LoadCollection(fromData, isNeedSelect = false, isNeedPlaceCollection = false) {
+function LoadCollection(fromData, isNeedSelect = false, isNeedFilters = false) {
fromData.forEach(function (element) {
Collections.AllGeoObjects = Collections.AllGeoObjects.add(CreateYandexPlacemark(element)); // Добавление
});
if (isNeedSelect)
- SelectDataFromArrays(isNeedPlaceCollection);
+ SelectDataFromArrays(isNeedFilters);
}
// Согласно текущим установленным фильтрам собрать нужный массив данных
-function SelectDataFromArrays(isNeedPlaceCollection = false) {
- var ResultDataArray = new Array();
+function SelectDataFromArrays(isNeedFilters = false) {
+ var ResultDataArray = new Array();
+
+ console.log("select with " + isNeedFilters);
+ isNeedFilters=false;
+ var insideMap = Collections.AllGeoObjects.searchInside(Map);
+ var afterFilters = new ymaps.geoQuery();
+ if (!isNeedFilters)
+ afterFilters = insideMap;
+ else
+ {
+ var typeFilters = new ymaps.geoQuery();
+ var regionFilters = new ymaps.geoQuery();
+
+ // тут применить фильтры
+ // объединить по признаку типа
+ // объединить по признаку региона
+ // пересечь две выборки
+
+ for (e in Collections.Filters.Type) {
+ if (Collections.Filters.Type[e]) {
+ typeFilters = insideMap.search('options.Types regexp "{|' + e + '}"').add(regionFilters);
+ }
+ }
+ for (e in Collections.Filters.Region) {
+ if (Collections.Filters.Region[e]) {
+ regionFilters = insideMap.search('options.Regions regexp "{' + e + '}"').add(regionFilters);
+ }
+ }
- var CollectionVisible = Collections.AllGeoObjects.searchInside(Map).slice(0, Collections.VisibleCount).addToMap(Map);
+ afterFilters = typeFilters.intersect(regionFilters);
+ }
+
+
+//filterTypes = all.search('options.Regions regExp "*|gorod|*"')
+// .add(all.search('options.Regions regExp "*|selo|*"'))
+// .add(all.search('options.Regions regExp "*|poselok|*"'))
+
+ //for (e in Collections.Filters.Type) {
+ // if (Collections.Filters.Type[e])
+ // {
+ // for
+ // }
+ // afterFilters = afterFilters.search('options.Name = "' + name + '"');
+ //}
+ //for (e in Collections.Filters.Region) {
+ // Collections.Filters.Region[e] = true;
+ //}
+
+ var CollectionVisible = afterFilters.slice(0, Collections.VisibleCount).addToMap(Map);
// Оставшиеся объекты будем удалять с карты.
Collections.AllGeoObjects.remove(CollectionVisible).removeFromMap(Map).getLength();
@@ -86,12 +135,20 @@ function CreateYandexPlacemark(fromElement) {
}
);
+ function compose (elem) {
+ var t = '';
+ fromElement[elem].forEach(function (element) {
+ t += ' {' + element + '}';
+ });
+ return t + ' ';
+ }
+
//Добавить свойство - Имя поселения
placemark.options.set('Name', fromElement.Title);
placemark.options.set('URL', fromElement.URL);
placemark.options.set('Population', fromElement.Population);
- placemark.options.set('Types', fromElement.Type);
- placemark.options.set('Regions', fromElement.Region);
+ placemark.options.set('Types', compose('Type'));
+ placemark.options.set('Regions', compose('Region'));
// Переопределяем стадартный обработчик нажатия
placemark.events.add('click', function (e) {
@@ -254,3 +311,36 @@ function addToExport() {
}
}
+
+function filterRegionChange(e) {
+ //console.log($("#"+e.id));
+ var name = e.parentElement.parentElement.parentElement.children[1].innerText;
+ Collections.Filters.Region[name] = e.checked;
+}
+
+function filterTypeChange(e) {
+ //console.log($("#" + e.id));
+ var name = e.parentElement.parentElement.parentElement.children[1].innerText;
+ Collections.Filters.Type[name] = e.checked;
+}
+
+function defaultFilters() {
+
+ for (e in Collections.Filters.Type) {
+ Collections.Filters.Type[e] = true;
+ }
+ for (e in Collections.Filters.Region) {
+ Collections.Filters.Region[e] = true;
+ }
+
+ $("#filterGroups input").each(function (index, element) {
+ element.checked = true;
+ });
+ SelectDataFromArrays(false);
+
+ //console.log($("#filterGroupRegions")[0].children);
+}
+
+function activeFilters() {
+ SelectDataFromArrays(true);
+}
web-map/Scripts/SiteScripts/Init.js 24(+22 -2)
diff --git a/web-map/Scripts/SiteScripts/Init.js b/web-map/Scripts/SiteScripts/Init.js
index 24eccda..e13b71b 100644
--- a/web-map/Scripts/SiteScripts/Init.js
+++ b/web-map/Scripts/SiteScripts/Init.js
@@ -46,7 +46,7 @@ function YandexMapInit()
// Выгрузить коллекцию на карту
// |
// |
- SelectDataFromArrays(true);
+ SelectDataFromArrays(false);
// фильтрация поселений при зуммировании
//CurrentZoom = event.get('newZoom');
@@ -201,6 +201,23 @@ function AutoCompleteInit(data) {
}
});}
+function filterCollectionInit(filterCollection, fromData, groupID, header) {
+ var template = '<li class="list-group-item p-0"><div class="input-group"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" checked onchange="FUNC(this)"></div></div><span class="form-control" data-toggle="tooltip" data-placement="top" title="NAME">NAME</span></div></li>';
+ if (groupID == 'filterGroupTypes') {
+ template = template.replace(/FUNC/g, 'filterTypeChange')
+ }
+ else if (groupID == 'filterGroupRegions'){
+ template = template.replace(/FUNC/g, 'filterRegionChange')
+ }
+ var text = '';
+ fromData.forEach(function (element) {
+ filterCollection[element] = true;
+ text += template.replace(/NAME/g, element);
+ });
+ $('#' + header)[0].innerHTML = fromData.length;
+ $('#' + groupID)[0].innerHTML = text;
+}
+
// Функция создания коллекций Яндекс-объектов
function CollectionsInit() {
// Набор массивов, которые формируются для более гибкого отображения данных на странице.
@@ -215,5 +232,8 @@ function CollectionsInit() {
Collections.VisibleCount = 50;
Collections.Names = new Array();
Collections.Export = new Array();
- Collections.test = '';
+ Collections.CurrentSettlement = new Object();
+ Collections.Filters = new Object();
+ Collections.Filters.Type = new Object();
+ Collections.Filters.Region = new Object();
}
\ No newline at end of file
web-map/Scripts/SiteScripts/Output.js 38(+34 -4)
diff --git a/web-map/Scripts/SiteScripts/Output.js b/web-map/Scripts/SiteScripts/Output.js
index bed5ca0..cccf7c3 100644
--- a/web-map/Scripts/SiteScripts/Output.js
+++ b/web-map/Scripts/SiteScripts/Output.js
@@ -1,7 +1,24 @@
// Функция выводит данные о поселении в боковую панель из JSON объекта
function PrintInfoAboutSettlement(info)
{
- // ВНИМАНИЕ! я никудышный верстальщик, поэтому делаю как умею. никогда этому не учился, и никто меня не учил
+ function makeButton(buttonHTML, type, id) {
+ if (buttonHTML == '')
+ return '';
+ return buttonHTML.replace(/_ID_/g, id).replace(/_TYPE_/g, type);
+ }
+
+ Collections.CurrentSettlement = new Object();
+ Collections.CurrentSettlement.constInfo = new Object();
+ Collections.CurrentSettlement.constInfo.Title = info.Title;
+ Collections.CurrentSettlement.constInfo.URL = info.URL;
+ Collections.CurrentSettlement.constInfo.Lat = info.Coordinate.Lat;
+ Collections.CurrentSettlement.constInfo.Long = info.Coordinate.Long;
+ Collections.CurrentSettlement.constInfo.Founder = info.Founder;
+ Collections.CurrentSettlement.constInfo.hasBeginning = info.hasBeginning;
+ Collections.CurrentSettlement.constInfo.Legend = info.Legend;
+ Collections.CurrentSettlement.constInfo.URL = info.URL;
+
+ Collections.CurrentSettlement.editInfo = new Array();
document.getElementById('settlement-title').innerHTML = info.Title;
document.getElementById('settlement-url').innerHTML = info.URL;
@@ -13,8 +30,7 @@ function PrintInfoAboutSettlement(info)
/// присвоить id каждому элементу и по нему вытаскивать в форму редактирования
/// сделать 2 класса для осн инф и для редактирования
var text = '<div class="sidebar-left-text-element">';
- text += Test;
- text += '<button type="button" class="btn btn-secondary"><img src="/Content/icon.png" width="20" height="20" /></button>';
+ text += makeButton(editButtonText, 'constInfo', 'editConstInfoButton');
text += '<p>' + 'Координаты: ' + info.Coordinate.Lat + ' ' + info.Coordinate.Long + '</p>';
if (info.Founder != null)
text += '<p>' + 'Основатель: ' + info.Founder + '</p>';
@@ -28,12 +44,14 @@ function PrintInfoAboutSettlement(info)
}
if (info.hasBeginning != null)
text += '<p>' + 'Время основания: ' + info.hasBeginning + '</p>';
-
+ var i = 0;
text += '</div>';
text += '<hr style="border: none; background-color: #32CD32; color: #32CD32; height: 2px;">';
if (info.EditedSettlements != null)
info.EditedSettlements.forEach(function (element) {
text += '<div class="sidebar-left-text-element">';
+ text += makeButton(editButtonText, 'editInfo', 'editEditInfoButton_' + i++);
+ Collections.CurrentSettlement.editInfo.push(new Object(element));
if (element.PopulationAll != null)
text += '<p>' + 'Количество населения: ' + element.PopulationAll + '</p>';
@@ -76,6 +94,18 @@ function printExportCollection() {
$("#sidebar-right-text-export")[0].innerHTML = text;
}
+function printEditImportForm(what, id) {
+ var text = '';
+ if (what == 'constInfo') {
+ console.log(Collections.CurrentSettlement[what]);
+ }
+ else if (what == 'editInfo') {
+ var i = id.split('_')[1];
+ console.log(Collections.CurrentSettlement.editInfo[i]);
+ }
+
+}
+
// Функция выгружает все гео-объекты из данной коллекции на карту
function PlaceFromCollection() {
CollectionVisible.addToMap(Map);
web-map/Views/Map/Map.cshtml 54(+51 -3)
diff --git a/web-map/Views/Map/Map.cshtml b/web-map/Views/Map/Map.cshtml
index 8740596..7e1bfe7 100644
--- a/web-map/Views/Map/Map.cshtml
+++ b/web-map/Views/Map/Map.cshtml
@@ -11,7 +11,9 @@
<div class="d-flex justify-content-center btn-group w-100" role="group">
<button id="sidebar-left-close" class="btn btn-secondary" type="button">Скрыть<br>панель</button>
<button id="add-to-export-group" class="btn btn-secondary" type="button">Добавить<br>в экспорт</button>
-
+ </div>
+ <div class="d-flex justify-content-center btn-group w-100" role="group">
+ <button id="addEditInfo" class="mt-2 btn btn-secondary" type="button" hidden>Добавить новые данные</button>
</div>
</div>
<div id="sidebar-left-text" class="sidebar-left-text">
@@ -69,13 +71,59 @@
</div>
<div id="map" style="width: 100%; height: 1000px; padding-left: 0px; "></div>
+
+@*<p>
+ <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</button>
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
+</p>*@
+
+<div class="container mt-4">
+ <div class="row">
+ <div class="d-flex justify-content-center btn-group w-100" role="group">
+ <button class="btn btn-dark" type="button" onclick="activeFilters()">Применить фильтры</button>
+ <button class="btn btn-dark" type="button" onclick="defaultFilters()">Сбросить фильтры</button>
+ </div>
+ </div>
+</div>
+
+<div class="row mt-2">
+ <div class="col">
+ <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Типы поселений <span id="countTypes"></span></button>
+ </div>
+ <div class="col">
+ <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Административные единицы <span id="countRegions"></span></button>
+ </div>
+</div>
+<div class="row mt-1" id="filterGroups">
+ <div class="col-3">
+ <div class="collapse multi-collapse" id="multiCollapseExample1">
+ <div class="card border-light" style="max-height: 300px; overflow-y: auto;">
+ <ul class="list-group list-group-flush" id="filterGroupTypes">
+
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="collapse multi-collapse" id="multiCollapseExample2">
+ <div class="card border-light" style="max-height: 300px; overflow-y: auto; overflow-x: auto">
+ <ul class="list-group bg-transparent list-group-flush" id="filterGroupRegions">
+
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
+
<script>
- var Test = '';
+ var editButtonText = '';
</script>
@if ((bool)ViewBag.isAuth)
{
<script>
- Test = '<p>111111</p>';
+ editButtonText = '<button type="button" id="_ID_" class="btn btn-outline-light btn-sm" onclick="printEditImportForm(\'_TYPE_\', \'_ID_\')"><img src="/Content/icon.png" width="20" height="20" /> редактировать</button>';
+ document.getElementById('addEditInfo').hidden = false;
</script>
}