Делаем интерактивный план местности за 15 минут

Leader Line

Часто встречается задача сделать линии, которые будут соединять объекты на карте и какие-то элементы на странице с дополнительной информацией, а также сделать минимальные всплывающие подсказки при наведении на эти самые объекты. Для решения этих задач очень неплохо подходит мини-библиотека leader-line, которая создает векторные стрелочки на любой вкус и цвет.

Давайте добавим к данным цены для всплывающих подсказок и сделаем эти линии.

Как можно заметить, ничего сложного не происходит. У линии есть “места крепления” к элементам. Координаты этих точек относительно элементов обычно удобно определять в процентах. В целом там есть много разных опций, перечислять и запоминать которые не имеет смысла, так что рекомендую просто полистать документацию. Одна из этих опций – startLabel – понадобится нам для создания маленькой всплывающей подсказки с ценой.

Мы также можем добавить опцию hide, чтобы все линии не отображались в виде веника. Будем показывать их по одной при наведении мыши на здания, которым они соответствуют:

Здесь же можно выводить дополнительную информацию (в нашем случае просто текущий статус объекта) в место для информации. Получится уже почти то, что нужно:

Такие штуки редко проектируют под мобильные устройства, но стоит вспомнить о том, что их часто делают на весь экран на десктопе, да еще и с какими-нибудь панелями сбоку для дополнительной информации и нужно все красиво растянуть. Как-то так к примеру:

При этом пропорции SVG-элемента определенно не будут совпадать с пропорциями картинки внутри. Что же делать?

Для чего нужен план местности

Для начала нужно разобраться, а что же такое план местности. Под этим понятием следует понимать детальную карту с большим масштабом, где очень подробно изображены все природные объекты, ландшафт и тому подобное. На плане местности изображают такие объекты:

• реки;
• озера;
• дома;
• дороги;
• деревья.

Также стоит отметить, что план местности является одним из видов топографических карт.

В первую очередь планом местности пользуются туристы. Благодаря этой карте можно без проблем найти правильную дорогу, главное — хорошо уметь ориентироваться.

Также план местности активно используют коммунальные и аварийные службы. Оно и не странно, ведь нужно очень хорошо знать все подробности, например, когда планируют прокладку водопроводных труб.

Применяются такие планы в сельском хозяйстве, да и в других отраслях, где нужно ориентироваться на местности.

Планы местности и для чего они нужны

Планом местности называют схематический чертеж небольшого участка земной поверхности с нанесенными на него специальными обозначениями, изображенный сверху. Такие планы будут незаменимы как для туристов, так и для военных и аварийных служб. На них могут быть изображены географические объекты (водоемы и холмы), постройки и дороги, пастбища и др. Имея на руках такой план, человек вполне может добраться до нужной ему точки местности.

Главные особенности планов:

• Возможность их быстрого составления.
• Свобода в условных обозначениях.
• Обозначении сторон света стрелками.

Так, например, пожарные составляют план, где акцентируют внимание на расположение близлежащих водоемов и подъездных путей к ним

Базовый пример

Сделаем пустую html-страницу, вставим полученную SVG прямо в нее и добавим немного CSS, чтобы ничего не вылезало за границы экрана. Тут даже комментировать нечего.

Вспоминаем, что добавили зданиям классы, и используем их, чтобы CSS был более-менее структурированным.

Поскольку мы задавали инлайновые стили в Inkscape, в CSS нужно их перебить. Было бы удобнее все делать в CSS? И да, и нет. Зависит от ситуации. Иногда выбора нет. Например если дизайнер нарисовал много всего разноцветного и переносить все в CSS и раздувать его до невозможности как-то не комильфо. В данном примере я использую “неудобный” вариант, чтобы показать, что и он не особенно то и страшный в контексте решаемой задачи.

Предположим, что к нам прилетели свежие данные по домам, и добавим им разные классы в зависимости от их текущего статуса:

Получим что-то такое:

Уже виднеется что-то похожее на то, что нам нужно. На данном этапе мы имеем подсвеченные объекты на плане местности, которые реагируют на наведение мыши. И не составляет труда добавить для них реагирование на нажатие кнопки мыши через стандартный addEventListener.

Что такое план местности и условные знаки

Чертеж небольшого участка, выполненный в масштабе, получил название плана. Для того, чтобы разобраться, как составить план местности, нужно познакомиться с понятием «масштаб».

Масштаб – величина, показывающая, во сколько раз уменьшено действительное расстояние. Масштабом пользуются при изображении земной поверхности.

Наличие масштаба считается главным отличием от обычного рисунка. Также участок показан как бы сверху и с помощью условных обозначений. Ниже перечислены условные знаки для изображения объектов. Цветная картинка представляет вид местности, а черно-белая – это условное обозначение.

Условные знаки

Зная обозначения легко понять, что находится на данном месте: шоссе или полевая дорога, овраг или река, лиственный или смешанный лес. На плане обязательно указываются стороны горизонта в виде стрелки: С – северное, Ю – южное. Это позволяет ориентироваться, находить взаимное расположение предметов по сторонам горизонта.

Часто в жизни бывает необходимо прочитать план местности или составить его описание. Потренироваться в чтении плана можно используя рисунок ниже

Обратите внимание на стороны горизонта и условные обозначения

По данному описанию можно не только совершать воображаемый поход, но и можно самостоятельно осуществить составление плана местности.

Как составить простейший план какого-либо участка местности, если нет его описания? В таких случаях пользуются несколькими способами. Сходство их в том, что вы должны обязательно находиться на том участке, где будете составлять план. Познакомимся с основными съемками местности.

1. Глазомерная съемка может быть освоена любым человеком, так как установление расстояния между предметами производится на глаз. Для этого понадобятся инструменты: планшет, лист бумаги, компас, карандаш, ластик. На бумаге указываем стороны горизонта, предварительно определенные по компасу, и определяем масштаб. Объекты, находящиеся в пределах нашей видимости, вычерчиваем на план условными знаками.

1. Составление плана местности методом маршрутной съемки наиболее простое. Необходимо выбрать маршрут, по которому будем двигаться. Для того, чтобы составить план местности методом маршрутной съемки мы проходим по маршруту и отмечаем объекты, встреченные по пути. Отмечаем их условными обозначениями на листе, обязательно указываем стороны горизонта.

1. Полярная съемка считается еще одним способом составления плана местности. Для этого выбирается точка на местности, из которой хорошо видны все объекты. Из данной точки или полюса, производят составление плана. Отмечают стороны горизонта на бумаге, определяют масштаб. Затем кладут линейку и вычерчивают направления на объекты, которые потом измеряют шагами. Измеренные расстояния отмечаются на бумаге.

Картографические способы изображения

Способ качественного фона. Применяется для изображения на карте качественных особенностей определенных объектов или явлений, имеющих сплошное распространение на земной поверхности или занимающих большие площади. Суть его заключается в том, что на карте выделяют однородные по определенному признаку (признакам) участки (например, природные зоны) и закрашивают (или штрихуют) их в подобранные для них цвета (штриховки).

Способ ареалов. Ареал – область распространения на земной поверхности какого-либо явления (например, территория, на которой обитает определенное животное, или территория, на которой выращивается та или иная сельскохозяйственная культура, и т. п.).

Способ изолиний. Изолинии (от греч. isos – равный) – линии на географических картах, проходящие по точкам с одинаковым значением какого-либо количественного показателя (температуры, количества осадков, глубины, высоты и т. д.), характеризующего изображаемое явление. Например, изотермы – линии, соединяющие места с одинаковой температурой; изобаты – линии, соединяющие места с одинаковой глубиной; горизонтали – линии, соединяющие точки земной поверхности с одинаковой абсолютной высотой, изогиета — линии, характеризующие количество осадков за определенный период времени, изобары — линии атмосферного давления. Суть способа изолиний заключается в том, что на карте пункты с одинаковыми величинами определенного показателя соединяют тонкими линиями, т. е. наносят изолинии.

Условные знаки – обозначения, применяемые на картах для изображения различных объектов и их качественных и количественных характеристик. С помощью условных знаков обозначают как реальные объекты (например, населенные пункты), так и абстрактные (например, плотность населения). Условные знаки предназначены для того, чтобы указать вид и некоторые характеристики изображенных на карте объектов (явлений) и определить их положение в пространстве.

Условные знаки бывают:

• внемасштабными (используются для того, чтобы изобразить объекты, которые не могут быть выражены в масштабе карты). Это рисунки или геометрические фигуры, Родники форма которых обычно напоминает изображаемый объект. Буквенные символы также относятся к внемасштабным условным знакам,
•  линейными (используются для изображения объектов линейного характера – рек, дорог, границ, трубопроводов и др.). В масштабе они передают только длину и форму объекта, ширина их преувеличена, поэтому ее измерить нельзя,
•  площадными, или контурными (используются для изображения географических объектов, занимающих некоторую площадь – озеро, массив леса и т. д.). Передают действительную величину объектов. Состоят из контура (леса, болота и т. п.) и его заполнения (цвет, штриховка).

Пояснительные условные знаки (например, стрелки, показывающие направление течения реки, фигурки лиственных и хвойных деревьев и др.), подписи, буквенные и цифровые обозначения также несут определенную информацию на карте.

На крупномасштабных картах чаще используются площадные и линейные условные знаки, на мелкомасштабных – внемасштабные.

Линии движения.

Линиями (стрелками) показывают направление движения каких-либо объектов – воздушных масс, ветров, океанических течений, рек и т. п. Определение направлений, измерение расстояний на плане и карте.

На плане север – юг показано стрелкой. Если на плане нет стрелки, то считается, что оно север – вверху, юг – внизу.

На карте направления определяются с помощью градусной сети. Направление север – юг соответствует направлению меридианов, запад – восток – параллелей.

Измерения азимутов по картам производят с помощью транспортира. Азимут – угол, образуемый в данной точке или на карте между направлением на север и какой-либо предмет и отсчитывающийся по часовой стрелке. Так, если предмет находится строго к северу от точки, в которой находится наблюдатель, то азимут на него составит 0°, к востоку – 90°, к югу – 180°, к западу – 270°. Азимуты могут иметь значения от 0° до 360°. Для того чтобы измерить азимут по карте, нужно через начальную точку определяемого направления провести линию, параллельную направлению север – юг. Затем также через точку провести линию, соединяющую точку и объект, на который требуется определить азимут. А затем с помощью транспортира измерить образовавшийся угол (азимут), учитывая, что азимут всегда отсчитывается по часовой стрелке.

Следующая тема: Градусная сеть. Географические координаты

Дополнительные конструктивные элементы

1. Дверная коробка — составляющая дверного блока, служит для навешивания на неё дверного полотна и расположения в ней ответной части фиксирующего устройства.

   Дверная коробка жестко крепится в дверном проеме, составляя с ним единое целое.

   Наличие коробки в комплекте двери свидетельствует о повышенной степени сопряжения проёма с дверью, для обеспечения лучшей изоляции разделяемых пространств.

2. Порог — нижняя поперечная часть дверной коробки. Примечателен тем, что может не входить в комплект коробки либо иметь упрощённую конфигурацию.

3. Притвор — небольшой равномерный выступ по всему периметру полотна или коробки, служащий ограничителем при закрывании, скрывающий зазоры между полотном и коробкой и повышающий изоляционные свойства двери.

4. Наличники — специальные декоративные планки, которые закрывают шов, соединяющий дверной проем и коробку. В дверях из стали, могут быть выполнены заодно с коробкой, повышая защитные свойства.

Разрезом называют изображение здания, мысленно рассеченного вертикальной плоскостью. Если мысленно рассечь здание вертикальной секущей и удалить его переднюю часть, а оставшуюся часть здания спроецировать прямоугольно на фронтальную плоскость проекций (параллельно секущей плоскости), то полученное на ней изображение и будет разрезом этого здания.

Разрез здания называют продольным, когда вертикальная секущая плоскость параллельна продольным

стенам здания. Направление секущей плоскости для разреза обозначают на плане первого

этажа разомкнутой линией со стрелками на концах, показывающей направление проецирования и взгляда наблюдателя. Как правило, направление взгляда на плане указывают либо сверху вниз, либо слева направо.

72. Что называется планом здания?

План здания – это изображение разреза здания, рассеченного мнимой горизонтальной плоскостью, проходящей на определенном уровне. План здания дает представление о его форме, взаимном расположении отдельных помещений.

Мнимую секущую плоскость разреза располагают в пределах дверных и оконных проемов. Поэтому на плане здания показывают оконные и дверные проемы, стены и перегородки, встроенные шкафы, сантехническое оборудование и т.п.

73. Выбор оптимальных параметров расположения точки зрения в перспективных проекциях

Чтобы изображение в перспективе хорошо смотрелось, надо учитывать естественный угол зрения человека, поэтому относительное расположение объекта, картины и точки зрения не может быть произвольным. При выборе точки зрения рекомен­дуется придерживаться следующих положений:

– главный луч зрения должен быть направлен перпендикулярно картин­ной плоскости и делить картину при­мерно пополам или находиться в средней трети картины. Картиной на­зывается то. что будет заключено между крайними лучами, идущими от зрителя к предмету;

– угол между основанием картины и сооружением должен составлять 20е…40°;

зритель должен находиться на та­ком расстоянии от предмета, чтобы предмет был включен в конус ясного зрения или был бы в поле ясного зрения. Для этого угол между край­ними лучами зрения должен быть в пределах 28°.. .37°;

– в том случае, когда у соору­же­ния вертикальные разме­ры больше гори­зон­таль­ных, зрите­лю следует отойти на полторы-две высоты от сооруже­ния для того, чтобы угол зрения в вертикальной плоскости оказал­ся в допускаемых границах;

По расположению картин­ной пло­скости относительно объек­та перспек­тивы могут быть двух видов: цен­тральная фронтальная перспектива применяется для построения интерье­ров, т. е. перспективы внутреннего вида помещений; угловая перспектива применяется при изображении отдельных объек­тов, в этом случае картинная пло­скость располагается под углом к объекту.

По расстоянию точки зрения от предмета перспективы могут быть разделены на перспективы с острым, резким ракурсом и перспективы с ту­пым, пологим ракурсом. Ракурсом называется поло­же­ние изображаемо­го предмета относительно картинной плос­кос­ти, при котором получается резкое укорочение удаленных от перед­него плана частей.

Разработка

Для их разработки требуется топографическая съемка, которая проводится на местности. Это так называемые полевые геодезические работы.

Они оформляются в электронном виде и на бумажном носителе. В последнее время все чаще предоставляется 3D-визуализация.

Топографический план выполняется в заданном масштабе с указанием всех значимых объектов в условных обозначениях.

При развитом навыке это позволяет легко разобраться, где проходят границы участка и места прохождения коммуникаций. Можно отобразить вид грунта и определить, какой фундамент предпочесть для постройки.

На карте сложно отобразить конкретные коммуникации и деревья. План позволяет выполнить детализацию с включением уровней масштаба, расположением подземных и наземных коммуникаций, точных границ конкретного участка независимо от его размера.

Используются следующие обязательные обозначения.

Основные:

• Рельефы местности;
• Состояние и особенности грунта, включая растительность с детальным изображением;
• Гидрография, которая представляет собой водные объекты;
• Дороги разного уровня;
• Инженерные сети;
• Здания с подписями, характеризующими их – указание используемого материала, количества этажей и принадлежность к типу (жилой дом, административное здание, школа);
• Границы населенных пунктов и определенных участков.

Вспомогательные:

• Основа математическая, которая включает кресты с обозначением координат и местности;
• Условные символы, которые не соответствуют обычно используемым значениям;
• Штамп чертежа – включает сведения о масштабе, дате изготовления и исполнителе.

Возможные масштабы

В зависимости от требуемой задачи используются различные масштабы территории. Они позволяют определить соотношение к размеру на земли и кратность уменьшения изображения по сравнению с исходными параметрами.

Обычно используются масштабы следующих типов:

• 1:1 000 000;
• 1:500 000;
• 1:200 000;
• 1:100 000;
• 1:50 000;
• 1:25 000;
• 1:10 000.

Разграфика и номенклатура

Разграфка представляет собой систему разделения поверхности на параллели и меридианы. Каждый используемый лист ограничивается рамкой.

Может использоваться один из следующих видов разграфики:

1. Прямоугольная. Карту делят на листы квадратной или прямоугольной формы, имеющие одинаковые размеры.
2. Трапециевидная. В качестве границ используются меридианы и параллели.

В России в качестве исходного используют масштаб 1:1 000 000. Он позволяет установить номенклатуру для крупных масштабов. Понятие номенклатуры в топографии не является тем же, что и в обычном понимании. Это система обозначения листов, которые выполняются в разных масштабах.

Например, номенклатура листов с масштабами 1:500 и 1:1000 складывается из номенклатуры 1:2000. Для обозначения масштаба 1:500 используют соответствующую арабскую цифру, а для 1:1000 – римскую.

Составление простейшего плана местности по описанию

Остановимся на составлении плана местности по описанию. Если есть описание маршрута движения или небольшого участка местности, то мы, используя условные знаки, можем составить план.

Рассмотрим на примере движения геологов:

Поэтапно составим алгоритм действий для составления рисунка плана местности.

На бумаге необходимо провести стрелку, обозначающую стороны горизонта. Это необходимо для ориентирования по плану местности.
Выберем оптимальный масштаб и обозначим на плане местности. В данном случае приемлем, будет масштаб в 1 см – 100 м.
Так как геологи двигались в северном и северо-восточном направлении, начальную точку отметим ближе к югу. Началом пути считается родник, поэтому нанесем его условным обозначением на план местности.
От родника они двигались в северо-восточном направлении 400 м, значит, отмеряем с помощью линейки 4 см. Путь они проходили по грунтовой дороге, обозначаем ее условным знаком на плане местности.
Достигли они реки, которая протекала с востока на запад. Отмечаем на плане реку и направление ее течения. Через реку обозначаем мост.
Путь они продолжили по дороге и через 600 м увидели озеро. Линейкой отмеряем 6 см на север и рисуем озеро

Обращаем внимание, что озеро имеет определенные размеры.
По всей дороге слева от них рос смешанный лес, а справа – хвойный. С помощью условных знаков обозначаем на плане местности.
От озера отмеряем 5 см на северо-восток и по обеим сторонам тропинки обозначаем луг.
Затем они вошли в хвойный лес и увидели домик лесника.

В результате проделанной работы у нас должен получиться географический план местности с условными знаками, схожий с представленным ниже рисунком.

Чем же отличается карта от плана местности?

1. Масштаб плана более крупный, а на карте более мелкий.
2. На плане местности и географической карте объекты изображаются в масштабе, однако на карте это происходит не всегда. Например, города на карте обозначены кружочком, а на плане города есть отдельные улицы и дома.
3. Направление на плане определяется по прямой стрелке, а на карте по линиям градусной сети.

Несмотря на все эти различия,они изображают земную поверхность в масштабе с помощью условных знаков.

От: admin

Эта тема закрыта для публикации ответов.