Code Monkey home page Code Monkey logo

hmap's Introduction

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, 必须提供requestAnimationFrameElement.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'
      }
    ]
  });

hmap's People

Contributors

sakitam-fdd avatar zhangyp127 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hmap's Issues

npm安装后引入错误

Failed to compile
./src/containers/LandPage/mapChart/mapChart.js
Module not found: Can't resolve 'hmap-js' in '/Users/gaopc/gao-pro/xstreamline/src/containers/LandPage/mapChart'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.