地图瓦片发布

<template>
<div class="container" id="map"></div>
</template>

<script>
export default {
    data() {
        return {
            map: null
        }
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {

            var baseLayer = new maptalks.MapboxglLayer('tile', {
                glOptions: {
                    style: {
                        "sources": {
                            "jiulong_l": {
                                "tiles": ["http://127.0.0.1:8433/tiles/jiulong_l/{z}/{x}/{y}"],
                                "type": "vector"
                            },
                            "jiulong_a": {
                                "tiles": ["http://127.0.0.1:8433/tiles/jiulong_a/{z}/{x}/{y}"],
                                "type": "vector"
                            }
                        },
                        "layers": [ {
                            "id": "dt_adjust_adjust",
                            "source": "jiulong_l",
                            "source-layer": "dt_adjust_adjust",
                            "type": "fill"
                        }],
                        "glyphs": "http://127.0.0.1:8433/fonts/{fontstack}/{range}.pbf",
                        "version": 8
                    }
                }
            });

            var map = new maptalks.Map("map", {
                center: [113.829346,36.182224],
                zoom: 14,
                minZoom: 1,
                maxZoom: 18,
                attribution: false,
                baseLayer: baseLayer
            });         
        }
    }
}
</script>

 

1.cad地图通过超图软件平移转换到真实地理坐标系，并生成GeoJson文件

2.通过tippecanoe转换GeoJson为mbtiles瓦片数据库

3.通过mapserver发布图层数据MapTileServer

注：

// Flip Y coordinate because MBTiles files are TMS.
y = (1 << zoom) - 1 - y;