<!--
 * @Author: jiangbotao
 * @Date: 2019-12-10 14:16:04
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-10 15:40:38
 * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
 -->
<template>
    <div >
        <div id="map"></div>
    </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import { Logo, FeatureService, QueryService, ThemeService } from '@supermap/iclient-mapboxgl';
export default {
    name: 'HelloWorld',
    data () {
        return {
        
        }
    },
    mounted(){ 
        var map, host = "http://support.supermap.com.cn:8090";
        var url = host + "/iserver/services/map-world/rest/maps/World";
        var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";

        var map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": 'attribution',
                        "type": "raster",
                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
                        "tileSize": 256,
                    },
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }],
            },
            center: [108.94, 34.34],
            maxZoom: 18,
            zoom: 2
        });
        map.addControl(new Logo(), 'bottom-right');
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        map.on('load', function () {
            createTheme();
        });

        function createTheme() {
            var themeGraph = new SuperMap.ThemeGraph({
                items: [
                    new SuperMap.ThemeGraphItem({
                        caption: "全国省份2013_GDP",
                        graphExpression: "GDP_2013",
                        uniformStyle: new SuperMap.ServerStyle({
                            fillForeColor: new SuperMap.ServerColor(255, 215, 0),
                            lineWidth: 0
                        })
                    }),
                    new SuperMap.ThemeGraphItem({
                        caption: "全国省份2014_GDP",
                        graphExpression: "GDP_2014",
                        uniformStyle: new SuperMap.ServerStyle({
                            fillForeColor: new SuperMap.ServerColor(0, 191, 255),
                            lineWidth: 0
                        })
                    }),
                ],
                barWidth: 0.001,
                graduatedMode: SuperMap.GraduatedMode.CONSTANT,
                graphAxes: new SuperMap.ThemeGraphAxes({
                    axesDisplayed: true
                }),
                graphSize: new SuperMap.ThemeGraphSize({
                    maxGraphSize: 500000,
                    minGraphSize: 200000
                }),
                graphText: new SuperMap.ThemeGraphText({
                    graphTextDisplayed: true,
                    graphTextFormat: SuperMap.ThemeGraphTextFormat.VALUE,
                    graphTextStyle: new SuperMap.ServerTextStyle({
                        fontHeight: 10,
                        fontWidth: 10
                    })
                }),
                overlapAvoided: false,
                graphSizeFixed: false,
                graphType: SuperMap.ThemeGraphType.BAR
            });
            var themeParameters = new SuperMap.ThemeParameters({
                themes: [themeGraph],
                datasetNames: ["China_Province_pg"],
                dataSourceNames: ["China"]
            });

            new ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
                var result = serviceResult.result;
                if (result && result.newResourceID) {
                    map.addSource("theme", {
                        "type": 'raster',
                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
                        "tileSize": 256,
                    });
                    map.addLayer({
                        "id": "themeLayer",
                        "type": "raster",
                        "source": "theme",
                    });
                }
            })
        }
    }
}
</script>

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