mapbox 样式

Minla

已于 2023-08-24 17:10:23 修改

阅读量619

点赞数

分类专栏： mapbox地图文章标签： android

于 2023-07-04 15:44:17 首次发布

本文链接：https://blog.csdn.net/u012551120/article/details/131536518

版权

mapbox地图专栏收录该内容

7 篇文章 1 订阅

订阅专栏

mapbox 样式

styles

styles

Source子类	Source描述	Layer子类	Layer描述
GeoJsonSource	常用，存放点线面数据的json	SymbolLayer	标志图层，结合点数据使用
VectorSource	常用，存放矢量瓦片的数据 (例如路况拥堵效果)	LineLayer	线图层，结合线数据使用
RasterSource	常用，存放栅格瓦片的数据	FillLayer	面图层，结合面数据使用
ImageSource	不常用，将一张图片贴在地图某片四边形区域	CircleLayer	圆图层，结合点数据使用，点为圆心，可以设置半径
RasterDemSource	不常用，带山坡效果的栅格瓦片数据	RasterLayer	栅格图层，结合栅格瓦片数据使用
CustomGeometrySource	不用	HeatmapLayer	热力图层，结合大量点数据使用效果好
UnknownSource	不用	HillshadeLayer	山坡图层，结合山坡瓦片数据使用
		BackgroundLayer	背景图层，不需要结合Source即可使用
		FillExtrusionLayer	面图层，带3D效果，像建筑物凸起这种
		LocationIndicatorLayer	结合定位点使用的图层
		CustomLayer	没有实际效果

1. 矢量瓦片加载(VectorSource)

VectorSourceActivity

          style.addSource(
            new VectorSource("terrain-data", "mapbox://mapbox.mapbox-terrain-v2")
          );

          LineLayer terrainData = new LineLayer("terrain-data", "terrain-data");
          terrainData.setSourceLayer("contour");
          terrainData.setProperties(
            lineJoin(Property.LINE_JOIN_ROUND),
            lineCap(Property.LINE_CAP_ROUND),
            lineColor(Color.parseColor("#ff69b4")),
            lineWidth(1.9f)
          );

          style.addLayer(terrainData);

2. 栅格瓦片加载(RasterSource)

AddWmsSourceActivity|AdjustLayerOpacityActivity

          style.addSource(new RasterSource(
            "web-map-source",
            new TileSet("tileset", "https://img.nj.gov/imagerywms/Natural2015?bbox={"
              + "bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:"
              + "3857&transparent=true&width=256&height=256&layers=Natural2015"), 256));

          // Create a RasterLayer with the source created above and then add the layer to the map
          if (style.getLayer("tunnel-street-minor-low") != null) {
            style.addLayerBelow(
              new RasterLayer("web-map-layer", "web-map-source"), "tunnel-street-minor-low");
          } else {
            style.addLayer(new RasterLayer("web-map-layer", "web-map-source"));
          }

3. 改变地图语种(Language)

LanguageSwitchActivity

  SymbolLayer countryLabelTextSymbolLayer = style.getLayerAs("country-label");
  countryLabelTextSymbolLayer.setProperties(textField("{name_zh-Hans}"));

4. 隐藏显示图层(Visibility)

ShowHideLayersActivity

  if (VISIBLE.equals(layer.getVisibility().getValue())) {
    layer.setProperties(visibility(NONE));
  } else {
    layer.setProperties(visibility(VISIBLE));
  }

5. 地图上加载图片(ImageSource)

ImageSourceActivity

  // Set the latitude and longitude values for the image's four corners
  LatLngQuad quad = new LatLngQuad(
    new LatLng(25.7836, -80.11725),
    new LatLng(25.783548, -80.1397431334),
    new LatLng(25.7680, -80.13964),
    new LatLng(25.76795, -80.11725)
  );

  // Add an ImageSource to the map
  style.addSource(new ImageSource(ID_IMAGE_SOURCE, quad, R.drawable.miami_beach));

  // Create a raster layer and use the imageSource's ID as the layer's data. Then add a RasterLayer to the map.
  style.addLayer(new RasterLayer(ID_IMAGE_LAYER, ID_IMAGE_SOURCE));