基于fabric的地图定位,SVG热力地图
基于 fabricjs v2.4.5 开发,热力图基于 heatmap.js v2.0.5 开发,依赖 Vue.js v2.2.6 .
- Auto resize
- 热力地图
- 地图定位
- 距离绘制
- 地图切换
热力地图 示例源码
缩放类型 示例源码
地图定位 示例源码
距离绘制 示例源码
地图切换 示例源码
背景设置 示例源码
安装npm包.
$ npm install fabric-map-vue
先需要引用fabric.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
包含 vue
、fabric.js
、heatmap.js
、 fabric-map-vue.js
、fabric-map-vue.css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric-map-vue.css"/>
<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>
<!-- 使用最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/fabric-map-vue@latest"></script>
<!-- 或指定某一个版本 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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 [email protected]
$ npm install -g [email protected]
$ 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
命令。
如果你觉得有用,您可以请我们喝杯咖啡。
Copyright (c) 2019-present, Qin Nian