Zj-Tianditu 天地图

基于天地图开发的VUE组件——Жидзин（Zidjin）系列组件库。

安装

推荐使用 npm 的方式安装。

npm install zj-tianditu

引入

先添加天地图API，在/public/index.html中写入以下内容：

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

全局引入，在 main.js 中写入以下内容：

import Vue from 'vue';
import App from './App.vue';
import ZjTianditu from "zj-tianditu";

Vue.use(ZjTianditu);
new Vue({
  el: '#app',
  render: h => h(App)
});

局部引入，在 vue页面文件中写入以下内容

export default {
    components: {
        ZjTianditu: () => import('zj-tianditu'),
    },
};

基本用法

初始化中心坐标、缩放比例和背景图层，默认坐标为北京天安门。

<zj-tianditu :center="{lng: 116.391230, lat: 39.907140}" zoom="17" map-type="HYBRID"></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({})
    };
</script>

标记坐标点

<zj-tianditu :center="center" :markers="markers" ></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大图书馆 */
                lng: 116.304470,
                lat: 39.990660,
                zoom: 17, 
            },
            markers: [
                {
                    key: '北京大学',
                    list: [
                        { title: '北京大学图书馆', lng: 116.304470, lat: 39.990660, },
                    ]
                },
            ],
        })
    };
</script>

自定义标记坐标点

可根据实际场景自定义图标、尺寸、锚点偏移。

<zj-tianditu :center="center" :markers="markers" ></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大图书馆 */
                lng: 116.304470,
                lat: 39.990660,
                zoom: 17, 
            },
            markers: [
               {
                    key: '北京大学',
                    icon_url: require('./icon-local-pku.svg'),
                    icon_size: {w: 32, h: 48},
                    icon_anchor: {w: 16, h: 48},
                    node_title: 'title',
                    list: [
                        { title: '一塔湖图之北大图书馆', lng: 116.304470, lat: 39.990660, },
                    ],
                },
            ],
        })
    };
</script>

标签

<zj-tianditu :center="center" :labels="labels" ></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大图书馆 */
                lng: 116.304470,
                lat: 39.990660,
                zoom: 17, 
            },
            labels: [
               {
                    key: '北京大学',
                    list: [
                        { label: '北大图书馆', lng: 116.304470, lat: 39.990660, },
                    ],
                },
            ],
        })
    };
</script>

自定义标签

<zj-tianditu :center="center" :labels="labels" ></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大图书馆 */
                lng: 116.304470,
                lat: 39.990660,
                zoom: 17, 
            },
            labels: [
                {
                    key: '北京大学',
                    offset: {w: 0, h: 0},
                    font_color: '#FFF',
                    background_color: '#D90000',
                    opacity: 0.1, // 不起作用？
                    font_size: 13,
                    border_line: 3,
                    border_color: '#ffaa00',
                    node_label: 'label',
                    list: [
                        { label: '北京大学', lng: 116.304470, lat: 39.990660, tip: '北京市海淀区颐和园南路5号' },
                	],
                },
            ],
        })
    };
</script>

多边形

由一组或多组连续的点组成多边形。

<zj-tianditu :center="center" :polygons="polygons" ></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大图书馆 */
                lng: 116.304470,
                lat: 39.990660,
                zoom: 14, 
            },
            polygons: [
                {
                key: '北大围墙',
                weight: 5,
                list: [
                    [[116.308900,39.998540],[116.310190,39.984430],[116.299740,39.984120],[116.298370,39.992590],[116.298270,39.996190],[116.300880,39.996410],[116.302740,39.997980],[116.304860,39.998530],],
                ]
            },
            ],
        })
    };
</script>

自定义多边形

可根据实际场景自定义边线、填充、镂空等。

<zj-tianditu :center="center" :polygons="polygons" ></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大理科一号楼 */
                lng: 116.308610,
                lat: 39.988440,
                zoom: 17, 
            },
            polygons: [
                {
                    key: '理科一号教学楼',
                    color: "#E00", // 边线颜色
                    weight: 3, // 边线宽度
                    opacity: 0.8, // 边的透明度
                    fill_color: "#FFF",
                    fill_opacity: 0.5, // 填充的透明度
                    list: [
                        // 一个图形组，当有多个的时候为镂空
                        [[116.308280,39.988660],[116.308910,39.988690],[116.308950,39.988190],[116.308310,39.988170]],
                        [[116.308440,39.988510],[116.308790,39.988520],[116.308800,39.988350],[116.308460,39.988330]],
                    ]
                },
            ],
        })
    };
</script>

气泡窗口

<zj-tianditu :center="center" :bubbles="bubbles" >
    <template v-slot:bubble="slotProps" >{{slotProps.data.title}}</template>
</zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大图书馆 */
                lng: 116.304470,
                lat: 39.990660,
                zoom: 17, 
            },
            bubbles: [
                {
                    key: '气泡弹窗',
                    size: {w: 100, h: 50},
                    offset: {w: 0, h: -50},
                    list: [
                        { title: '北大图书馆', lng: 116.304470, lat: 39.990660, show: true, },
                    ],
                },
            ],
        })
    };
</script>

热力图

<zj-tianditu :center="center" :heat-map="heatMap" map-type="HYBRID" ></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大图书馆 */
                lng: 116.304470,
                lat: 39.990660,
                zoom: 16, 
            },
            heatMap: {
                radius: 50,
                max: 300,
                node_name: 'name',
                node_count: 'count',
                list: [
                    { name: '五四体育场', lng: 116.307140, lat: 39.986340, count: 150, },
                    { name: '理科第二教学楼', lng: 116.307520, lat: 39.988240, count: 250, },
                    { name: '斯诺墓前', lng: 116.304300, lat: 39.992740, count: 150, },
                    { name: '未名石', lng: 116.302600, lat: 39.992850, count: 300, },
                    { name: '红四楼', lng: 116.303070, lat: 39.994090, count: 150, },
                    { name: '北岸', lng: 116.303840, lat: 39.994260, count: 30, },
                    { name: '连岛桥', lng: 116.303060, lat: 39.993310, count: 50, },
                    { name: '岛中亭', lng: 116.303570, lat: 39.993370, count: 50, },
                    { name: '岛北侧', lng: 116.303510, lat: 39.993750, count: 50, },
                    { name: '岛南侧', lng: 116.303540, lat: 39.993100, count: 50, },
                    { name: '燕南园', lng: 116.302680, lat: 39.988500, count: 1000, },
                    { name: '红三楼研究生院', lng: 116.302250, lat: 39.994130, count: 200, },
                ]
            },
        })
    };
</script>

聚合图

待完善

WMS图层

待完善

图片层（瓦片）

待完善

轨迹图

由一组或多组连续的点组成多边形。

<zj-tianditu :center="center" :tracks="tracks" track-status="play" ></zj-tianditu>

<script>
    export default {
        components: {
            ZjTianditu: () => import('zj-tianditu'),
        },
        data: ()=>({
            center: {
                /* 中心点为北大图书馆 */
                lng: 116.304470,
                lat: 39.990660,
                zoom: 14, 
            },
            tracks: [
                {
                    key: '北大围墙',
                    list:[
                        {lng: 116.308900, lat: 39.998540},
                        {lng: 116.310190, lat: 39.984430},
                        {lng: 116.299740, lat: 39.984120},
                        {lng: 116.298370, lat: 39.992590},
                        {lng: 116.298270, lat: 39.996190},
                        {lng: 116.300880, lat: 39.996410},
                        {lng: 116.302740, lat: 39.997980},
                        {lng: 116.304860, lat: 39.998530},
                    ],
                }
            ],
        })
    };
</script>

Tianditu Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------------------------- | ------------ | ------------- | ------------------------------------------------------------ | ------- | | center | 中心坐标 | object | - | - | | zoom | 缩放 | number | 1-18 | - | | map-type | 地图类型 | string | NORMAL 地图,SATELLITE 卫星,HYBRID 卫星混合,TERRAIN 地形TERRAIN_HYBRID 地形混合 | - | | bubbles | 气泡窗 | array | - | - | | markers | 坐标点 | array | - | - | | labels | 标签 | array | - | - | | polygons | 多边形 | array | - | - | | heat-map | 热图 | object | - | - | | clusterer | 聚合点 | object | - | - | | wmsLayers | WMS图层 | array | - | - | | images | 图像覆盖层 | array | - | - | | tracks | 轨迹图 | array | - | - | | track-status | 轨迹状态 | string | start, pause, stop | "start" | | enable-click | 启动点击 | boolean | true, 启用click事件 | false | | (待完成)enable-context-menu | 启动右键菜单 | boolean | true, 启用右键菜单 | false |

Center Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | -------------- | ------ | ------ | ------ | | lng | 经度 Longitude | number | - | - | | lat | 纬度 Latitude | number | - | - | | zoom | 缩放，可选 | number | 1-18 | - |

Markers Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------ | ------------- | ------ | ------------------------------------------------------------ | | key | 坐标组名称，必须 | number | - | - | | icon_url | 坐标点图标 | url | - | - | | icon_size | 图标大小 | object | - | {w: 20, h: 30} | | icon_anchor | 图标以左上角为原点的锚点偏移量 | object | - | {w: 10, h: 30} | | list | 坐标数据列表 | array | - | 例：{ title: '天安门', lng: 116.40969, lat: 39.89945, } | | node_title | 自定义文字节点 | string | - | title | | node_longitude | 自定义经度节点 | string | - | lng | | node_latitude | 自定义纬度节点 | string | - | lat |

List of Markers Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | -------- | ------ | ------ | ------ | | title | 提示文字 | string | - | - | | lng | 经度 | number | - | - | | lat | 纬度 | number | - | - |

Labels Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------- | -------------------------------- | ------------- | ------ | --------------------- | | key | 标签组名称 | number | - | - | | offset | 文字偏移，相对于框左下角右偏12px | object | - | {w: 0, h: 0}, | | font_color | 文字颜色 | color | - | - | | background_color | 背景颜色 | string | - | rgba(0,0,0,0.8) | | opacity | 不透明度 | number | - | 不起作用？？？ | | font_size | 字号 | string | - | 12 | | border_line | 边线粗细 | number | - | 1 | | border_color | 边线颜色 | color | - | rgba(255,255,255,0.5) | | list | 坐标数据列表 | array | - | - | | node_label | 自定义标签节点 | string | - | label | | node_tip | 自定义提示节点 | string | - | tip | | node_longitude | 自定义经度节点 | string | - | lng | | node_latitude | 自定义纬度节点 | string | - | lat |

List of Labels Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | -------- | ------ | ------ | ------ | | label | 标签文字 | string | - | - | | lng | 经度 | number | - | - | | lat | 纬度 | number | - | - | | tip | 提示文字 | string | - | - |

Polygons Attribues

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | -------------------- | --------------------- | ------ | ------ | | key | 多边形名称 | string | - | - | | color | 边线颜色 | color | - | #FFF | | weight | 边线宽度 | number | - | 1 | | opacity | 边的透明度 | number | 0-1.0 | 1 | | fill_color | 填充的颜色 | color | - | none | | fill_opacity | 填充的透明度 | number | 0-1.0 | 0 | | list | 连续的多边形二维列表 | array<array<lng,lat>> | - | - |

List Code of Polygons Attribues

list: [
    // 一个图形组，当有多组的时候为镂空
    [[116.308280,39.988660],[116.308910,39.988690],[116.308950,39.988190],[116.308310,39.988170]],
    [[116.308440,39.988510],[116.308790,39.988520],[116.308800,39.988350],[116.308460,39.988330]],
]

Bubbles Attribues

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------------------------------------------ | ------------- | ----------- | ---------------- | | key | 气泡窗名称 | string | - | - | | size | 气泡窗尺寸 | object | - | {w: 180, h: 180} | | offset | 气泡窗左上角偏离 | object | - | {w: 0, h: 0} | | style | 窗口样式 | string | dark/bright | bright | | slot | 自定义具名槽名称。数据将被包在data对象中。 | string | - | bubble | | list | 气泡窗列表 | array | - | - |

[^slot]: 气泡窗口为槽函数，因此，需要天地图组件内声明槽模板，例：<template v-bubble="slotProps"><p>slotProps.data.x</p></template>。 [^slot]: 气泡窗口默认样式名：class="bubble-area bubble"，自定义样式则为class="bubble-area slotName", id为id="bubble_i_j"，可通过此方法对样式进行覆盖CSS或定位标签。

List of Bubbles Attribues

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---------- | ------- | ------ | ------ | | lng | 经度 | | | | | lat | 纬度 | | | | | show | 显示气泡窗 | boolean | true | false |

Heat-Map Attribues

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | -------------------- | ------------- | ------ | ------ | | radius | 热点半径 | number | - | 100 | | max | 最大值，最大值为红色 | number | - | 300 | | node_count | 自定义数量节点 | string | - | count | | list | 热点图列表 | array | - | - |

List of Heat-Map Attribues

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | ---- | ------ | ------ | ------ | | lng | 经度 | number | - | - | | lat | 纬度 | number | - | - | | count | 数量 | number | - | - |

Clusterer Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------ | ------------- | ------ | ------------------------------------------------------------ | | icon_url | 坐标点图标 | url | - | - | | icon_size | 图标大小 | object | - | {w: 20, h: 30} | | icon_anchor | 图标以左上角为原点的锚点偏移量 | object | - | {w: 10, h: 30} | | list | 坐标数据列表 | array | - | 例：{ title: '天安门', lng: 116.40969, lat: 39.89945, } | | node_title | 自定义文字节点 | string | - | title | | node_longitude | 自定义经度节点 | string | - | lng | | node_latitude | 自定义纬度节点 | string | - | lat |

List of Clusterer Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | -------- | ------ | ------ | ------ | | title | 提示文字 | string | - | - | | lng | 经度 | number | - | - | | lat | 纬度 | number | - | - |

Wms-Layers Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | --------------------------------- | ------- | ----------- | ------------- | | key | 坐标点图标，必须 | string | - | - | | url | 图层服务地址 | url | - | - | | version | 请求服务的版本 | string | - | "1.1.1" | | layers | 用","分隔的多个图层列表。 | string | - | "0,1,2,3" | | transparent | 输出图像背景是否透明 | boolean | true | false | | styles | 每个请求图层的用","分隔的描述样式 | string | - | - | | srs | 地图投影类型 | string | "EPSG:4326" | "EPSG:900913" | | format | 输出图像的类型 | string | "image/png" | "image/jpeg" | | | | | | |

Images Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------- | -------------- | ------------- | ------- | ------ | | key | 图像组名称 | string | - | - | | list | 图像覆盖物列表 | array | - | - | | opacity | 透明度 | number | 0.0~1.0 | 1.0 | | alt | 图像标签 | string | - | - |

List of Images Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | -------------------------- | ------ | --------- | ------ | | url | 图片的地址 | string | - | - | | sw | 矩形区域的西南角 | object | {lng,lat} | - | | ne | 矩形区域的东北角 | object | {lng,lat} | - | | alt | 图像标签（优先级高于父级） | string | - | - |

Tracks Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | -------------------------------- | ------------- | ------- | --------- | | key | 图像组名称 | string | - | - | | list | 图像覆盖物列表 | array | - | - | | interval | 间隔时间 | number | - | 5 | | speed | 速度 | number | - | 10 | | dynamicLine | 是否动态画线 | boolean | false | true | | color | 轨迹线颜色 | string | - | "#2C64A7" | | weight | 轨迹线宽度 | number | - | 5 | | opacity | 透明度 | number | 0.0~1.0 | 0.9 | | autoPlay | 已弃用。是否自动播放，默认为自动 | boolean | false | true |

Tianditu Events

| 事件名称 | 说明 | 回调参数 | | -------- | ------------------------------------ | ---------------------------------------------------- | | marker | 当点击坐标时触发 | key: 组键名, config: 组配置, 各字段属性, | | label | 当点击标签时触发 | key: 组键名, config: 组配置, 各字段信息 | | polygen | 当点击多边形时触发 | key: 组键名, config: 组配置, 各字段信息 | | click | 点击地图时触发，需enable-click为true | {containerPoint, layerPoint, lng, lat} | | move | 拖动地图时触发 | {lng, lat} | | zoom | 缩放地图时触发 | 1-18 | | resize | 窗口尺寸变化时触发 | 天地图原生event |

Tianditu Methods

| 方法名 | 说明 | 参数 | | ------------ | ------------------------------ | -------------- | | resize | 通知地图其容器大小已更改 | - | | autoViewport | 根据坐标点数组自动设置地图视野 | array<lng,lat> | | | | |

版本说明

V1.0.61.211028-release

修正若干地图调用时不稳定的问题，早期稳定版，用于基本的地图数据展示，无鼠标交互事件等。已停止更新。

V1.1.0.211028-alpha

添加天地图原生坐标标记事件@marker、多边形事件@polygen、标签事件@label。

V1.1.1.211029-beta

支持天地图原生拖动事件@move、缩放事件@zoom。

V1.1.3.2.211031-release

修正天地图事件部分不良的问题，修正数据导入时未检查list数组不合法的问题。

V1.1.4.211108-beta

支持天地图原生的数据聚合功能。

V1.1.6.211120-beta

支持天地图WMS图层功能，支持地图点击事件@click。

V1.1.7.211121-release

修正天地图WMS图层key重复时没有删除原图层的问题。

V1.1.12.220113-release

修正天地图地图markers的node_latitude属性失效的问题，并增加控制台警告提示，增加labels的node_longitude属性和node_latitude属性。

V1.1.13.20220629-release

支持天地图原生的轨迹图功能。

V2.0.0.211223-release

支持Vue3的版本，已暂停更新