JS>> mapbox-gl-layers-control>> 返回
项目作者： AdriSolid

项目描述 ：
Mapbox GL JS Layers Control Plugin
高级语言： TypeScript
项目地址: git://github.com/AdriSolid/mapbox-gl-layers-control.git
创建时间： 2020-09-12T15:59:36Z
项目社区：https://github.com/AdriSolid/mapbox-gl-layers-control
开源协议：
下载


@adrisolid/mapbox-gl-layers-control

Mapbox GL JS Layers Control

I need some caffeine to work :)


Buy Me a Coffee at ko-fi.com

Demo

thumb

Features

  • Create a layers control by wrapping Mapbox GL JS layers id’s.
  • Layers could be grouped. If all layers of a group are visible ‘select all’ checkbox will be checked, otherwise, will be unchecked.
  • Visibility is firstly controled under visibility layout property, if this property does not exists, Mapbox GL JS assumes that is visible.

Getting Started

  1. yarn add @adrisolid/mapbox-gl-layers-control

Usage with Vanilla JS:

  1. import { Map } from "mapbox-gl";
  2. import { MapboxLayersControl } from "@adrisolid/mapbox-gl-layers-control";
  3. import "@adrisolid/mapbox-gl-layers-control/styles.css";
  5. const LAYERS_INFO = [
  6.   {
  7.     id: "buildings-1",
  8.     color: "red",
  9.     xtrsnH: ["/", ["get", "height"], 2],
  10.     xtrsB: ["get", "min_height"],
  11.   },
  12.   {
  13.     id: "buildings-2",
  14.     color: "orange",
  15.     xtrsnH: ["get", "height"],
  16.     xtrsB: ["/", ["get", "height"], 2],
  17.   },
  18.   {
  19.     id: "buildings-3",
  20.     color: "lightblue",
  21.     xtrsnH: ["*", ["get", "height"], 1.5],
  22.     xtrsB: ["get", "height"],
  23.   },
  24. ];
  26. const map = new Map({
  27.   style: "mapbox://styles/mapbox/dark-v10",
  28.   center: [-74.0066, 40.7135],
  29.   zoom: 15.5,
  30.   pitch: 45,
  31.   bearing: -17.6,
  32.   container: "map",
  33.   antialias: true,
  34. });
  36. function layerGenerator(layers) {
  37.   layers.forEach((layer) => {
  38.     map.addLayer({
  39.       id: layer.id,
  40.       source: "composite",
  41.       "source-layer": "building",
  42.       filter: ["==", "extrude", "true"],
  43.       type: "fill-extrusion",
  44.       minzoom: 15,
  45.       paint: {
  46.         "fill-extrusion-color": layer.color,
  47.         "fill-extrusion-height": layer.xtrsnH,
  48.         "fill-extrusion-base": layer.xtrsB,
  49.         "fill-extrusion-opacity": 0.6,
  50.       },
  51.     });
  52.   });
  53. }
  55. map.on("load", function () {
  56.   layerGenerator(LAYERS_INFO);
  58.   map.addControl(
  59.     new MapboxLayersControl({
  60.       title: "Floors",
  61.       layersDefinition: [
  62.         {
  63.           name: "Select all",
  64.           group: true,
  65.           children: [
  66.             {
  67.               id: "buildings-1",
  68.               name: "First floor",
  69.             },
  70.             {
  71.               id: "buildings-2",
  72.               name: "Second floor",
  73.             },
  74.             {
  75.               id: "buildings-3",
  76.               name: "Third floor",
  77.             },
  78.           ],
  79.         },
  80.       ],
  81.     }),
  82.   );
  83. });

Usage with React

Check this out :)

Properties:

  • title (Default: ""): string Layers control title

  • layersDefinition (Default: {}): LayersDefinition Layers control definition. Following these types:

    1. type LayersInfo = Array<{ id: string; name: string }>;
    2. type LayersDefinition = Array<{ children: LayersInfo; group?: boolean; name?: string }>;