יותר

תווית מרובה עם מיקום מוליט ב- OpenLayers


יש לי שכבה וקטוריתOpenLayers. יש לו כמה תכונות כמושמאלה,ימין,חלק עליון,תַחתִיתוכו 'אני רוצה שכל תכונה תהיה מרובת תוויות (שתהיה לה יותר מתווית אחת).
קוד ה- javascript הוא כדלקמן:

סגנון = OpenLayers.Style חדש (); rule = OpenLayers.Rule חדש ({filter: OpenLayers.Filter.Comparison חדש ({...}), מסמל: {fillColor: 'כחול', תווית: ?????,}}); style.addRules ([כלל]); styleMap = OpenLayers.StyleMap חדש ({'ברירת מחדל': style}); myLayer.styleMap = styleMap

אני רוצה שהסגנון שלי יהיה כך:

איך הולך לי?

הערה: אני יודע שאוכל לעשות זאת על ידי "SLD", אבל עלי להשתמש במפת סגנונות ב- OpnenLayers.


התווית היא אלמנט טקסט SVG. אני מציע לך לבצע דריסה עבורOpenLayers.Renderer.SVG.prototype.drawTextפוּנקצִיָה.

פתח את חבילת ההתקנה של OpenLayers ומצא אותה כאן:lib OpenLayers Renderer SVG.js: 649

קח את הפונקציה ועקוף אותה בקוד שלך כך:

// ה- DrawText שלי עוקף את OpenLayers.Renderer.SVG.prototype.drawText = function (featureId, style, location) {// הקוד המקורי כאן}

את הדריסה יש לקרוא על ידי הדפדפן מאוחר יותר מספריית OpenLayers. בביטול, אתה צריך לבדוק אם ה-סִגְנוֹןהאובייקט מכיל את תכונות התוסף שלך כמושמאלה,חלק עליון, או איך שלא תקראו לזה, ואם כן, החילו טרנספורמציה על התווית. לשמאל, זה יהיה

var translate = 'translate (' + -shift + ',' + 0 + ')'; label.setAttributeNS (null, "transform", תרגם);

איפהמִשׁמֶרֶתהוא השינוי הרצוי בפיקסלים.

עשיתי עקיפה דומה לסיבוב תוויות, אבל המקרה שלך קצת יותר מסובך, כי אם הבנתי נכון, אתה רוצה להיות מסוגל להוסיף ארבע תוויות לתכונה אחת. זה אומר שהביטול שלך יצטרך להיות מסוגל להוסיף ארבע תוויות במקום אחת.


אני מעוניין בתגובה לכך מכיוון שהייתה לי אותה בעיה.

פתרתי את זה (אבל זה לא ממש פיתרון טוב) לפרסם כמה וקטורים תוך שימוש באותם נתונים מרתקים ולתת להם סגנון אחר.


צפו בסרטון: How to create map with GeoServer Open Layer and WMS. WFS? (אוֹקְטוֹבֶּר 2021).