Home
Softono
HMap

HMap

Open source JavaScript
Website GitHub
74
Stars
31
Forks
1
Issues
14
Watchers
7 years
Last Commit
Map Servers & Tiles JavaScript Libraries & Components

About HMap

HMap is a JavaScript mapping component built as a wrapper around OpenLayers, designed to simplify WebGIS development. It uses a Mapbox-style configuration approach, allowing developers to create and manage maps through simple option objects without needing deep knowledge of GIS internals. Compared to native OpenLayers, HMap offers a more user-friendly API better suited for Chinese web mapping applications. Its dynamic rendering layers draw inspiration from maptalks. The library supports interactive controls such as loading indicators, zoom sliders, and fullscreen toggles, along with configurable map interactions. Users can define base layers including OSM tile sources and set view properties like center coordinates, projection (such as EPSG:3857), and zoom level. HMap distributes through npm as hmap-js and via CDN through unpkg and jsdelivr. It runs on all modern HTML5 and ECMAScript 5 browsers including Chrome, Firefox, Safari, and Edge, with polyfills required for older environments. The OpenLayers library

Platforms

Web Self-hosted

Languages

JavaScript

Links

Website Source Code
s
Published by
sakitam-fdd
Visit View Profile

README.md

View on GitHub

HMap | 基于openlayers的封装组件

Build Status NPM downloads JS gzip size Npm package GitHub stars GitHub license

  • 采用mapbox配置式创建和管理地图
  • 开发者无需关心gis地图相关原理就可以轻松创建地图
  • 相比原生openlayers更易用，也更符合国内webgis应用场景
  • 部分动态渲染图层参考了 maptalks 的实现。

编译

重要: Github 仓库的 /dist 文件夹只有在新版本发布时才会更新。如果想要使用 Github 上 HMap 最新的源码，你需要自己构建。

git clone https://github.com/sakitam-fdd/HMap.git
npm install
npm run dev
npm 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 (jsdelivr由于缓存原因最好锁定版本号，否则可能会出现意料之外的问题)
https://cdn.jsdelivr.net/npm/[email protected]/dist/hmap.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/hmap.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/hmap.css
https://cdn.jsdelivr.net/npm/[email protected]/dist/hmap.min.css
// npm
https://unpkg.com/hmap-js/dist/hmap.js
https://unpkg.com/hmap-js/dist/hmap.min.js
https://unpkg.com/hmap-js/dist/hmap.css
https://unpkg.com/hmap-js/dist/hmap.min.css

示例

注意：ol类库已被打包，对于高级用户，可以直接使用ol来进行必要的操作。

var Map = new HMap('map', {
    controls: {
      loading: true,
      zoomSlider: true,
      fullScreen: true
    },
    interactions: {
      shiftDragZoom: false
    },
    view: {
      center: [12118909.300259633, 4086043.1061670054],
      projection: 'EPSG:3857',
      zoom: 5, // resolution
    },
    baseLayers: [
      {
        layerName: 'openstreetmap',
        isDefault: true,
        layerType: 'OSM',
        layerUrl: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      }
    ]
  });