❤
npm
Sign UpSign In

zj-tianditu

1.1.14 • Public • Published

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 - -

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的版本，已暂停更新

Readme

Keywords

Package Sidebar

Install

npm i zj-tianditu

Weekly Downloads

3

Version

1.1.14

License

MIT

Unpacked Size

2.04 MB

Total Files

28

Last publish

Collaborators

  • sieyoo
  • wangjingxia
  • zhangxiaotiao
Try on RunKit
Report malware