Я работаю над веб-приложением, подобным панели, аналогичным Google Analytics, где различные наборы данных отображаются в разных форматах, включая карты.Как рисовать интерактивную карту на холсте HTML5 с помощью координат (или данных) geoJSON
Требования заключаются в том, что карта должна иметь области с возможностью нажатия, чтобы загружать данные, специфичные для этого региона, и регионы должны иметь зависающие эффекты, much like this one. Я не хочу использовать API карт google, но я открыт для библиотек.
Теперь у меня есть данные карты в geoJSON (см. Ниже фрагмент), что приводит меня к моей проблеме, как рисовать карту в холсте HTML5 с использованием данных geoJSON? Я знаю, насколько общий вопрос в том, потому что я действительно не знаю, с чего начать. Поэтому мне очень нужно, чтобы кто-то держал меня за руку и показывал мне дорогу. Пожалуйста, держите ваши ответы как можно более подробными. Благодарю.
{
"type": "FeatureCollection",
"features": [{ "type": "Feature", "id": 0,
"properties": { "OBJECTID_1": 29, "OBJECTID": 29, "COUNTY_NAM": "BARINGO", "COUNTY_COD": 30, "Shape_Leng": 5.81571392065, "Shape_Area": 0.88451236881 },
"geometry": { "type": "Polygon", "coordinates": [ [ [ 36.028686523000033, 1.276123047000056 ], [ 36.036499023000033, 1.263916016000053 ], [ 36.039306641000053, 1.259887695000032 ],............[ 36.028686523000033, 1.276123047000056 ] ] ] } }
]
}
Мое исследование привело меня к библиотекам, таким как открыватели, листовки и d3. Все они великолепны, но имеют значительную кривую обучения. У меня нет ничего против обучения, но мне бы хотелось, чтобы самое простое решение для завершения проекта.
Хорошо, вам нужно более точно определить проект. Вы хотите, чтобы эта карта была перетаскиваемой и масштабируемой? Вы хотите, чтобы он был совместим с браузерами? Самый простой способ сделать это с нуля - создать элемент SVG в вашем html и заполнить его строками из ваших данных geoJSON и прикрепить события onHover/onClick, используя jQuery, чтобы помочь, возможно. Но это проблемы совместимости, которые дают вам такие библиотеки, как D3 и OpenLayers. StackOverflow не предназначен для подробного ручного управления, который в конечном итоге выполняет вашу работу за вас. – Spacedman
Я бы не использовал фразу «держи мою руку», ее не то, что я ищу, просто точка в правильном направлении, которую ваш последний комментарий частично выполнил. Карта не нуждается в масштабируемости, только в интерактивных областях, которые запускают загрузку нового контента. Подумайте о карте как о навигации. Что касается совместимости браузеров, это не вызывает большого беспокойства, поскольку приложение не предназначено для публичного использования, это панель управления для компании (клиента). Так будет ли geoJSON преобразовываться в пути svg или использовать координаты как они? – user1678293
Найдите несколько базовых руководств по SVG в браузерах. Поиграйте, затем вернитесь и задайте еще несколько вопросов. Вы это выясните! – Spacedman