OpenLayers est un puissant outil JavaScript qui nous permet de créer et d'afficher toutes sortes de cartes sur un site Web. Cet article vous guidera dans l'ajout d'un point et d'une entité de chaîne de lignes, puis transformera leurs projections pour utiliser des coordonnées, puis ajoutera de la couleur en définissant le style du calque.
Veuillez noter que vous devez avoir une carte OpenLayers fonctionnelle installée dans une page Web pour suivre cet article. Si vous n'en avez pas, consultez Comment créer une carte à l'aide d'OpenLayers 3.
Pas
Partie 1 sur 3: Ajout d'entités de chaîne de points et de lignes
Étape 1. Créez une entité ponctuelle
Copiez simplement la ligne de code suivante dans votre
élément:
var point_feature = new ol. Feature({ });
Étape 2. Définissez la géométrie du point
Pour indiquer à OpenLayers où placer le point, vous devez créer une géométrie et lui donner un ensemble de coordonnées, qui est un tableau sous la forme de [longitude (E-W), latitude (N-S)]. Le code suivant crée ceci et définit la géométrie du point:
var point_geom = new ol.geom. Point([20, 20]); point_feature.setGeometry(point_geom);
Étape 3. Créez une fonction de chaîne de ligne
Les chaînes de lignes sont des lignes droites divisées en segments. Nous les créons exactement comme des points, mais nous fournissons une paire de coordonnées pour chaque point de la chaîne de ligne:
var linestring_feature = new ol. Feature({ géométrie: new ol.geom. LineString(
Étape 4. Ajoutez les entités à une couche vectorielle
Pour ajouter les entités à la carte, vous devez les ajouter à une source, que vous ajoutez à une couche vectorielle, que vous pouvez ensuite ajouter à la carte:
var vector_layer = new ol.layer. Vector({ source: new ol.source. Vector({ features: [point_feature, linestring_feature] }) }) map.addLayer(vector_layer);
Partie 2 sur 3: Transformer les géométries des entités pour utiliser les coordonnées
Comme avec tout logiciel de cartographie puissant, les cartes OpenLayers peuvent avoir différentes couches avec différentes manières d'afficher les informations. Parce que la Terre est un globe et non plat, lorsque nous essayons de l'afficher sur nos cartes plates, le logiciel doit ajuster les emplacements pour qu'ils correspondent à la carte plate. Ces différentes manières d'afficher les informations cartographiques sont appelées projections. Utiliser une couche vectorielle et une couche de tuiles ensemble sur la même carte signifie que nous devons transformer les couches d'une projection à une autre.
Étape 1. Mettez les fonctionnalités dans un tableau
Nous commençons par rassembler les fonctionnalités que nous voulons transformer en un tableau que nous pouvons parcourir de manière itérative.
var features = [point_feature, linestring_feature];
Étape 2. Écrivez la fonction de transformation
Dans OpenLayers, nous pouvons utiliser la fonction transform() sur l'objet géométrique de chaque entité. Mettez ce code de transformation dans une fonction que nous pourrons appeler plus tard:
function transform_geometry(element) { var current_projection = new ol.proj. Projection({code: "EPSG:4326"}); var new_projection = tile_layer.getSource().getProjection(); element.getGeometry().transform(current_projection, new_projection);); }
Étape 3. Appelez la fonction de transformation sur les fonctionnalités
Maintenant, parcourez simplement le tableau.
features.forEach(transform_geometry);
Partie 3 sur 3: Définition du style du calque vectoriel
Pour changer l'apparence de chaque entité sur la carte, nous devons créer et appliquer un style. Les styles peuvent modifier les couleurs, les tailles et d'autres attributs des points et des lignes, et ils peuvent également afficher des images pour chaque point, ce qui est très pratique pour les cartes personnalisées. Cette section n'est pas nécessaire, mais elle est amusante et utile.
Étape 1. Créez le remplissage et le remplissage
Créez un objet de style de remplissage et une couleur rouge semi-transparente, ainsi qu'un style de trait (ligne) qui est une ligne rouge continue:
var fill = new ol.style. Fill({ color: [180, 0, 0, 0.3] }); var stroke = new ol.style. Stroke({ color: [180, 0, 0, 1], width: 1 });
Étape 2. Créez le style et appliquez-le au calque
L'objet de style OpenLayers est assez puissant, mais nous allons seulement définir le remplissage et le contour pour l'instant:
var style = new ol.style. Style({ image: new ol.style. Circle({ fill: fill, stroke: stroke, radius: 8 }), fill: fill, stroke: stroke }); vector_layer.setStyle(style);
