基於fabric的地圖定位，SVG熱力地圖

基於fabric的地圖定位，SVG熱力地圖

基於fabric的地圖定位，SVG熱力地圖

基於 fabricjs v2.4.5 開發，熱力圖基於 heatmap.js v2.0.5+ 開發，依賴 Vue.js v2.2.6+.

GITHUB項目地址

github.com/nqdy666/fab…

特性

• 熱力地圖
• 地圖定位
• 距離繪製
• 地圖切換
• 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>
複製代碼