zj-tianditu

    1.1.12 • 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图层

    待完善

    图片层(瓦片)

    待完善

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

    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属性。

    V2.0.0.211223-release

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

    Install

    npm i zj-tianditu

    DownloadsWeekly Downloads

    22

    Version

    1.1.12

    License

    MIT

    Unpacked Size

    1.55 MB

    Total Files

    26

    Last publish

    Collaborators

    • sieyoo