@stepday/r-cmap

v2.4.3

Published

3 years ago

简单的 Canvas 地图功能

Downloads

0High
0Medium
0Low

stepday

CMap v2.4.0

使用 canvas 绘制简单的地图功能

Camp

支持缩放功能
支持地图下钻功能
支持地图历史记录功能
添加区块颜色功能
支持地图镜像功能

使用

<!-- 1. 添加显示区域 -->
<div id="my-city"></div>

<!-- 2. 使用 -->
<script type="module">
import CMap from '../src/index.js'

let options = {
    el: '#my-city',
    map: {
        boundary: {
            style: {
                lineWidth: 8,
                strokeStyle: '#538df7',
                fillStyle: 'transparent'
            }
        },
        blocks: {
            point: {
                size: {
                    min: 1,
                    max: 5
                }, 
                r: [2, 3],
                color: ['#fff', '#4fff5f'],
            },
            cityName: {
                normal: {
                    fillStyle: '#fff',
                    font: "1em 'Microsoft Yahei'"
                },
                hover: {
                    fillStyle: '#4fff5f',
                    font: "1.5em 'Microsoft Yahei'"
                },
                // 定位
                move: {
                    x: 10,
                    y: 10
                },
                // 文字与宽度比例
                txtVSWidth: 3
            },
            style: {
                lineWidth: 3,
                strokeStyle: '#243e6a',
                fillStyle: 'rgba(0, 0, 0, .4)',
                hoverColor: 'rgba(83, 141, 247, .2)',
                holdColor: 'rgba(83, 141, 247, .4)'
            }
        }
    },
    callback: {
        click: function(evt, data) {
            myMap.history.push({
                key: data.index,
                boundary: huaian.areaData, 
                blocks: huaian.citysArr
            })
        },
        mousemove: function(evt, data){
            console.log(evt, data)
        }
    }
}

options.map.boundary.data = china.areaData
options.map.blocks.data = china.citysArr
let myMap = new CMap(options)

myMap.init()
myMap.fadeIn()
</script>

Options 配置手册

el [string] 地图存放Dom
usrData [object] 自定义当前地图数据
map [object] 地图信息配置
- boundary [object] 地图主边界
  - data [array] 地图点位信息
  - style [canvas style] 样式效果
- blocks [object] 区块信息
  - data [array] 区块地图信息
  - selectedMode [false(默认) | single(单选) multiple(多选)] 地区选择模式
  - point [object] 每个区块的点的效果设置
    - size [object] 区块出现的点数总和
      - min [number] 点最少个数
      - max [number] 点最多个数
    - r [ min([number] 最小半径), max([number] 最大半径) ]
    - color [array] 点的颜色取值
    - fun [function] 对单个点进行处理，接受3个值:
      - index [number] 当前索引
      - block [block] 当前区块
      - usrData [object] 当前地图自定义数据可以通过 return 返回一个如下对象对点的设置
      - color [color] 自定义点的颜色
      - r [number] 半径大小
      - position [object] 自定义点的位置
        x [number] x轴位置
        y [number] y轴位置
  - cityName [object] 区块名字效果设置
    - normal [canvas style] 正常显现效果
    - hover [canvas style] 鼠标移入效果
    - move [object] 偏移
      - x [number] x轴偏移
      - y [number] y轴偏移
    - txtVSWidth [number] 文字与宽度比例,宽度在大于此倍数的情况下显示文字
  - style [object] 区块样式设置
    - lineWidth [number] 区块边框宽度
    - strokeStyle [color] 区块边框颜色
    - fillStyle [color] 区块背景颜色
    - hoverColor [color] 鼠标移入区块背景颜色
    - holdColor [color] 选中背景颜色
  - color [array|boolean] 设置区块颜色，优化级为区块内 > color > style
    - [array] 数组时，区块按数组颜色内容循环生成
    - [boolean] 布尔值时，当为 true 时，随机出现颜色
- mirror [object] NEW 镜像配置
  - horizontal [boolean] 水平镜像控制
  - vertical [boolean] 垂直镜像控制
callback [function] 回调函数功能
- click [function] 点击事件,返回内容 (evt, data)=>{...}

dblclick [function] 双击事件,返回内容 (evt, data)=>{...} by stepday 2020/4/8
- mousemover [function] 鼠标移动事件,返回内容 (evt, data)=>{...}

API

cmap api 接口

let myMap = new CMap(options)

myMap.init(options)
初始化地图
myMap.fadeIn(time, coe)
[animate] 在指定时间内，从指定系数大小放大进入
myMap.fadeOut(time, coe)
[animate] 在指定时间内，从当前大小到指定缩放系数放大淡出
myMap.zoomIn(time, coe)
[animate] 在指定时间内，从指定放大系数到原始大小缩小进入
myMap.zoomOut(time, coe)
[animate] 在指定时间内，从当前大小到指定系数放大消失
myMap.history 地图历史记录
- data [array] 地图信息组数
- index [number] 地图指针
- forward [function] 前进到下一个地图
- back [function] 返回到上一个地图
- go [number] 前进或后退number个地图

// 前进到下一个地图
myMap.history.forward()

// 返回到上一个地图
myMap.history.back()

// 前进3个地图
myMap.history.go(3)

区块数据设置

区块内样式设置 style.block

| 属性 | 类型 | 说明 | 默认值 | | ----------- | ------ | ------------ | ------ | | lineWidth | number | 区块边框 | - | | strokeStyle | color | 边框颜色 | - | | fillStyle | color | 填充色 | - | | hoverColor | color | 鼠标移入颜色 | - | | holdColor | color | 选中时颜色 | - |

如果没有设置，默认使用配置内容，如果没有配置，则无。

citysArr: [
    {
        "name": "新疆",
        ...
        "style": {
            "block": {
                "lineWidth": 10,
                "strokeStyle": "#fff",
                "fillStyle": "#8BC34A",
                "hoverColor": "#4CAF50",
                "holdColor": "#009688"
            }
        },
        "map": ...
    },
    ...
]

区块内点自定义

在使用数组时，数组长度则为点的个数，可以支持2个参数，color 和 r 的使用。具体可以查看 data/china.js

citysArr: [
    {
        "name": "新疆",
        ...
        "blocks": {
            "point": {
                "size": 10
            }
        },
        "map": ...
    },
    ...
]

地图镜像设置

| 属性 | 类型 | 说明 | 默认值 | | ---- | ------------ | -------------- | ------ | | horizontal | boolean | 水平镜像 | - | | vertical | boolean | 垂直镜像 | - |

// 镜像设置要放在 map 中
{
    ...
    map: {
        mirror: {
            // 水平翻转
            horizontal: true,
            // 垂直翻转
            vertical: true
        }
    }
}

S.T.O

你可以使用 S.T.O 来快速导出你要的 SVG 地图数据.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme