<template>
    <div class="mapContainer" id="mapContainer">
            
    </div>
</template>
<script>
// import appConfig from "../../../public/config.json"
export default {
    name:"Map",
    props:["lngLat"],
    data(){
        return {
            mapboxMap:null,
        }
    },
    mounted(){
        this.initMap();
    },  
    methods:{
        initMap(){
            let _this = this;
            this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
            this.mapboxMap = new this.$mapboxgl.Map({
                container: 'mapContainer',
                zoom: 15.1,
                pitch:15,
                style:"mapbox://styles/mapbox/satellite-v9",
                // style: {
                //     glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
                //     "version": 8,
                //     "sources": {
                //         "raster-tiles": {
                //         "type": "raster",
                //         "tiles": ['http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+appConfig.appInfo.tiandituKey],
                //         "tileSize": 256,
                //         },
                //         "raster-tiles-l": {
                //         "type": "raster",
                //         "tiles": ['http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk='+appConfig.appInfo.tiandituKey],
                //         "tileSize": 256,
                //         }
                //     },
                //     "layers": [
                //         {
                //             "id": "tdt-img-tiles",
                //             "type": "raster",
                //             "source": "raster-tiles",
                //             "minzoom": 0,
                //             "maxzoom": 22
                //         },
                //         {
                //             "id": "tdt-img-tiles-l",
                //             "type": "raster",
                //             "source": "raster-tiles-l",
                //             "minzoom": 0,
                //             "maxzoom": 22
                //         }
                //     ]
                // },
                maxZoom: 22,
                minZoom: 5,
                center:_this.lngLat,
            })

            this.mapboxMap.on("load",()=>{
                _this.addIconLayer();
            })
        },
        addIconLayer(){
            let _this = this;

            this.mapboxMap.loadImage('/img/center.png', (error, image) => {
                _this.mapboxMap.addImage('iocnImage', image);
            });

            this.mapboxMap.addSource('iconSource', {
                type: 'geojson',
                data: {
                    "type": "FeatureCollection",
                    "features":[
                         {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": _this.lngLat
                            }
                        }
                    ]
                }
            });

            this.mapboxMap.addLayer({
              'id': 'iconLayer',
              'type': 'symbol',
              'source': 'iconSource',
              'layout': {
                'icon-allow-overlap': true,
                'icon-image':"iocnImage",
                'icon-size': 0.15,
                 "text-field":"防火站点",
                 "text-size":12,
                 "text-offset":[0,2],
              },
              paint: {
                "text-color": "#fff"
              }
            });

        }
    }
}
</script>
<style  scoped>
.mapContainer{
    width:100%;
    height:100%;
}
</style>