基于fabric的地圖定位咒唆，SVG熱力地圖
基于fabric的地圖定位，SVG熱力地圖
基于 fabricjs v2.4.5 開發(fā)释液，熱力圖基于 heatmap.js v2.0.5+ 開發(fā)全释，依賴 Vue.js v2.2.6+.
GITHUB項目地址
https://github.com/nqdy666/fabric-map-vue
特性
- 熱力地圖
- 地圖定位
- 距離繪制
- 地圖切換
- Auto resize
文檔
功能預(yù)覽
熱力地圖 示例源碼
熱力地圖
縮放類型 示例源碼
縮放類型
地圖定位 示例源碼
[圖片上傳失敗...(image-2c59cd-1563270407185)]
距離繪制 示例源碼
距離繪制
地圖切換 示例源碼
地圖切換
背景設(shè)置 示例源碼
背景設(shè)置
安裝
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)
現(xiàn)在可以使用該組件
<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" />
<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>
現(xiàn)在可以使用該組件
<fabric-map-vue svg-map-url="https://qiniu.qjzd.net/cf.svg"></fabric-map-vue>
