33 lines
1022 B
Vue
33 lines
1022 B
Vue
<template>
|
|
<div class="w-full" style="height: 100%">
|
|
<MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad" @map-draw="handlerMapDraw" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import MapboxMaps from '@/components/MapboxMaps/index.vue';
|
|
|
|
const mapOptions = {
|
|
center: [116.404, 39.905],
|
|
zoom: 8,
|
|
};
|
|
const mapOnLoad = (map) => {
|
|
// map 对象
|
|
console.log('map::: ', map);
|
|
// mapU封装对象
|
|
console.log('map.U::: ', map.U);
|
|
// 测试地址
|
|
const testSource =
|
|
'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
|
|
// 添加矢量瓦片图层
|
|
map.U.addVector('sourceId', testSource).addLineLayer('layerId', {
|
|
source: 'sourceId',
|
|
'source-layer': 'lindi', // source-layer对应数据库的表名
|
|
});
|
|
};
|
|
//地图绘制的回调
|
|
const handlerMapDraw = (type: string, data: any) => {
|
|
console.log('data::: ', data);
|
|
console.log('type::: ', type);
|
|
};
|
|
</script>
|