108 lines
3.4 KiB
Vue
108 lines
3.4 KiB
Vue
<template>
|
|
<div class="w-full" style="height:100%;">
|
|
|
|
<MapboxMaps
|
|
:layers="layers"
|
|
:location="location"
|
|
@handlerDrawComplete="handlerDrawComplete"
|
|
ref="MapboxComponent"
|
|
/>
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
|
|
|
|
import MapboxMaps from '@/components/MapboxMaps/MapboxMap.vue';
|
|
// import MapboxMaps from '@/components/MapboxMaps/MapComponent.vue';
|
|
import {ref,reactive} from 'vue';
|
|
import { DrawingType } from '@/enums/mapEnum';
|
|
|
|
|
|
const mapOptions = {
|
|
center: [118.556717,35.80391],
|
|
zoom: 8,
|
|
};
|
|
|
|
// 展示的图层列表
|
|
const layers = reactive([])
|
|
|
|
// 图层定位数据
|
|
const location = reactive([118.556717,35.80391])
|
|
|
|
// 图层绘制类型
|
|
const type = ref('add')
|
|
|
|
// 图斑数据
|
|
// const feature ="LINESTRING (118.55483239594203 35.81329409678203, 118.54889167836416 35.806406839795216, 118.55647247134772 35.80285975465173, 118.56157492816281 35.803303140294986)"
|
|
|
|
// const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))"
|
|
|
|
let drawFeatures = [
|
|
{
|
|
"columnName": "mapgeom",
|
|
"value": "MULTIPOLYGON (((118.55901684631719 35.8045110934671, 118.55946931550466 35.80449259041045, 118.55946551324392 35.80463444717644, 118.559024450841 35.80464061486234, 118.55901684631719 35.8045110934671)))"
|
|
}, {
|
|
"columnName": "mapgeom",
|
|
"value": "POLYGON ((118.5591119028685 35.804344565958516, 118.5594579087177 35.804344565958516, 118.55945410645693 35.80424279914757, 118.55910049608158 35.80423663146167, 118.5591119028685 35.804344565958516))"
|
|
}, {
|
|
"columnName": "mapgeom",
|
|
"value": "POLYGON ((118.55922520818172 35.8049069756666, 118.5594647506927 35.80490080800186, 118.55945714616884 35.80477128705068, 118.55921380139475 35.804783622380114, 118.55922520818172 35.8049069756666))"
|
|
}
|
|
];
|
|
|
|
// 绘图完成返回geom
|
|
const handlerDrawComplete = (geom)=>{
|
|
console.log("绘制完成返回的图斑",geom);
|
|
}
|
|
|
|
// 地图组件
|
|
const MapboxComponent = ref()
|
|
|
|
// 添加 或者 编辑图斑
|
|
// setTimeout(function(){
|
|
// // 添加图斑
|
|
// // MapboxComponent.value.handlerDraw()
|
|
// // 编辑图斑
|
|
// MapboxComponent.value.handlerDraw(drawFeatures)
|
|
// },3000)
|
|
|
|
|
|
|
|
|
|
// setTimeout(function(){
|
|
// // MapboxComponent.value.handlerDraw()
|
|
// },6000)
|
|
|
|
// 图斑定位
|
|
// setTimeout(function(){
|
|
// MapboxComponent.value.handlerLocation([118.556717,35.80391]);
|
|
// },6000)
|
|
|
|
|
|
|
|
|
|
|
|
const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
|
|
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>
|