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

<script>
import Vue from 'vue'
import { message } from'ant-design-vue';
Vue.use(message)

import mapboxgl from 'mapbox-gl';
import { Logo, MeasureService } from '@supermap/iclient-mapboxgl';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
export default {
    name: 'HelloWorld',
    data () {
        return {
            msg: 'aaa'
        }
    },
    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',
            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: [110.143, 30.236],
            maxZoom: 18,
            zoom: 4
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        var draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                line_string: true,
                polygon: true,
                trash: true
            }
        });
        map.addControl(draw, "top-left");

        function measure(e) {
            const type = e.features[0].geometry.type;
            var param = new SuperMap.MeasureParameters(e.features[0]);
            if(type === 'LineString'){
                new MeasureService(url).measureDistance(param, function (serviceResult) {
                    var distance = serviceResult.result.distance;
                    var unit = serviceResult.result.unit;
                    message.info('当前长度: '+ distance+" "+unit);
                });
            }else{
                new MeasureService(url).measureArea(param, function (serviceResult) {
                    var area = serviceResult.result.area;
                    var unit = serviceResult.result.unit;
                    var rounded_area = Math.round(area * 100) / 100;
                    message.info('当前面积: '+ rounded_area+" 平方"+unit);
                });
            }
        }

        function removeMsg() {
        }

        map.on('draw.create', measure);
        map.on('draw.delete', removeMsg);
    }
}
</script>

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