<!--
 * @Author: jiangbotao
 * @Date: 2019-12-09 23:17:48
 * @LastEditors  : jiangbotao
 * @LastEditTime : 2019-12-28 15:40:52
 * @FilePath: \mymapbox\src\components\Map3857.vue
 -->
<template>
    <div >
        <div id="map"></div>
    </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import { Logo } from '@supermap/iclient-mapboxgl';

export default {
    name: 'RasterTiles',
    data () {
        return {
        
        }
    },
    mounted(){ 
        var map, host = "http://192.168.1.100:8090";
        var url = host + "/iserver/services/map-world/rest/maps/World";
        var map = new mapboxgl.Map({
            container: 'map',
            attributionControl: false,
            background: {
                color: '#FFFFFF'
            },
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": '展示栅格瓦片和各种Mapbox控件',
                        "type": "raster",
                        "tiles": [host + '/iserver/services/map-ugcv5-Blurmap/rest/maps/Blurmap'],
                        "tileSize": 256,
                        "transparent": true,
                        "format": "png",
                        "rasterSource": 'iserver'
                    }
                },
                "layers": [{
                    id: 'background',
                    type: 'background',
                    paint: { 'background-color': "#000000" }
                },{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            center: [120.47, 27.78169], // starting position
            crs: 'EPSG:4490', 
            pitch: 50, // pitch in degrees
            bearing: -10, //
            maxZoom: 13,
            minZoom: 8,
            zoom: 9 // starting zoom
        });
        // map.addControl(new Logo(), 'bottom-right');
        // map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        // map.addControl(new mapboxgl.ScaleControl({}));
        // map.addControl(new mapboxgl.FullscreenControl(),'top-right');

        var popup1 = new mapboxgl.Popup({ closeButton: false, closeOnClick: false })
            .setLngLat([120.65, 28.02])
            .setHTML('<h1>鹿城区</h1>')
            .addTo(map);
        var popup2 = new mapboxgl.Popup({ closeButton: false, closeOnClick: false })
            .setLngLat([120.65, 27.78])
            .setHTML('<h1>瑞安市</h1>')
            .addTo(map);
        var popup3 = new mapboxgl.Popup({ closeButton: false, closeOnClick: false })
            .setLngLat([120.08, 27.80])
            .setHTML('<h1>文成县</h1>')
            .addTo(map);
        var popup4 = new mapboxgl.Popup({ closeButton: false, closeOnClick: false })
            .setLngLat([119.70, 27.56])
            .setHTML('<h1>泰顺县</h1>')
            .addTo(map);
        var popup5 = new mapboxgl.Popup({ closeButton: false, closeOnClick: false })
            .setLngLat([120.40, 27.52])
            .setHTML('<h1>苍南县</h1>')
            .addTo(map);
        var popup6 = new mapboxgl.Popup({ closeButton: false, closeOnClick: false })
            .setLngLat([120.98, 28.12])
            .setHTML('<h1>乐清市</h1>')
            .addTo(map);
        var popup7 = new mapboxgl.Popup({ closeButton: false, closeOnClick: false })
            .setLngLat([120.70, 28.16])
            .setHTML('<h1>永嘉县</h1>')
            .addTo(map);
    }
}
</script>

<style scoped>
#map {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white
}
</style>