Fabric-based map positioning, SVG Thermal maps

Fabric-based map positioning, SVG Thermal maps

The heatmap was developed based on fabricjs v2.4.5 and heatmap.js v2.0.5+, relying on vue.js v2.2.6+.

GITHUB project address

Github.com/nqdy666/fab…

features

  • The heat map
  • Map location
  • Distance map
  • Map switch
  • Auto resize

The document

  • Demo
  • Example on JSBin

Preview function

The heat mapThe sample source code

Zoom typeThe sample source code

Map locationThe sample source code

Distance mapThe sample source code

Map switchThe sample source code

setThe sample source code

The installation

NPM

Install the NPM package.

$ npm install fabric-map-vue
Copy the code

You need to reference fabric.js first

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
Copy the code

The component registration

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

You can now use this component

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

CDN

Contains vue, fabric.js, Heatmap. js, fabric-map-vue.js, and fabric-map-vue.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric-map-vue.css"/>
Copy the code
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]"></script>
Copy the code

You can now use this component

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