@sakitam-gis/sakitam-map

sakitam-map

a lite javascript map lib

下载

git clone https://github.com/sakitam-gis/sakitam-map.git
npm install
npm run dev
npm run build

安装

npm安装

npm install @sakitam-gis/sakitam-map --save
import smap from '@sakitam-gis/sakitam-map'

cdn

目前可通过 unpkg.com / jsdelivr 获取最新版本的资源。

// jsdelivr (jsdelivr由于缓存原因最好锁定版本号，否则可能会出现意料之外的问题)
https://cdn.jsdelivr.net/npm/sakitam-gis/sakitam-map/dist/sakitam-map.js
https://cdn.jsdelivr.net/npm/sakitam-gis/sakitam-map/dist/sakitam-map.min.js
// npm
https://unpkg.com/sakitam-gis/sakitam-map/dist/sakitam-map.js
https://unpkg.com/sakitam-gis/sakitam-map/dist/sakitam-map.min.js

use

<div id="map"></div>
<script src="https://unpkg.com/sakitam-gis/sakitam-map/dist/sakitam-map.js"></script>
<script type="text/javascript">
  var map = new smap.Map('map', {
    projection: 'EPSG:3857',
    zoom: 5,
    center: [12673975, 4079823]
  });

  map.on('load', function (event, data) {
    console.log(event, data)
  });

  var layer = new smap.layer.TileLayer({
    url: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
  });
  map.addLayer(layer);

  document.onkeydown = function (event) {
    console.log(event)
    if (event.keyCode === 107) { // +
      map.setZoom(map.getZoom() + 1)
    } else if (event.keyCode === 109) { // -
      map.setZoom(map.getZoom() - 1)
    }
  };

  var drag = new smap.interactions.DragPan();
  var zoom = new smap.interactions.WheelZoom();
  var dbclick = new smap.interactions.DoubleClickZoom();
  map.addInteraction(dbclick);
  map.addInteraction(zoom);
  map.addInteraction(drag);
</script>