Fabric-map-vue NPM

fabric-map-vue

Fabric-based map coordinate, SVG heatmap
CN 中文版

Based on fabricjs v2.4.5 development, the heat map is based on heatmap.js v2.0.5+ development , relying on Vue.js v2.2.6+.

Features

Auto resize
heatmap
Map coordinate
Distance drawing
Map switching

Document

Demo
Example on JSBin

Feature Preview

Heatmap sample source

Heatmap

Zoom type sample source

zoom type

Map Coordinate sample source

Map Coordinate

Distance drawing sample source code

Distance drawing

Map Switching sample source

Map Switch

Background setting sample source

Background Settings

Installation

NPM

Install the package.

$ npm install fabric-map-vue

First need to quote 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)

You may now use the component in your markup

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

CDN

include 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>
<!-- Use the latest version -->
<script src="https://cdn.jsdelivr.net/npm/fabric-map-vue@latest"></script>
<!-- or specify a version -->
<script src="https://cdn.jsdelivr.net/npm/fabric-map-vue@0.0.10"></script>

You may now use the component in your markup

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

Local development

development

$ npm i
$ npm run docs-dev

publish

$ 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

If you use the window system, you can't execute directly npm run release, you need to install git bash software, and then use git bash to execute the command ./scripts/build and npm run release:only.

docs-publish

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

If you use the window system, you can't execute directly npm run docs-publish, you need to install git bash software, and then use git bash to execute the command ./scripts/docs-publish.