Suite

Étiquette personnalisée pour les fonctionnalités d'openlayers 3

Étiquette personnalisée pour les fonctionnalités d'openlayers 3


J'ai LineString dans openlayers-3. Je souhaite définir 2 étiquettes pour cette fonctionnalité au début et à la fin de la fonctionnalité. Un exemple est le suivant :

Comment puis-je faire ces étiquettes?


Je résous cette question moi-même et je veux la partager avec d'autres.
Dans la première étape, nous définissons une méthode qui obtient deux points avec un max pour calculer la position de l'étiquette. Voir image :

Le code est le suivant :

function getLineStylePosition(firstCoor, lastCoor, max) { var deltaX = lastCoor[0] - firstCoor[0] ; var deltaY = lastCoor[1] - firstCoor[1] ; var rotation = Math.atan(deltaY/deltaX) * - 1; var offsetX = max * Math.cos(rotation) * (-1); var offsetY = max * Math.sin(rotation) * (-1); var textAlign = 'right'; if(deltaX < 0) { offsetX *= ​​-1; décalageY *= -1; textAlign = 'gauche'; } return { rotation : rotation, textAlign : textAlign, offsetX : offsetX, offsetY : offsetY } ; } ;

Vous avez maintenant le décalage de style. Vous pouvez définir un style comme suit :

var startTextStyle = new ol.style.Text(getLineStylePosition(firstCoor, lastCoor, 15)); startTextStyle.setText("label 1"); startTextStyle.setFont("Arial"); startTextStyle.setFill(new ol.style.Fill({color: 'blue'}); var startStyle = new ol.style.Style({ text: startTextStyle, geometry: new ol.geom.Point(firstCoor) });

Copiez ce code pour l'étiquette 2.


Voir la vidéo: GeoServer. OpenLayers. Apache