ltvis-map

Appearance

产品中心
地面分析 · 产品能力createFieldSheet

平均温度、降水、冰雹概率、相对湿度、风速、海平面气压、露点、最高气温、最低气温、3小时变压、24小时变压、24小时变温和自行绘制都能在当前地图上出带轴线的图件。从 地面分析 各产品的「能力」进入。只对地面分析图层。对照着图看：图件出图。

库管图幅（边距、轴线、是否露底图、背景色）、操作块和容器。容器里放什么由调用侧决定。图层色标跟 getLegend()，图例容器不配 pieces 时用同一套。行政区划、切要素、填色条只在示例里画，不要写进 createFieldSheet。

图层必须已经 addTo(map)。open 整份写入本次配置，不要和上次合并。setOption 才是补丁合并。裁剪场范围和拖框是两套，可同时开。

调用 ​

ts
import { parse } from '@dingnl/ltvis-map/parse'
import { createFieldLayer, createFieldSheet, fieldSheetCaptionOf } from '@dingnl/ltvis-map/layer'

const parsed = await parse(buffer, {
    format: 'micaps4',
    // 一次只出这一列
    product: 'pre'
})
const layer = createFieldLayer({
    // 解析出口
    data: parsed.values,
    // 画哪一列，与 parse 相同
    product: 'pre',
    // 等值面填色
    fill: 'isobands'
})
layer.addTo(map)

const sheet = createFieldSheet(layer)
const caption = fieldSheetCaptionOf('pre')
sheet.open({
    // 露出底图瓦片
    map: true,
    // 出图纸色。边距、藏底图和下载共用
    background: '#fff',
    layout: {
        // 相对地图容器的四边距，像素
        left: 52,
        top: 52,
        right: 52,
        bottom: 52,
        // 图幅变了，内部容器保持像素
        inner: 'fixed'
    },
    handle: {
        // 图幅锚点和容器缩放块共用
        shape: 'square',
        stroke: true,
        weight: 1,
        color: '#000',
        size: 10
    },
    graticule: {
        // 轴线和刻度
        show: true,
        color: '#000',
        weight: 1,
        labels: true,
        labelColor: '#000',
        fontSize: 14,
        // 内网格。不传或 false 则关
        grid: { show: true, line: 'solid', color: '#000', weight: 1 }
    },
    items: [
        {
            id: 'sheet-title',
            type: 'text',
            // 相对轴线框 0～1
            x: 0.15,
            y: 0.02,
            width: 0.7,
            height: 0.08,
            // 产品中文名
            text: caption.name,
            fontSize: 18,
            fontWeight: 600,
            align: 'center',
            valign: 'middle'
        },
        {
            id: 'sheet-legend',
            type: 'legend',
            x: 0.04,
            y: 0.72,
            // 不写 pieces 则跟图层色档
            title: caption.name,
            unit: caption.unit
        }
    ]
})

sheet.onChange(option => {
    // 拖框或改容器后回写面板
})
sheet.onSelect(id => {
    // 当前在编的容器 id。点空白是 null
})

const blob = await sheet.download()
sheet.close()

fieldSheetCaptionOf(product) 给出内置产品的中文名和单位。自行绘制列回退成 product 字面量，单位空串。

建好之后也可以补丁改、选中、只拿 Blob：

ts
// 只改纸色和内网格。其余保持 open 时写入的值
sheet.setOption({
    background: '#f7f7f7',
    graticule: {
        grid: { show: true, line: 'dashed' }
    }
})
// 选中标题，开始编辑
sheet.select('sheet-title')
// 合成 PNG，不触发浏览器下载
const blob = await sheet.download({ save: false })

打开后可拖轴线框改四边距。容器同时只编一项：双击开始编辑，右键打开菜单（开始编辑／结束编辑／删除），点其余位置结束。锚点移入后出跟随指针的操作指引。按钮由调用侧自己画。

会话方法 ​

方法说明
open(option?)整份写入并叠轴线和容器。不传则只有默认轴线。返回会话本身
setOption(option)补丁合并。layout / handle / graticule 按字段合并；items 整表替换。已打开则重画
getOption()拷贝当前配置。含拖过后的 layout 和每个容器的 0～1 盒子
isOpen()是否挂着装饰
select(id)选中容器开始编辑。传 null 结束
getSelected()当前在编的容器 id。没有则 null
onSelect(handler)选中变化时通知。传 null 取消
onChange(handler)拖框、改容器后通知，参数是最新配置。拖动中按动画帧合并，松手立刻回写。传 null 取消
onClose(handler)close() 之后通知。传 null 取消
download({ loadTile?, save? })合成 PNG 并返回 Blob。save !== false 会触发浏览器下载
close()拆装饰。会话对象还在，可再 open

图层卸下会拆装饰。close 之后会话仍可用。

参数 ​

open / setOption 认这一套。全是可选。色值认 #000 / rgb() / rgba()，透明写 rgba(0, 0, 0, 0)。

字段说明默认
map是否露出底图瓦片。false 只藏瓦片，场和装饰还在开
background出图纸色。边距、藏底图和下载共用#fff
layout图幅四边距和内部容器怎么跟见下节
handle操作块。图幅锚点和容器缩放块共用见下节
graticule轴线。写 false 关刻度，轴线框仍画；写对象配刻度、标注、内网格刻度、标注开；内网格关
items框内容器。type 为 text / image / legend空，只有轴线
filename下载文件名。不写则 产品-时次.png，没有时次则只有产品产品 + 时次

图幅 ​

layout 相对地图容器的四边距，单位像素。拖轴线框改这四个数。四边最小 8，图幅不够时按比例收。

字段说明默认
left左边距52
top上边距52
right右边距52
bottom下边距52
inner图幅尺寸变了，内部容器是固定像素（fixed）还是按 0～1 跟随（follow）fixed
ts
sheet.setOption({
    layout: {
        left: 64,
        top: 64,
        right: 64,
        bottom: 64,
        // 拖大图幅时标题和图例跟着走
        inner: 'follow'
    }
})

操作块 ​

图幅四边、四角的锚点和容器缩放块共用 handle。编辑用，不进下载。

字段说明默认
shapesquare / circlesquare
stroke是否画边框开
weight边框粗细，像素1
color边框颜色#000
size边长，像素10
background底色rgba(0, 0, 0, 0)
ts
sheet.setOption({
    handle: {
        shape: 'circle',
        stroke: true,
        weight: 1,
        color: '#000',
        size: 12,
        background: 'rgba(255, 255, 255, 0.8)'
    }
})

轴线 ​

graticule 写 false 关刻度，轴线框仍画。写对象配下面字段。不传 step 时按视野跨度取整齐步长，可低于 1°。

字段说明默认
show刻度是否显示。轴线框仍画开
step度。可写一个数，或 [经向, 纬向]。不传随缩放随缩放
color轴线和刻度颜色#000
weight轴线和刻度宽度，像素1
labels是否画经纬度标注开
labelColor标注颜色#000
fontFamily标注字体sans-serif
fontSize标注字号，像素14
grid轴线内部网格。不传或 false 关；对象见下节关
ts
sheet.setOption({
    graticule: {
        show: true,
        // 经向 1°、纬向 0.5°
        step: [1, 0.5],
        color: '#000',
        weight: 1,
        labels: true,
        labelColor: '#000',
        fontFamily: 'sans-serif',
        fontSize: 14
    }
})

内网格 ​

graticule.grid 不传或 false 关。写对象：

字段说明默认
show是否画开
linesolid 实线 / dashed 虚线 / dotted 点线solid
color线色#000
weight线宽，像素1
ts
sheet.setOption({
    graticule: {
        grid: {
            show: true,
            line: 'dashed',
            color: '#000',
            weight: 1
        }
    }
})

容器 ​

items 可任意多个。位置和宽高相对轴线框 0～1。不写 id 时库会补 item-1 起的编号，拖移、选中、删除认这个 id。建议自己写。

三种 type 共用盒子和外观：

字段说明默认
id选中、拖移、删除用的编号item-1 起
typetext / image / legend—
x / y左上角，相对轴线框 0～10
width / height宽高，相对轴线框 0～1图例不写则包住内容；其余看类型
locktrue 锁移动和缩放；或 { move, resize } 分开锁都不锁
shaperect / circle。图例只认矩形rect
radius矩形圆角，像素。圆形不看0
border是否画容器边框。不要写成文字的 stroke关
borderColor容器边框颜色#000
borderWeight容器边框粗细，像素1
background容器背景。字符串当纯色；对象写渐变或图。见下节文字／图片透明；图例 rgba(255, 255, 255, 0.5)
el / mount有则库不画默认内容，只给盒子。普通 HTML 不进下载不挂

setOption({ items }) 整表替换，不会和上次的容器按 id 合并。

容器背景 ​

background 字符串当纯色。对象：

字段说明默认
typecolor / gradient / imagecolor
color纯色—
from / to渐变两端—
angle渐变角度，度。0 向上、90 向右180
src背景图地址—
fit背景图 cover 铺满 / contain 完整cover
ts
background: {
    type: 'gradient',
    from: '#fff',
    to: '#e8e8e8',
    // 0 向上，90 向右
    angle: 180
}

文字 ​

type: 'text'。文字样式与图例档位、标题、单位共用同一套字段。

字段说明默认
text文案空
color字色#000
fontSize像素14
fontWeightCSS 字重400
fontFamily不传走浏览器默认字体—
stroke是否画文字边框关
strokeColor文字边框颜色#000
strokeWeight文字边框粗细，像素1
alignleft / center / right，或 0～1center
valigntop / middle / bottom，或 0～1middle
ts
{
    id: 'sheet-title',
    type: 'text',
    x: 0.15,
    y: 0.02,
    width: 0.7,
    height: 0.08,
    text: '降水',
    fontSize: 18,
    fontWeight: 600,
    align: 'center',
    valign: 'middle'
}

图片 ​

type: 'image'。

字段说明默认
src图片地址—
fitratio 原比例 / fill 填充容器 / custom 自定义像素fill
fitWidthcustom 时的宽，像素—
fitHeightcustom 时的高，像素—
opacity0～11
alignleft / center / right，或 0～1center
valigntop / middle / bottom，或 0～1middle
ts
{
    id: 'sheet-logo',
    type: 'image',
    x: 0.82,
    y: 0.02,
    width: 0.14,
    height: 0.1,
    src: '/logo.png',
    // 保持原比例
    fit: 'ratio',
    opacity: 1,
    align: 'center',
    valign: 'middle'
}

图例 ​

type: 'legend'。只认矩形，可写 radius，不要写 circle。不写宽高时盒子刚好包住内容；缩放不能小于内容。不写 pieces 则跟图层 getLegend()。

字段说明默认
kindblocks 色块 / ramp 渐变色条blocks
orientvertical / horizontalvertical
title标题。字符串只写文案；对象可单独配字体和对齐。不写跟产品中文名；空串不画产品中文名
unit单位。写法同 title。不写跟产品单位；空串不画产品单位
titleFlowrow 同行 / stack 换行stack
titleSide标题整块在色块／色条的 top / bottomtop
blockWidth色块或色条宽，像素。色块默认 30；竖向色条默认 10见左
blockHeight色块或色条高，像素。色块默认 10；横向色条默认 10见左
blockGap色块间距，像素。色条不用8
blockBorder色块／色条边框关
blockBorderColor边框颜色#999
blockBorderWeight边框粗细，像素1
labels是否画档位文字开
labelSide文字相对色块／色条。竖向 left / right（默认右）；横向 top / bottom（默认下）竖向右、横向下
pieces{ value, color, label, src }[]。src 只给色块；渐变色条只认 color图层色档

档位文字字段与文字容器相同：color / fontSize（默认 12）/ fontWeight / fontFamily / stroke / strokeColor / strokeWeight / align / valign。竖向默认左对齐，横向默认居中。

title / unit 写成对象时，可单独配 text 和同一套文字字段。标题默认字号 14，单位默认字号 12。

ts
{
    id: 'sheet-legend',
    type: 'legend',
    x: 0.04,
    y: 0.72,
    kind: 'blocks',
    orient: 'vertical',
    title: '降水',
    unit: 'mm',
    titleFlow: 'stack',
    titleSide: 'top',
    labels: true,
    labelSide: 'right'
}

切成渐变色条、横向，并自定档位：

ts
sheet.setOption({
    items: [
        {
            id: 'sheet-legend',
            type: 'legend',
            x: 0.2,
            y: 0.88,
            width: 0.6,
            kind: 'ramp',
            orient: 'horizontal',
            title: '降水',
            unit: 'mm',
            pieces: [
                { value: 0.1, color: 'rgb(180, 220, 255)', label: '0.1~10' },
                { value: 10, color: 'rgb(40, 120, 200)', label: '10~25' },
                { value: 25, color: 'rgb(10, 40, 120)', label: '≥25' }
            ]
        }
    ]
})

编辑 ​

容器同时只编一项。双击开始编辑，右键打开菜单，点其余位置结束。菜单挂在容器上，不走底图右键。编辑态另有标识底，略大于容器，结束编辑即消失，不进下载。

ts
sheet.onSelect(id => {
    // 跟面板高亮对上
})
sheet.select('sheet-legend')
sheet.getSelected()
// 结束编辑
sheet.select(null)

单项可锁：

ts
{
    id: 'sheet-title',
    type: 'text',
    text: '降水',
    // 能改大小，不能拖走
    lock: { move: true, resize: false }
}

下载 ​

download() 按轴线框四边同等留白合成 PNG 并返回 Blob。留白取当前四边距的最大，缺的一边用纸色补。分辨率跟当前屏幕像素比走。合成顺序是底图、场、叠层、装饰、容器扩展。

字段说明默认
save是否触发浏览器下载。false 只拿 Blob开
loadTile(src) => Image | Canvas | Promise<…>。跨域瓦片换成同源图—
ts
// 触发浏览器下载，文件名看 option.filename
await sheet.download()

// 只拿 Blob，交给自己的上传或预览
const blob = await sheet.download({ save: false })

// 高德等不带 CORS 头的瓦片，先换成同源再画
await sheet.download({
    loadTile: src => fetchProxyImage(src)
})

底图瓦片要进 PNG，必须能被画布读。自有图源给 L.tileLayer 写 crossOrigin: true，且响应带 Access-Control-Allow-Origin。读不到的瓦片跳过，场和装饰仍导出。未 open 时调用也会临时叠再拆，仍返回 Blob。

下载前会等可见瓦片收齐（最多约 2 秒），再等两帧让场和装饰画完。按钮由调用侧自己画。