<!--
 * @Author: jiangbotao
 * @Date: 2019-12-09 23:17:48
 * @LastEditors  : jiangbotao
 * @LastEditTime : 2019-12-18 19:39:20
 * @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://support.supermap.com.cn:8090";
        var url = host + "/iserver/services/map-world/rest/maps/World";
        var map = new mapboxgl.Map({
            container: 'map',
            attributionControl: false,
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": '展示栅格瓦片和各种Mapbox控件',
                        "type": "raster",
                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                        "tileSize": 256
                    },
                    'china_boundary': {
                        "type": "geojson",
                        "data": "./static/china.json"
                    },
                    'wz_boundary': {
                        "type": "geojson",
                        "data": "./static/330300_full.json"
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                },{
                    "id": "cn_boundary",
                    "type": "fill",
                    "source": "china_boundary",
                    'paint': {
                        'fill-color': '#081a45',
                        'fill-outline-color': 'rgba(200, 100, 240, 1)',
                        'fill-opacity': 0.9
                    },
                    "minzoom": 7,
                    "maxzoom": 22
                },{
                    "id": "wz_boundary",
                    "type": "fill",
                    "source": "wz_boundary",
                    'paint': {
                        'fill-color': '#1e3e77',
                        'fill-outline-color': 'rgba(200, 100, 240, 1)',
                        'fill-opacity': 0.2
                    },
                    "minzoom": 7,
                    "maxzoom": 22
                },{
                    'id': 'wz_boundary_line',
                    'type': 'line',
                    "source": "wz_boundary",
                    'layout': {
                        'line-cap': 'round',
                        'line-join': 'round'
                    },
                    'paint': {
                        'line-color': '#3e9ad3',
                        'line-dasharray': [0.2, 2],
                        'line-width': 2
                    }
                }]
            },
            center: [120.70211, 27.67169], // starting position
            zoom: 8 // 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');
        map.addControl(new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true
        }),'top-left');
        map.addControl(new mapboxgl.AttributionControl({compact: true}));
        var Draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                line_string: true,
                polygon: true,
                point: true,
                trash: true
            }
        });
        map.addControl(Draw,'top-left');
    }
}
</script>

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