I have a map layer that has a remote GeoJSON source. I'm adding it to my Mabpox map using the MGLShapeCollectionFeature
and then use the MGLCircleStyleLayer
and a MGLSymbolStyleLayer
to display the data along with some text.
It works as expected and the points are displayed on the map:
Data
{
"features": [
{
"geometry": {
"coordinates": [
-120.644,
35.238
],
"type": "Point"
},
"properties": {
"altim": 1019.0,
"cover": "CLR",
"data": "METAR",
"dewp": 12.2,
"fltcat": "VFR",
"id": "KSBP",
"obsTime": "2020-05-03T18:56:00Z",
"prior": "5",
"rawOb": "KSBP 031856Z 31018KT 10SM CLR 22/12 A3009 RMK AO2 SLP187 T02170122",
"site": "San Luis Obispo/Ches",
"slp": 1018.7,
"temp": 21.7,
"visib": 10.00,
"wdir": 310,
"wspd": 18
},
"type": "Feature"
}
],
"type": "FeatureCollection"
}
Result
Now the question is if it's possible to display the data as a rounded rectangle instead of just a circle. Something like this:
This can be done by using not a single position, but a polygon built from a position array in shape of a rounded rectangle. This rectangle can be filled with a pattern the text you would like to show.
Load fill pattern:
// Set the UIImage to be used for the fill pattern.
let fillPatternImage = UIImage(named: "stripe-pattern")!
// Add the fill pattern image to used by the style layer.
style.setImage(fillPatternImage, forName: "stripe-pattern")
With layer from a vector source (Positions Polygon array defining the rounded rectangle)
// Create a style layer using the vector source.
let layer = MGLFillStyleLayer(identifier: "drone-restrictions-style", source: source)
Add the filling pattern and set the opacity of the pattern:
layer.fillPattern = NSExpression(forConstantValue: "stripe-pattern")
layer.fillOpacity = NSExpression(forConstantValue: 0.5)
Use a separate layer to draw the text over the rounded rectangle.
Please also refer to this Mapbox example
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.