City Selector Control

A City Selector Control for mapbox-gl

快速开始

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css" rel="stylesheet">

<div id='map' style='width: 800px; height: 600px;'></div>
<script>
  mapboxgl.accessToken = '<your access token here>';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9'
  });
  map.addControl(new CitySelectorControl(), 'top-right');
</script>

模块化

npm i city-selector-control

import CitySelectorControl from 'city-selector-control'
import 'city-selector-control/dist/style.css'
// 默认选项
map.addControl(new CitySelectorControl(), 'top-right')

// 自定义
const citySelectorOptions = {
  theme: 'dark',
  placeholder: '全国',
  hot: ['110000', '340500'],
  zoom: 12
};
map.addControl(new CitySelectorControl(citySelectorOptions), 'top-right');

选项

|#|名称|类型|描述|默认值| |---|---|---|---|---| |1|theme|String |主题, 可选 'light' 或 'dark'.|'light'| |2|placeholder|String|初始化时的文本.|'请选择' | |2|hot|Array|热门城市编码，可为空 [].|['440100', '440300', '330100', '510100'] | |2|zoom|Number|选择城市后的缩放级别.|10 |

截图