README

SvgMap

使用数据源生成svg的Yii2小部件。

安装

执行命令

php composer.phar require ghopper/svg-map "*"

或添加到composer.json

{
    "require": {
        "ghopper/svg-map": "*"
    }
}

使用示例

连接命名空间

use ghopper\svgmap\SvgMapWidget;

在控制器中获取构建svg所需的数据（在此例中为示例数据）并将其传递到模板

$file = Yii::getAlias('@ghopper/svgmap/example') . "/russia.json";
$data = file_get_contents($file);
$states = json_decode($data);
...
$this->render('index', ['svgData' => $states]);

在模板中创建全局作用域中的js事件处理器

<script>
    var customClick = function(path) {alert(path.attr('id') + ' - ' + path.attr('title'))};
</script>

并将所有数据传递给小部件

<?php
    echo SvgMapWidget::widget([
        'type' => SvgMapWidget::DATA_SOURCE_ARRAY,
        'data' => $svgData,
        'onClick' => 'customClick',
    ]);
?>

数据源

您可以将自己的数据添加到基本格式中

{
    title: "Элемент #1",
    d: ["M 50,50 10,0 0,10 -10,0 z"]
}

例如，添加id、元素数量、跳转地址或其他可能需要的数据。之后，您可以在事件处理器中操作这些数据。

小部件支持两种数据源

SvgMapWidget::DATA_SOURCE_ARRAY - PHP数组
SvgMapWidget::DATA_SOURCE_JSON_URL - JSON链接

外观

默认样式在 @vendor/ghopper/svg-map/src/css/svg-map.css 中，您可以在自己的代码中任意修改。小部件具有简单的结构

<div class='svg_map'>
    <div><!--tooltip--></div>
    <svg />
</div>

您可以在事件处理器中创建复杂的动画。

小部件启动参数

必需

type - 数据源类型
data - 与type参数相关联的数据（JSON地址或数组）

附加

showTip - 标志，用于确定是否显示工具提示
showTools - 连接地图的移动和缩放功能
onClick - 点击svg路径元素时的回调函数
onOver - 当鼠标移动到元素上时调用的回调函数
onOut - 当鼠标离开元素时调用的回调函数

ghopper / svg-map

维护者

详细信息