# 图层管理

<sm-web-map :map-options="mapOptions">
  <sm-layer-manager position="top-left" :layers="layers"></sm-layer-manager>
</sm-web-map>

<script>
new Vue({
  el: '#main',
  data() {
    return {
      layers: [
                {
                title: '直辖市',
                children: [
                    {
                        title: '上海',
                        mapInfo: {
                            serverUrl: 'https://www.supermapol.com/',
                            mapId: 394538195,
                            layerFilter: function(layer) {
                                if (layer.name === '上海_县级行政区划图@公众数据') {
                                    return true;
                                }
                                return false;
                            }
                        }
                    },
                    {
                        title: '天津',
                        mapInfo: {
                            serverUrl: 'https://www.supermapol.com/',
                            mapId: 849848633,
                            layerFilter: function(layer) {
                                if (layer.name === '天津_县级行政区划图@公众数据') {
                                    return true;
                                }
                                return false;
                            }
                        }
                    },
                    {
                        title: '北京',
                        mapInfo: {
                            serverUrl: 'https://www.supermapol.com/',
                            mapId: 1837435007,
                            layerFilter: function(layer) {
                                if (layer.name === '北京_县级行政区划图@公众数据') {
                                    return true;
                                }
                                return false;
                            }
                        }
                    },
                    {
                        title: '重庆',
                        mapInfo: {
                            serverUrl: 'https://www.supermapol.com/',
                            mapId: 1589273415,
                            layerFilter: function(layer) {
                                if (layer.name === '重庆_县级行政区划图@公众数据') {
                                    return true;
                                }
                                return false;
                            }
                        }
                    }
                ]，
                 mapOptions: {
                            container: 'map', // container id
                            style: {
                                version: 8,
                                sources: {
                                    'raster-tiles': {
                                        type: 'raster',
                                        tiles: ['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/ChinaDark'],
                                        rasterSource: 'iserver',
                                        tileSize: 256
                                    }
                                },
                                layers: [
                                    {
                                        id: 'simple-tiles',
                                        type: 'raster',
                                        source: 'raster-tiles',
                                        minzoom: 0,
                                        maxzoom: 22
                                    }
                                ]
                            },
                            center: [113.91814841850453, 34.946821449424775], // starting position
                            zoom: 5.39 // starting zoom
                        }
    };
  }
});
</script>