成果展示-矢量图层-添加文本层
parent
f0fbd21d6e
commit
4692ffd3b7
|
|
@ -247,4 +247,170 @@ export const defaultPaint = {
|
|||
'#7a0403',
|
||||
],
|
||||
'fill-outline-color': '#232323',
|
||||
};
|
||||
};
|
||||
|
||||
export const defaultPaint2 = {
|
||||
'fill-opacity': 0.1,
|
||||
'fill-color': '#ffffff',
|
||||
'fill-outline-color': '#ffff30',
|
||||
};
|
||||
|
||||
export const geoserverCodeValue = [
|
||||
{
|
||||
code: '0307',
|
||||
value: '其他林地',
|
||||
},
|
||||
{
|
||||
code: '0602',
|
||||
value: '采矿用地',
|
||||
},
|
||||
{
|
||||
code: '08H1',
|
||||
value: '机关团体新闻出版用地',
|
||||
},
|
||||
{
|
||||
code: '1109',
|
||||
value: '水工建筑用地',
|
||||
},
|
||||
{
|
||||
code: '0701',
|
||||
value: '城镇住宅用地',
|
||||
},
|
||||
{
|
||||
code: '1104',
|
||||
value: '坑塘水面',
|
||||
},
|
||||
{
|
||||
code: '1103',
|
||||
value: '水库水面',
|
||||
},
|
||||
{
|
||||
code: '1104A',
|
||||
value: '养殖坑塘',
|
||||
},
|
||||
{
|
||||
code: '1107A',
|
||||
value: '干渠',
|
||||
},
|
||||
{
|
||||
code: '0102',
|
||||
value: '水浇地',
|
||||
},
|
||||
{
|
||||
code: '1107',
|
||||
value: '沟渠',
|
||||
},
|
||||
{
|
||||
code: '0201',
|
||||
value: '果园',
|
||||
},
|
||||
{
|
||||
code: '1003',
|
||||
value: '公路用地',
|
||||
},
|
||||
{
|
||||
code: '08H2',
|
||||
value: '科教文卫用地',
|
||||
},
|
||||
{
|
||||
code: '1101',
|
||||
value: '河流水面',
|
||||
},
|
||||
{
|
||||
code: '1004',
|
||||
value: '城镇村道路用地',
|
||||
},
|
||||
{
|
||||
code: '09',
|
||||
value: '特殊用地',
|
||||
},
|
||||
{
|
||||
code: '0809',
|
||||
value: '公用设施用地',
|
||||
},
|
||||
{
|
||||
code: '0702',
|
||||
value: '农村宅基地',
|
||||
},
|
||||
{
|
||||
code: '1202',
|
||||
value: '设施农用地',
|
||||
},
|
||||
{
|
||||
code: '1006',
|
||||
value: '农村道路',
|
||||
},
|
||||
{
|
||||
code: '1005',
|
||||
value: '交通服务场站用地',
|
||||
},
|
||||
{
|
||||
code: '0301',
|
||||
value: '乔木林地',
|
||||
},
|
||||
{
|
||||
code: '0404',
|
||||
value: '其他草地',
|
||||
},
|
||||
{
|
||||
code: '0305',
|
||||
value: '灌木林地',
|
||||
},
|
||||
{
|
||||
code: '1001',
|
||||
value: '铁路用地',
|
||||
},
|
||||
{
|
||||
code: '0204',
|
||||
value: '其他园地',
|
||||
},
|
||||
{
|
||||
code: '0101',
|
||||
value: '水田',
|
||||
},
|
||||
{
|
||||
code: '0103',
|
||||
value: '旱地',
|
||||
},
|
||||
{
|
||||
code: '1106',
|
||||
value: '内陆滩涂',
|
||||
},
|
||||
{
|
||||
code: '0601',
|
||||
value: '工业用地',
|
||||
},
|
||||
{
|
||||
code: '1007',
|
||||
value: '机场用地',
|
||||
},
|
||||
{
|
||||
code: '0508',
|
||||
value: '物流仓储用地',
|
||||
},
|
||||
{
|
||||
code: '0810A',
|
||||
value: '广场用地',
|
||||
},
|
||||
{
|
||||
code: '1206',
|
||||
value: '裸土地',
|
||||
},
|
||||
{
|
||||
code: '08H2A',
|
||||
value: '高教用地',
|
||||
},
|
||||
{
|
||||
code: '05H1',
|
||||
value: '商业服务业设施用地',
|
||||
},
|
||||
{
|
||||
code: '0302',
|
||||
value: '竹林地',
|
||||
},
|
||||
{
|
||||
code: '0810',
|
||||
value: '公园与绿地',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||||
import mapboxgl, { Map, Popup } from 'mapbox-gl';
|
||||
import { getGeomData } from '@/api/demo/system';
|
||||
import { MAPBOX_TOKEN, TINADITU_TOKEN, defaultPaint } from './clound.data';
|
||||
import { MAPBOX_TOKEN, TINADITU_TOKEN, defaultPaint, geoserverCodeValue } from './clound.data';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
layout: {
|
||||
'text-field': ['get', 'xzqmc'],
|
||||
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
|
||||
'text-size': 12,
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 10, 0, 10.1, 12],
|
||||
'text-anchor': 'center',
|
||||
},
|
||||
paint: {
|
||||
|
|
@ -206,6 +206,9 @@
|
|||
if (isMove) {
|
||||
handlerLocation(lngLat, zoom);
|
||||
}
|
||||
// 将映射数组转换为 match 表达式的输入
|
||||
const matchInput = geoserverCodeValue.flatMap(({ code, value }) => [code, value]);
|
||||
|
||||
chooseRows?.forEach((chooseRow) => {
|
||||
map.addSource(chooseRow.dataTable, {
|
||||
type: 'vector',
|
||||
|
|
@ -221,6 +224,7 @@
|
|||
|
||||
// console.log(chooseRow.style);
|
||||
|
||||
// 添加填充层
|
||||
map.addLayer({
|
||||
id: chooseRow.dataTable,
|
||||
type: 'fill',
|
||||
|
|
@ -228,6 +232,31 @@
|
|||
'source-layer': chooseRow.dataTable,
|
||||
paint: chooseRow.style ? JSON.parse(chooseRow.style) : defaultPaint,
|
||||
});
|
||||
|
||||
// 添加文本层
|
||||
map.addLayer({
|
||||
id: chooseRow.dataTable + '-text',
|
||||
type: 'symbol',
|
||||
source: chooseRow.dataTable,
|
||||
'source-layer': chooseRow.dataTable,
|
||||
layout: {
|
||||
'text-field': ['match', ['get', 'dlbm'], ...matchInput, ''],
|
||||
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 12, 0, 12.1, 12],
|
||||
// 'text-size': 12,
|
||||
'text-anchor': 'center',
|
||||
'symbol-placement': 'point',
|
||||
'text-allow-overlap': false,
|
||||
'text-padding': 20,
|
||||
'text-letter-spacing': 0.1,
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#ffffff', // 文本颜色
|
||||
'text-halo-color': '#000000', // 文本晕影颜色
|
||||
'text-halo-width': 1, // 文本晕影宽度
|
||||
},
|
||||
});
|
||||
map.on('click', chooseRow.dataTable, function (e) {
|
||||
// 显示弹窗
|
||||
if (e.features.length > 0) {
|
||||
|
|
@ -254,7 +283,7 @@
|
|||
chooseRows?.forEach((chooseRow, index) => {
|
||||
let tiles: any = [];
|
||||
let tile =
|
||||
'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
|
||||
'http://192.168.10.141:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
|
||||
chooseRow.layerName +
|
||||
'&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857' +
|
||||
'&format=image/png&TRANSPARENT=TRUE';
|
||||
|
|
@ -422,6 +451,9 @@
|
|||
// map.removeLayer('unclustered-point');
|
||||
// }
|
||||
}
|
||||
if (map.getLayer(layerName + '-text')) {
|
||||
map.removeLayer(layerName + '-text');
|
||||
}
|
||||
}
|
||||
// 检查数据源是否存在
|
||||
if (map.getSource(layerName)) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue