zj-tianditu v1.1.14

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 Attributes

Markers Attributes

List of Markers Attributes

Labels Attributes

List of Labels Attributes

Polygons Attribues

^list: 需要特别说明的是，一个多边形图形是由一组或多组连续的点组成的，但两组点相交时图形镂空。其中，每个点是由经度和纬度组成的数组，如116.30,39.98。那么，一个点是长度为2的数组，一组连续的点组成线段，多条线段组成一个多边形，因此，一个多边形实际上是由三维数组构成。

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

^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

Heat-Map Attribues

List of Heat-Map Attribues

Clusterer Attributes

List of Clusterer Attributes

Wms-Layers Attributes

Images Attributes

List of Images Attributes

Tracks Attributes

Tianditu Events

Tianditu Methods

版本说明

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