【类 型】：factor
【原 因】：完善地图添加 编辑功能 【过 程】： 【影 响】：
This commit is contained in:
air
parent
6c30667309
commit
3f93bcdd90
@ -1214,24 +1214,24 @@ const store = new Vuex.Store({
|
||||
const host = rootState.settings.host
|
||||
const list = res.data.mapStyleList.map(style => {
|
||||
const tiles = Array.isArray(style.tiles) ? style.tiles : JSON.parse(style.tiles)
|
||||
const sourceKey = style.source_key || 'default'
|
||||
const sourceKey = 'default'
|
||||
const spriteUrl = style.sprite && String(style.sprite).trim() ? style.sprite : `${host}/Public/map/sprite`
|
||||
|
||||
return {
|
||||
// 附带原始字段，便于管理端展示和操作
|
||||
id: style.id,
|
||||
is_active: Number(style.is_active ?? 1),
|
||||
sort_order: Number(style.sort_order ?? 0),
|
||||
source_key: sourceKey,
|
||||
name: style.name,
|
||||
sprite: `${host}/Public/map/sprite`,
|
||||
sprite: spriteUrl,
|
||||
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
|
||||
version: 8,
|
||||
sources: {
|
||||
[sourceKey]: {
|
||||
type: 'raster',
|
||||
tileSize: Number(style.tileSize || 256),
|
||||
tileSize: 256,
|
||||
tiles,
|
||||
attribution: style.attribution || ''
|
||||
attribution: ''
|
||||
}
|
||||
},
|
||||
layers: [{
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
<el-form-item label="样式名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="例如：谷歌卫星瓦片" />
|
||||
</el-form-item>
|
||||
<el-form-item label="版本" prop="version">
|
||||
<!-- 版本号固定为8，不显示 -->
|
||||
<el-form-item v-show="false" label="版本" prop="version">
|
||||
<el-input-number v-model="form.version" :min="1" :max="8" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="is_active">
|
||||
@ -38,23 +39,12 @@
|
||||
</el-divider>
|
||||
</div>
|
||||
<el-form-item label="sprite 路径" prop="sprite">
|
||||
<el-input v-model="form.sprite" placeholder="可选：sprite 路径（如有）" />
|
||||
<el-input v-model="form.sprite" :placeholder="form.sprite && form.sprite.includes('/Public/map/sprite') ? '使用默认路径 /Public/map/sprite' : '可选：sprite 路径（留空则使用默认路径）'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="glyphs 路径" prop="glyphs">
|
||||
<el-input v-model="form.glyphs" placeholder="可选：glyphs 路径（如有）" />
|
||||
</el-form-item>
|
||||
<el-form-item label="source 名称" prop="source_name">
|
||||
<el-input v-model="form.source_name" placeholder="例如：google、bing" />
|
||||
</el-form-item>
|
||||
<el-form-item label="source 类型" prop="source_type">
|
||||
<el-select v-model="form.source_type" placeholder="请选择 source 类型">
|
||||
<el-option label="raster" value="raster" />
|
||||
<el-option label="vector" value="vector" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="瓦片大小" prop="tile_size">
|
||||
<el-input-number v-model="form.tile_size" :min="1" :max="1024" :step="1" />
|
||||
</el-form-item>
|
||||
<!-- 固定使用默认值，不显示 -->
|
||||
<el-form-item label="瓦片URL列表" prop="tiles">
|
||||
<el-input
|
||||
type="textarea"
|
||||
@ -63,31 +53,7 @@
|
||||
placeholder="每行一个URL，或粘贴JSON数组，例如：\nhttps://server.com/tiles/{z}/{x}/{y}.png"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据来源(署名)" prop="attribution">
|
||||
<el-input type="textarea" :rows="2" v-model="form.attribution" placeholder="可选，如：© Google" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 图层配置 -->
|
||||
<div class="p-t-10 p-b-5">
|
||||
<el-divider content-position="left">
|
||||
<font class="fb f-s-18 normalFontColor">图层配置</font>
|
||||
</el-divider>
|
||||
</div>
|
||||
<el-form-item label="图层ID" prop="layer_id">
|
||||
<el-input v-model="form.layer_id" placeholder="用于 map.addLayer 的 id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图层类型" prop="layer_type">
|
||||
<el-select v-model="form.layer_type" placeholder="请选择图层类型">
|
||||
<el-option label="raster" value="raster" />
|
||||
<el-option label="background" value="background" />
|
||||
<el-option label="fill" value="fill" />
|
||||
<el-option label="line" value="line" />
|
||||
<el-option label="symbol" value="symbol" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图层source" prop="layer_source">
|
||||
<el-input v-model="form.layer_source" placeholder="通常与 source 名称一致" />
|
||||
</el-form-item>
|
||||
<!-- 固定使用默认值，不显示 -->
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<el-form-item>
|
||||
@ -116,16 +82,9 @@ export default {
|
||||
id: null,
|
||||
name: '',
|
||||
sprite: '',
|
||||
glyphs: '',
|
||||
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
|
||||
version: 8,
|
||||
source_name: '',
|
||||
source_type: 'raster',
|
||||
tile_size: 256,
|
||||
tiles: [], // 存数组，表单用 tilesInput 辅助
|
||||
attribution: '',
|
||||
layer_id: '',
|
||||
layer_type: 'raster',
|
||||
layer_source: '',
|
||||
is_active: 1,
|
||||
sort_order: 0
|
||||
},
|
||||
@ -133,23 +92,23 @@ export default {
|
||||
pageState: 'add',
|
||||
mapStyleId: this.$route.params.id,
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入样式名称', trigger: 'blur' }],
|
||||
version: [{ type: 'number', required: true, message: '请输入版本', trigger: 'change' }],
|
||||
source_name: [{ required: true, message: '请输入 source 名称', trigger: 'blur' }],
|
||||
source_type: [{ required: true, message: '请选择 source 类型', trigger: 'change' }],
|
||||
tile_size: [{ type: 'number', required: true, message: '请输入瓦片大小', trigger: 'change' }],
|
||||
layer_id: [{ required: true, message: '请输入图层ID', trigger: 'blur' }],
|
||||
layer_type: [{ required: true, message: '请选择图层类型', trigger: 'change' }],
|
||||
layer_source: [{ required: true, message: '请输入图层source', trigger: 'blur' }]
|
||||
name: [{ required: true, message: '请输入样式名称', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
async created () {
|
||||
// 初始化页面状态与预填充
|
||||
if (this.mapStyleId != null) {
|
||||
this.pageState = 'edit'
|
||||
this.form.id = this.mapStyleId
|
||||
const item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId))
|
||||
let item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId))
|
||||
if (!item) {
|
||||
// 尝试拉取一次列表后再匹配（兼容刷新后store丢失）
|
||||
try {
|
||||
await this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host)
|
||||
item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId))
|
||||
} catch (e) {}
|
||||
}
|
||||
if (item) {
|
||||
this.fillFormFromItem(item)
|
||||
} else {
|
||||
@ -172,24 +131,23 @@ export default {
|
||||
},
|
||||
fillFormFromItem (item) {
|
||||
this.form.name = item.name || ''
|
||||
this.form.sprite = item.sprite || ''
|
||||
this.form.glyphs = item.glyphs || ''
|
||||
this.form.version = Number(item.version ?? 8)
|
||||
this.form.source_name = item.source_name || ''
|
||||
this.form.source_type = item.source_type || 'raster'
|
||||
this.form.tile_size = Number(item.tile_size ?? 256)
|
||||
// 如果包含默认路径，设置为空字符串
|
||||
this.form.sprite = (item.sprite && item.sprite.includes('/Public/map/sprite')) ? '' : (item.sprite || '')
|
||||
this.form.glyphs = item.glyphs || 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf'
|
||||
this.form.version = 8
|
||||
// tiles 兼容字符串JSON或数组
|
||||
let tiles = []
|
||||
if (Array.isArray(item.tiles)) tiles = item.tiles
|
||||
else if (typeof item.tiles === 'string') {
|
||||
try { tiles = JSON.parse(item.tiles) } catch (e) { tiles = [] }
|
||||
if (Array.isArray(item.tiles)) {
|
||||
tiles = item.tiles
|
||||
} else if (typeof item.tiles === 'string') {
|
||||
try {
|
||||
tiles = JSON.parse(item.tiles)
|
||||
} catch (e) {
|
||||
tiles = item.tiles.split('\n').filter(Boolean)
|
||||
}
|
||||
}
|
||||
this.form.tiles = tiles
|
||||
this.tilesInput = tiles.join('\n')
|
||||
this.form.attribution = item.attribution || ''
|
||||
this.form.layer_id = item.layer_id || ''
|
||||
this.form.layer_type = item.layer_type || 'raster'
|
||||
this.form.layer_source = item.layer_source || ''
|
||||
this.tilesInput = Array.isArray(tiles) ? tiles.join('\n') : tiles
|
||||
this.form.is_active = Number(item.is_active ?? 1)
|
||||
this.form.sort_order = Number(item.sort_order ?? 0)
|
||||
},
|
||||
@ -197,26 +155,56 @@ export default {
|
||||
this.$refs.formRef && this.$refs.formRef.resetFields()
|
||||
this.tilesInput = ''
|
||||
this.form.version = 8
|
||||
this.form.source_type = 'raster'
|
||||
this.form.tile_size = 256
|
||||
this.form.layer_type = 'raster'
|
||||
this.form.is_active = 1
|
||||
this.form.sort_order = 0
|
||||
},
|
||||
handleSubmit () {
|
||||
this.$refs.formRef.validate((valid) => {
|
||||
if (!valid) return
|
||||
// 准备 tiles
|
||||
const tiles = this.parseTilesInput(this.tilesInput)
|
||||
if (!tiles.length) {
|
||||
this.$message.error('请至少填写一个瓦片URL')
|
||||
return
|
||||
}
|
||||
this.form.tiles = tiles
|
||||
this.$refs.formRef.validate(valid => {
|
||||
if (valid) {
|
||||
// 处理 tiles 输入
|
||||
this.form.tiles = this.parseTilesInput(this.tilesInput)
|
||||
if (this.form.tiles.length === 0) {
|
||||
this.$message.warning('请至少输入一个瓦片URL')
|
||||
return
|
||||
}
|
||||
|
||||
// 提交占位：待接入 store actions: fetchAddMapStyle / fetchSaveMapStyle
|
||||
this.$message.success(`${this.pageState === 'add' ? '创建' : '更新'}成功（示例页，待接入后端）`)
|
||||
this.$router.replace('/mapstyle/index')
|
||||
// 准备提交的数据，只包含必要的字段
|
||||
const submitData = {
|
||||
name: this.form.name,
|
||||
// 如果sprite为空，使用默认路径
|
||||
sprite: this.form.sprite || '/Public/map/sprite',
|
||||
glyphs: this.form.glyphs,
|
||||
tiles: this.form.tiles,
|
||||
is_active: this.form.is_active,
|
||||
sort_order: this.form.sort_order
|
||||
}
|
||||
|
||||
// 如果是编辑模式，添加ID
|
||||
if (this.pageState === 'edit' && this.form.id) {
|
||||
submitData.id = this.form.id
|
||||
}
|
||||
|
||||
const loading = this.$loading({ lock: true })
|
||||
const action = this.pageState === 'add'
|
||||
? this.$store.dispatch('addMapStyle', submitData)
|
||||
: this.$store.dispatch('saveMapStyle', submitData)
|
||||
|
||||
action.then(res => {
|
||||
if (res.data.status === 1) {
|
||||
this.$message.success(res.data.msg)
|
||||
this.$router.push('/layout/mapstyle')
|
||||
} else {
|
||||
this.$message.error(res.data.msg || '操作失败')
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message || '请求出错')
|
||||
}).finally(() => {
|
||||
loading.close()
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请正确填写表单')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<el-table-column align="center" label="ID" width="60">
|
||||
<template slot-scope="scope">{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="样式名称" min-width="160">
|
||||
<el-table-column prop="name" label="样式名称" width="160" min-width="160">
|
||||
<template slot-scope="scope">{{ displayName(scope.row, scope.$index) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="style" label="样式/URL" min-width="260" show-overflow-tooltip>
|
||||
@ -98,10 +98,12 @@ export default {
|
||||
this.$message.error('只能选择一条记录')
|
||||
return
|
||||
}
|
||||
// 这里暂时用序号作为 id（样式可能没有后端 id），编辑页仅作占位
|
||||
const row = sel[0]
|
||||
const id = typeof row === 'object' && row.id != null ? row.id : this.styleList.indexOf(row)
|
||||
this.$router.push('/mapstyle/edit/' + id)
|
||||
if (!row || row.id == null) {
|
||||
this.$message.error('此样式缺少后端ID，无法编辑')
|
||||
return
|
||||
}
|
||||
this.$router.push('/mapstyle/edit/' + row.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user