<!--
 * @Author: jiangbotao
 * @Date: 2019-12-09 23:17:48
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-16 01:29:01
 * @FilePath: \mymapbox\src\components\Map3857.vue
 -->
<template>
    <div >
        <div id="map"></div>
        <a-card title="业务图层操作" :bordered="false" style="width: 320px">
            <p>
                <a-button v-on:click="addLayer">加载图层</a-button>
                <a-button v-on:click="clearLayer">隐藏图层</a-button>
                <a-button v-on:click="showLayer">展示图层</a-button>
            </p>
        </a-card>
    </div>
</template>

<script>
import Vue from 'vue'
import mapboxgl from 'mapbox-gl';
import { Card, Button } from 'ant-design-vue'
Vue.use(Card)
Vue.use(Button)

export default {
    name: 'MVT',
    data () {
        return {
            map: null
        }
    },
    mounted(){ 
        this.map = new mapboxgl.Map({
            container: 'map',
            attributionControl: false,
            style: 'http://support.supermap.com.cn:8090/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
            center: [110.143, 30.236], // starting position
            zoom: 3 // starting zoom
        });
        this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        this.map.addControl(new mapboxgl.ScaleControl({}));
    },
    methods:{
        addLayer(){
            var polygon = {
                "type": "Polygon",
                "coordinates": [[[118, 20], [120, 20], [120, 50], [-120, 50], [118, 20]]]
            };
            var getFeatureParams = new SuperMap.GetFeaturesByGeometryParameters({
                toIndex: -1,
                datasetNames: ["World:Capitals"],
                geometry: polygon,
                spatialQueryMode: "INTERSECT"
            });
            var dataUrl = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
            var featureService = new mapboxgl.supermap.FeatureService(dataUrl);
            var features = null;
            var __this = this;
            featureService.getFeaturesByGeometry(getFeatureParams, function (serviceResult) {
                features = serviceResult.result.features;
                var phvals = features.features.map(f => f.properties.SMID);
                var min = Math.min(...phvals);
                var max = Math.max(...phvals);
                var range = max-min;
                console.log(min);
                console.log(max);
                console.log(range);
                console.log(features);
                if (!__this.map.getSource("queryDatas")) {
                    __this.map.addSource("queryDatas", {
                        "type": "geojson",
                        "data": features
                    });
                } else {
                    __this.map.getSource("queryDatas").setData(features);
                }
                
                if(__this.map.getLayer("queryDatasLayer")){
                    __this.map.removeLayer('queryDatasLayer');
                }
                __this.map.addLayer({
                    "id": "queryDatasLayer",
                    "type": "circle",
                    "source": "queryDatas",
                    "paint": {
                        'circle-radius': {
                            'base': 2,
                            'stops': [
                                [6, 3],
                                [10, 180]
                            ]
                        },
                        'circle-color': { 
                            'property':'SMID',
                            'stops': [
                                [min,'#6879FB'],
                                [min + 1/3*range,'#68FB75'],
                                [min + 2/3*range, '#F94B18'], 
                                [max, '#F92918']
                            ]
                        },
                        'circle-opacity': 1.0,
                        "circle-stroke-width": 2,
                        "circle-stroke-color": "#007cbf",
                        "circle-stroke-opacity": 0.7
                    }
                });

                var popup = new mapboxgl.Popup({
                    anchor: 'bottom',
                    closeButton: false,
                    offset: {
                        'bottom': [0, -20],
                    }
                });
                __this.map.on('mousemove', "queryDatasLayer", function (e) {
                    popup.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(__this.map);
                    __this.map.getCanvas().style.cursor = 'pointer';

                });
                __this.map.on('mouseout', "queryDatasLayer", function () {
                    __this.map.getCanvas().style.cursor = '';
                    popup.remove();
                })
            });
        },
        clearLayer(){
            this.map.setLayoutProperty("queryDatasLayer", 'visibility', 'none');
        },
        showLayer(){
            this.map.setLayoutProperty("queryDatasLayer", 'visibility', 'visible');
        }
    }
}
</script>

<style scoped>
#map {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white
}
.ant-card {
    width: 320px;
    height: 120px;
    background-color: #e6f7ff;
    right: 5px;
    position: absolute;
    top: 5px;
}
</style>