OpenLayers е мощен JavaScript инструмент, който ни позволява да създаваме и показваме всякакви карти на уебсайт. Тази статия ще ви насочи към добавянето на точка и функция на низ, след това трансформирайте техните проекции, за да използват координати, след което добавете цвят, като зададете стила на слоя.
Моля, обърнете внимание, че трябва да имате работеща карта на OpenLayers, инсталирана на уеб страница, за да следвате тази статия. Ако нямате такъв, вижте Как да направите карта с помощта на OpenLayers 3.
Стъпки
Част 1 от 3: Добавяне на функции за низ и линия
Стъпка 1. Създайте функция за точка
Просто копирайте следния ред код във вашия
елемент:
var point_feature = нов ol. Feature ({});
Стъпка 2. Задайте геометрията на точката
За да кажете на OpenLayers къде да поставите точката, трябва да създадете геометрия и да й дадете набор от координати, който е масив под формата на [дължина (E-W), географска ширина (N-S)]. Следният код създава това и задава геометрията на точката:
var point_geom = нов ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Стъпка 3. Създайте функция за низ от ред
Линейните низове са прави линии, разделени на сегменти. Създаваме ги точно като точки, но предоставяме двойка координати за всяка точка от линията:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Стъпка 4. Добавете функциите към векторен слой
За да добавите функциите към картата, трябва да ги добавите към източник, който добавяте към векторен слой, който след това можете да добавите към картата:
var vector_layer = нов ol.layer. Vector ({източник: нов ol.source. Vector ({характеристики: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);
Част 2 от 3: Преобразуване на геометриите на характеристиките за използване на координати
Както при всеки мощен софтуер за картографиране, картите на OpenLayers могат да имат различни слоеве с различни начини за показване на информация. Тъй като Земята е глобус, а не плоска, когато се опитваме да я покажем на нашите плоски карти, софтуерът трябва да коригира местоположенията, така че да съответства на плоската карта. Тези различни начини за показване на картографска информация се наричат проекции. За да използваме векторен слой и слой с плочки заедно на една и съща карта, означава, че трябва да трансформираме слоевете от една проекция в друга.
Стъпка 1. Поставете функциите в масив
Започваме, като поставяме функциите, които искаме да трансформираме заедно, в масив, през който можем да повторим.
var features = [point_feature, linestring_feature];
Стъпка 2. Напишете функцията за трансформиране
В OpenLayers можем да използваме функцията transform () върху геометричния обект на всяка функция. Поставете този код за преобразуване във функция, която можем да извикаме по -късно:
функция transform_geometry (елемент) {var current_projection = new ol.proj. Projection ({код: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }
Стъпка 3. Извикайте функцията за трансформиране на функциите
Сега просто повторете през масива.
features.forEach (transform_geometry);
Част 3 от 3: Задаване на стила на векторния слой
За да променим как изглежда всяка функция на картата, трябва да създадем и приложим стил. Стиловете могат да променят цветове, размери и други атрибути на точки и линии, а също така могат да показват изображения за всяка точка, което е много удобно за персонализирани карти. Този раздел не е необходим, но е забавен и полезен.
Стъпка 1. Създайте пълнене и подреждане
Създайте обект в стил запълване и полупрозрачен червен цвят и стил (линия), който е плътна червена линия:
var fill = нов ol.style. Fill ({цвят: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({цвят: [180, 0, 0, 1], ширина: 1});
Стъпка 2. Създайте стила и го приложите към слоя
Обектът в стил OpenLayers е доста мощен, но засега ще зададем само запълването и щриха:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (стил);
