{"type":"doc","content":[{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"paragraph","content":[{"text":"Платформа поддерживает создание интерактивных картосхем. Вы можете задать параметры карты в формате GeoJSON, и затем создать пользовательский виджет (карту) с использованием полученного кода.","type":"text"}]},{"type":"paragraph","content":[{"text":"Для создания картосхемы необходимо выполнить следующие шаги:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"На вкладке ","type":"text"},{"text":"Виджет","type":"text","marks":[{"type":"strong"}]},{"text":" нажмите кнопку с тремя точками и щелкните ","type":"text"},{"text":"Создать виджет","type":"text","marks":[{"type":"strong"}]},{"text":" для создания пользовательского виджета:","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":369,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":369,"alt":"click-button.png","id":"d54667d2-905f-4bca-b505-4e4d37acb1f7","collection":"contentId-556958437","type":"file","height":253}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" В открывшемся окне введите название виджета (например, “Карта”).","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"В поле ","type":"text"},{"text":"JavaScript ","type":"text","marks":[{"type":"strong"}]},{"text":"вставьте код карты в формате GeoJSON (например, из нашего примера ниже) с требуемыми настройками параметров. В нашем примере представлен код карты Москвы. Код снабжен комментариями, облегчающими понимание настроек:","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"Смотреть код"},"content":[{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"console.log(w);\n\n//Данная карта выводит слой GeoJSON с привязаными к нему данными.\n//В коде можно также отформатировать всплывающую подсказку или подсказку в правом верхнем углу (см. комментарии).\n//Изменить стиль подсказки в правом верхнем углу можно в начале кода в styleText.\n\nw.props = {\n defaultLatLan: [55.7533, 37.622], //Значение широты и долготы по умолчанию.\n defaultZoom: 10, //Значение зума по умолчанию.\n maxZoom: 14, //Максимальный зум\n minZoom: 9, //Минимальный зум\n nameOfProperty: 'district_nm', //Имя свойства карты, по которому будут привязываться данные и которое будет показываться в подсказках.\n jsonURL: 'https://lms.matyx.ru/uploads/dict.d_division_district.json', //Путь доя geojson файла.\n tilesURL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', //Путь до скаченных файлов (т.е. скаченная карта). Если параметр не указан, карта работает онлайн.\n colorAxis: ['#FFEDA0', '#800026'], //Цвета, в которые будут раскрашены полигоны. Слева минимальное значение, справа максимальное.\n axisSteps: 30, //Количество шагов, которое будет использовано для цветовой оси.\n stepLegendWidth: '10px', //Ширина шага на легенде. Если шагов много, логично сделать ширину шага уже, т.к. легенда может быть очень широкой.\n};\n\n//Подключение стилей и библиотеки Leaflet\nconst head = document.querySelector('head');\nconst leafletCSS = ` `;\nhead.insertAdjacentHTML('beforeend', leafletCSS);\nconst leafletJS = document.createElement('script');\nleafletJS.async = false;\nleafletJS.src = 'https://unpkg.com/leaflet@1.8.0/dist/leaflet.js';\nhead.append(leafletJS);\nconst choroplet = document.createElement('script');\nchoroplet.async = false;\nchoroplet.src = 'https://cdn.jsdelivr.net/gh/cyxapbyad/visiology@main/choropleth.js';\nhead.append(choroplet);\n//Стили для подсказки и легенды\nconst styleText = `\n .info {\n padding: 6px 8px;\n font: 14px/16px Arial, Helvetica, sans-serif;\n background: white;\n background: rgba(255,255,255,0.8);\n box-shadow: 0 0 15px rgba(0,0,0,0.2);\n border-radius: 5px;\n }\n .info h4 {\n margin: 0 0 5px;\n color: #777;\n }\n .legend {\n\t\t\tcolor: #555;\n\t\t\tpadding: 6px 8px;\n\t\t\tfont: 12px Arial, Helvetica, sans-serif;\n\t\t\tfont-weight: bold;\n\t\t\tbackground: white;\n\t\t\tbackground: rgba(255,255,255,0.8);\n\t\t\tbox-shadow: 0 0 15px rgba(0,0,0,0.2);\n\t\t\tborder-radius: 5px;\n\t\t}\n\t\t.legend ul {\n\t\t\tlist-style-type: none;\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tclear: both;\n\t\t}\n\t\t.legend li {\n\t\t\tdisplay: inline-block;\n\t\t\twidth: ${w.props.stepLegendWidth};\n\t\t\theight: 22px;\n\t\t}\n\t\t.legend .min {\n\t\t\tfloat: left;\n\t\t\tpadding-bottom: 5px;\n\t\t}\n\t\t.legend .max {\n\t\t\tfloat: right;\n}`;\nconst style = document.createElement('style');\nstyle.insertAdjacentHTML('afterbegin', styleText);\nhead.append(style);\n\n//Если бибилотека Leaflet полностью загружена, работаем с картой.\nleafletJS.onload = async () => {\n // Проверяем, пустой ли контейнер с картой, чтобы не было ошибки. Если не пустой - очищаем.\n var container = L.DomUtil.get(w.general.renderTo);\n if (container !== null) {\n container._leaflet_id = null;\n }\n\n //Объявляем карту, начальные координаты и масштаб по умолчанию.\n var map = L.map(w.general.renderTo, { attributionControl: false }).setView(\n w.props.defaultLatLan,\n w.props.defaultZoom\n );\n //Основной слой карты\n var tiles = L.tileLayer(w.props.tilesURL ? w.props.tilesURL : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n maxZoom: w.props.maxZoom,\n minZoom: w.props.minZoom,\n //attribution: '© OpenStreetMap'\n }).addTo(map);\n\n //Загружаем GeoJSON с районами Москвы. В данном примере в этом блоке карта фильтруется, остаются только нужные полигоны.\n const districtJson = w.props.jsonURL;\n let district = await $.getJSON(districtJson, function (geojson) {\n return geojson;\n });\n //district.features = district.features.filter(item => item.properties.name === \"СК-ТТК\" || item.properties.name === \"ТТК-МКАД\" || item.properties.name === \"Внутри СК\" || item.properties.name === \"За МКАД\")\n console.log(district);\n\n //Подготавливаем данные. Добавляем показатели из базы.\n w.data.primaryData.items.forEach((item, itemInd) => {\n district.features.forEach((dist, distInd) => {\n if (item.keys[0].replace('район', '').trim() === dist.properties[w.props.nameOfProperty]) {\n dist.properties.value = item.values[0];\n dist.properties.value2 = item.values[1];\n }\n });\n });\n\n //Добавляем слой GeoJSON с помощью плагина Koroplet, который раскрасит полигоны по заданным параметрам.\n let choroplethLayer = L.choropleth(district, {\n valueProperty: 'value', // указывает какое свойство из фич использовать для разукрашивания секторов\n scale: w.props.colorAxis, // chroma.js scale - включите столько, сколько захотите.\n steps: w.props.axisSteps, // количество шагов для цветовой шкалы.\n mode: 'q', // q - для квантиля, e - для эквидистанты, k - для k-средних.\n style: {\n color: '#fff', // цвет границы.\n weight: 2,\n fillOpacity: 0.5,\n dashArray: '3',\n },\n // \tonEachFeature: function(feature, layer) {\n // \t\tlayer.bindPopup(feature.properties.value)\n // \t}\n }).addTo(map);\n\n //Добавляем события over и out для мыши (подсветка полигона, подсказка).\n let geojson;\n\n function highlightFeature(e) {\n var layer = e.target;\n //console.log(layer)\n layer.bindTooltip(`${layer.feature.properties[w.props.nameOfProperty]}
\n Мощность: ${layer.feature.properties.value} кВт\n `); //Форматирование подсказки\n this.openTooltip();\n\n layer.setStyle({\n weight: 5,\n color: '#666',\n dashArray: '',\n fillOpacity: 0.7,\n });\n\n if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {\n layer.bringToFront();\n }\n info.update(layer.feature.properties);\n }\n\n function resetHighlight(e) {\n geojson.resetStyle(e.target);\n //this.closePopup();\n info.update();\n }\n\n function zoomToFeature(e) {\n map.fitBounds(e.target.getBounds());\n }\n\n function onEachFeature(feature, layer) {\n layer.on({\n mouseover: highlightFeature,\n mouseout: resetHighlight,\n click: zoomToFeature,\n });\n }\n\n geojson = L.geoJson(district, {\n style: {\n color: '#fff', // Цвет границы.\n weight: 2,\n fillOpacity: 0,\n dashArray: '',\n },\n onEachFeature: onEachFeature,\n }).addTo(map);\n\n var info = L.control();\n\n // Подсказка в правом верхнем углу.\n info.onAdd = function (map) {\n this._div = L.DomUtil.create('div', 'info'); // создайте div с классом \"info\"\n this.update();\n return this._div;\n };\n\n // Метод, который мы будем использовать для обновления элемента управления на основе переданных свойств объекта.\n // Здесь можно отформатировать текст подсказки.\n info.update = function (props) {\n this._div.innerHTML =\n '

Вся информация

' +\n (props\n ? `${props[w.props.nameOfProperty]}
\n Мощность: ${props.value ? props.value : '0'} кВт
\n Средняя стоимость кВт\\ч: ${props.value2 ? props.value2.toFixed(2) : '0'} руб\n `\n : 'Наведите на район');\n };\n\n info.addTo(map);\n\n // Добавьте легенду (не забудьте добавить CSS из index.html)\n var legend = L.control({ position: 'bottomright' });\n legend.onAdd = function (map) {\n var div = L.DomUtil.create('div', 'info legend');\n var limits = choroplethLayer.options.limits;\n var colors = choroplethLayer.options.colors;\n var labels = [];\n\n // Добавьте максимальные и минимальные значения\n div.innerHTML =\n '

' +\n limits[0] +\n '

\\\n\t\t\t

' +\n limits[limits.length - 1] +\n '

';\n\n limits.forEach(function (limit, index) {\n labels.push('

');\n });\n\n div.innerHTML += '

' + labels.join('') + '';\n return div;\n };\n legend.addTo(map);\n};\n","type":"text"}]}]},{"type":"orderedList","attrs":{"order":4},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Добавьте необходимые поля виджета в правой части окна и нажмите ","type":"text"},{"text":"Готово","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":823,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1065,"alt":"settings.png","id":"3b1eca77-d3c6-48f3-a162-8da063fb2c43","collection":"contentId-556958437","type":"file","height":621}}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Созданный виджет появится среди прочих пользовательских виджетов:","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":272,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":272,"alt":"new.png","id":"d687a308-c2dd-47bd-9efe-78c9e35915a7","collection":"contentId-556958437","type":"file","height":199}}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Теперь для создания картосхемы щелкните по иконке виджета и перетащите требуемые столбцы с данными из загруженной таблицы – карта отобразится в окне виджета. В нашем примере при наведении курсора мыши на какой-либо район Москвы изменяется цвет просматриваемой области, а также отображается окно с дополнительной информацией:","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":895,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1114,"alt":"map.png","id":"68b34d80-fe0e-4eb6-b01b-90a94abb8991","collection":"contentId-556958437","type":"file","height":458}}]}]}]},{"type":"rule"},{"type":"paragraph","content":[{"text":"Смотрите также","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"1f4c4","text":"📄","shortName":":page_facing_up:"}},{"text":" ","type":"text"},{"text":"Создание пользовательского виджета","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/3v9/pages/556957832"}}]}]}]},{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"1f551","text":"🕑","shortName":":clock2:"}},{"text":" Время чтения: 2 мин.","type":"text"}]},{"type":"rule"},{"type":"paragraph","content":[{"text":"Нужна дополнительная помощь?","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Свяжитесь с технической поддержкой","type":"text","marks":[{"type":"link","attrs":{"href":"https://ru.visiology.su/products/support-contacts"}}]},{"text":".","type":"text"}]}]}]},{"type":"paragraph"}],"version":1}

Браузер не поддерживается