<!--
 * @Author: jiangbotao
 * @Date: 2019-12-10 14:16:04
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-12 18:25:00
 * @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 } 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/data-world/rest/data";

        var map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": 'attribution',
                        "type": "raster",
                        "tiles": [host + '/iserver/services/maps/rest/maps/World/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: [0, 0],
            maxZoom: 18,
            zoom: 2
        });
        map.addControl(new Logo(), 'bottom-right');
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        map.on('load', function () {
            var queryBufferGeometry = {
                "type": "Polygon",
                "coordinates": [[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]
            };
            map.addLayer({
                "id": "queryPolygon",
                "type": "fill",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "Feature",
                        "geometry": queryBufferGeometry
                    }
                },
                "paint": {
                    "fill-color": "rgba(0, 0, 255, 0.1)",
                    'fill-outline-color': "red",
                },
            });
            query(queryBufferGeometry);
        });

        function query(queryBufferGeometry) {
            var bufferParam = new SuperMap.GetFeaturesByBufferParameters({
                datasetNames: ["World:Capitals"],
                bufferDistance: 30,     // 30度
                geometry: queryBufferGeometry
            });
            new mapboxgl.Popup().setText(' = 30').setLngLat([0, 0]).addTo(map);
            new FeatureService(dataUrl).getFeaturesByBuffer(bufferParam, function (serviceResult) {
                map.addSource("queryDatas", {
                    "type": "geojson",
                    "data": serviceResult.result.features
                });
                map.addLayer({
                    "id": "queryDatas",
                    "type": "circle",
                    "source": "queryDatas",
                    "paint": {
                        "circle-radius": 6, /* 圆的直径，单位像素 */
                        "circle-color": "blue", /* 圆的颜色 */
                        "circle-opacity": 0.5  /* 圆的颜色 */
                    },
                });
            });
        }
    }
}
</script>

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