<< 所有组件

🏷️ @bdh-gis/mapbox-gl-extern

自定义功能

npm i @bdh-gis/mapbox-gl-extern

import * as Utils from '@bdh-gis/mapbox-gl-extern';
import Extern from '@bdh-gis/mapbox-gl-extern';
import '@bdh-gis/mapbox-gl-extern/src/index.css';

const externControl = new Extern({
  buttons: [
    {
      title: '外部定义',
      icon: Utils.parseSVG(`<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
            <path d="M512 389.12c-67.584 0-122.88 55.296-122.88 122.88s55.296 122.88 122.88 122.88 122.88-55.296 122.88-122.88-55.296-122.88-122.88-122.88z m307.2 122.88c0-35.84-86.016-54.272-99.328-86.016-13.312-32.768 33.792-106.496 9.216-131.072-24.576-24.576-98.304 22.528-131.072 9.216-31.744-13.312-50.176-99.328-86.016-99.328s-54.272 86.016-86.016 99.328c-32.768 13.312-106.496-33.792-131.072-9.216-24.576 24.576 22.528 98.304 9.216 131.072-13.312 31.744-99.328 50.176-99.328 86.016s86.016 54.272 99.328 86.016c13.312 32.768-33.792 106.496-9.216 131.072 24.576 24.576 98.304-22.528 131.072-9.216 31.744 13.312 50.176 99.328 86.016 99.328s54.272-86.016 86.016-99.328c32.768-13.312 106.496 33.792 131.072 9.216 24.576-24.576-22.528-98.304-9.216-131.072 13.312-31.744 99.328-50.176 99.328-86.016zM512 696.32c-101.376 0-184.32-82.944-184.32-184.32s82.944-184.32 184.32-184.32 184.32 82.944 184.32 184.32-82.944 184.32-184.32 184.32z" fill="#b13131" p-id="5284">
            </path>
            </svg>`),
      onClick: () => {
        alert('外部自定义功能按钮');
      },
    },
  ],
});
map.addControl(externControl, controlPosition);
或者
const toggleControl = new Extern({
  buttons: [
    {
      title: '收起',
      icon: Utils.parseSVG(`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16" fill="none">
                  <path d="M13.4632 9.83385C13.4632 10.5272 13.5373 12.789 14.4897 12.789C15.4425 12.789 15.5164 10.5272 15.5164 9.83385C15.5164 9.14052 15.4423 6.87891 14.4897 6.87891C13.5373 6.87891 13.4632 9.14052 13.4632 9.83385ZM14.7256 9.83385C14.7256 10.7643 14.6051 11.4261 14.4897 11.7745C14.3747 11.4261 14.254 10.7643 14.254 9.83385C14.254 8.90342 14.3745 8.24179 14.4897 7.89339C14.6051 8.24179 14.7256 8.90342 14.7256 9.83385Z" fill="rgba(68, 244, 255, 1)"></path>
                  <path d="M14.6056 15.9957C16.3071 15.9482 17.1979 12.9179 17.1979 9.92046C17.1979 7.33537 16.5339 4.72941 15.2605 4.02913L14.8677 3.60073C14.5059 3.2063 14.19 2.77217 13.926 2.30664C13.6274 1.77868 13.3987 1.21415 13.2457 0.627239L13.082 0L1.52588e-05 0.153042L0.162912 1.10878C0.28948 1.85466 0.541845 2.56731 0.913048 3.22663C1.18899 3.71667 1.53005 4.16633 1.9227 4.57289C1.05662 5.65771 0.607738 7.79585 0.607738 9.92046C0.607738 12.9082 1.49314 15.9273 3.18394 15.9938V16H14.6056V15.9957ZM16.0116 9.92046C16.0116 12.9562 15.0756 14.8139 14.566 14.8139C14.0565 14.8139 13.1204 12.9562 13.1204 9.92046C13.1204 6.88475 14.0565 5.02699 14.566 5.02699C15.0756 5.02699 16.0116 6.88494 16.0116 9.92046ZM2.8224 3.80305C2.47902 3.45696 2.18472 3.0676 1.94666 2.6448C1.71188 2.22761 1.53507 1.78452 1.41894 1.32269L12.1732 1.19689C12.3487 1.78626 12.5904 2.35495 12.8936 2.89098C13.0732 3.20786 13.2736 3.51255 13.4934 3.80305L2.8224 3.80305ZM1.79381 9.92046C1.79381 6.88475 2.72984 5.02699 3.2394 5.02699V4.98912L12.9626 4.98912C12.2837 6.15239 11.9342 8.043 11.9342 9.92046C11.9342 11.7786 12.2774 13.6478 12.9427 14.8139H3.2394C2.72964 14.8139 1.79381 12.9562 1.79381 9.92046Z" fill="rgba(68, 244, 255, 1)"></path>
                  </svg>`),
      onClick: () => {
        toggleControl.buttons[0].classList.add('hidden');
        toggleControl.buttons[1].classList.remove('hidden');
        [
          backControl,
          zoomControl,
          compassControl,
          fullscreenControl,
          locateControl,
          viewControl,
          baselayerControl,
          terrainControl,
          linkControl,
          textlayerControl,
          layerControl,
          locationControl,
          legendControl,
          printControl,
          externControl,
        ].forEach((control) => {
          if (control.buttonsContainer && control.buttonsContainer.style)
            control.buttonsContainer.style.display = 'none';
        });
      },
    },
    {
      title: '展开',
      icon: Utils.parseSVG(`<svg xmlns="http://www.w3.org/2000/svg" width="17" height="12" viewBox="0 0 17 12" fill="none">
            <path d="M12.8556 5.83385C12.8556 6.52717 12.9296 8.78898 13.882 8.78898C14.8349 8.78898 14.9087 6.52717 14.9087 5.83385C14.9087 5.14052 14.8347 2.87891 13.882 2.87891C12.9296 2.87891 12.8556 5.14052 12.8556 5.83385ZM14.118 5.83385C14.118 6.76427 13.9974 7.4261 13.882 7.7745C13.7671 7.4261 13.6463 6.76427 13.6463 5.83385C13.6463 4.90342 13.7669 4.24179 13.882 3.89339C13.9974 4.24179 14.118 4.90342 14.118 5.83385Z" fill="white"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.21005 0.841106C0.89845 1.65764 0 4.16427 0 5.92046C0 8.90825 0.8854 11.9273 2.5762 11.9938V12L13.9979 12V11.9957C15.6993 11.9482 16.5901 8.91791 16.5901 5.92046C16.5901 3.33537 15.9262 0.729412 14.6528 0.0291305L14.6261 0L2.89226 0L1.21005 0.841106ZM13.9583 10.8139C14.4678 10.8139 15.4039 8.95617 15.4039 5.92046C15.4039 2.88494 14.4678 1.02699 13.9583 1.02699C13.4487 1.02699 12.5127 2.88475 12.5127 5.92046C12.5127 8.95617 13.4487 10.8139 13.9583 10.8139ZM2.63166 1.02699C2.1221 1.02699 1.18607 2.88475 1.18607 5.92046C1.18607 8.95617 2.12191 10.8139 2.63166 10.8139L12.3349 10.8139C11.6696 9.64776 11.3264 7.7786 11.3264 5.92046C11.3264 4.043 11.676 2.15239 12.3548 0.989119L2.63166 0.989119V1.02699Z" fill="currentColor"></path>
            </svg>`),
      hidden: true,
      onClick: () => {
        toggleControl.buttons[0].classList.remove('hidden');
        toggleControl.buttons[1].classList.add('hidden');
        [
          backControl,
          zoomControl,
          compassControl,
          fullscreenControl,
          locateControl,
          viewControl,
          baselayerControl,
          terrainControl,
          linkControl,
          textlayerControl,
          layerControl,
          locationControl,
          legendControl,
          printControl,
          externControl,
        ].forEach((control) => {
          if (control.buttonsContainer && control.buttonsContainer.style)
            control.buttonsContainer.style.display = 'block';
        });
      },
    },
  ],
});
map.addControl(toggleControl, controlPosition);

Options

export type AnyEvent = "CONTROL_BUTTON_CLICK" | "CREATE_BUTTONS";
export type Options = {
    isCreateButtons?: boolean;
    buttons?: Utils.ButtonOptions[];
    onEvents?: (event: AnyEvent, data?: any) => void;
};