fabric-map-vue

fabric-map-vue

基于fabric的地图定位，SVG热力地图

English Document

基于 fabricjs v2.4.5 开发，热力图基于 heatmap.js v2.0.5+ 开发，依赖 Vue.js v2.2.6+.

特性

• Auto resize
• 热力地图
• 地图定位
• 距离绘制
• 地图切换

文档

• Demo
• Example on JSBin

功能预览

热力地图 示例源码

缩放类型 示例源码

地图定位 示例源码

距离绘制 示例源码

地图切换 示例源码

背景设置 示例源码

安装

NPM

安装npm包.

$ npm install fabric-map-vue

先需要引用fabric.js

<script src="https://cdn.jsdelivr.net/npm/fabric-map-vue@0.0.10/dist/fabric.min.js"></script>

组件注册

import Vue from 'vue'
import FabricMapVue from 'fabric-map-vue'
Vue.use(FabricMapVue)

现在可以使用该组件

<fabric-map-vue svg-map-url="https://qiniu.qjzd.net/cf.svg"></fabric-map-vue>

CDN

包含 vue 、fabric.js、heatmap.js、 fabric-map-vue.js、fabric-map-vue.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fabric-map-vue@0.0.10/dist/fabric-map-vue.css"/>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/fabric-map-vue@0.0.10/dist/fabric.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js"></script>
<!-- 使用最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/fabric-map-vue@latest"></script>
<!-- 或指定某一个版本 -->
<script src="https://cdn.jsdelivr.net/npm/fabric-map-vue@0.0.10"></script>

现在可以使用该组件

<fabric-map-vue svg-map-url="https://qiniu.qjzd.net/cf.svg"></fabric-map-vue>

本地开发

开发

$ npm i
$ npm run docs-dev

发布

$ npm install -g babel-cli@6.26.0
$ npm install -g rollup@0.67.3
$ chmod a+x scripts/build
$ npm run release
$ git push --follow-tags origin dev && npm publish

如果您使用的是windows系统，您不能直接执行npm run release，您需要安装git bash软件，然后使用git bash执行命令./scripts/build和npm run release:only。

文档发布

$ npm install -g gh-pages
$ chmod a+x scripts/docs-publish
$ npm run docs-publish

如果您使用windows系统，您不能直接执行npm run docs-publish，您需要安装git bash软件，然后使用git bash执行./scripts/docs-publish命令。

捐赠

如果你觉得有用，您可以请我们喝杯咖啡。

许可证

MIT

Copyright (c) 2019-present, Qin Nian