HMap | 基于openlayers的封装组件
- 采用mapbox配置式创建和管理地图
- 开发者无需关心gis地图相关原理就可以轻松创建地图
- 相比原生openlayers更易用,也更符合国内webgis应用场景
编译
重要: Github 仓库的 /dist 文件夹只有在新版本发布时才会更新。如果想要使用 Github 上 HMap 最新的源码,你需要自己构建。
git clone https://github.com/sakitam-fdd/HMap.gitnpm installnpm run devnpm run build
浏览器支持
支持在HTML5和ECMAScript 5的所有现代浏览器上运行。包括Chrome,Firefox,
Safari和Edge。对于旧版浏览器和平台,如Internet Explorer(至9版)和Android 4.x,
必须提供requestAnimationFrame
和Element.prototype.classList
的polyfill,
并且使用KML格式需要一个polyfill的URL。
安装
npm安装
npm install hmap-js --save
import 'hmap-js/dist/hmap.css' // style
import HMap from 'hmap-js' // lib
cdn
目前可通过 unpkg.com/hmap-js / jsdelivr 获取最新版本的资源。
// jsdelivr https://cdn.jsdelivr.net/npm/hmap-js@1.5.8/dist/hmap.jshttps://cdn.jsdelivr.net/npm/hmap-js@1.5.8/dist/hmap.min.jshttps://cdn.jsdelivr.net/npm/hmap-js@1.5.8/dist/hmap.csshttps://cdn.jsdelivr.net/npm/hmap-js@1.5.8/dist/hmap.min.css// npmhttps://unpkg.com/hmap-js/dist/hmap.jshttps://unpkg.com/hmap-js/dist/hmap.min.jshttps://unpkg.com/hmap-js/dist/hmap.csshttps://unpkg.com/hmap-js/dist/hmap.min.css
示例
注意:ol类库已被打包,对于高级用户,可以直接使用ol来进行必要的操作。
var Map = 'map' controls: loading: true zoomSlider: true fullScreen: true interactions: shiftDragZoom: false view: center: 12118909300259633 40860431061670054 projection: 'EPSG:3857' zoom: 5 // resolution baseLayers: layerName: 'openstreetmap' isDefault: true layerType: 'OSM' layerUrl: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' ;