xiaopaoge/mapbox-gl-split

Map split screen based on mapbox-gl-js

Welcome to mapbox-gl-split 👋

mapbox-gl-split 地图分屏

DEMO

Live DEMO

Install

npm install --save mapbox-gl-split

Usage

mapbox-gl-split 依赖 mapbox-gl，需要先引入 mapbox-gl

---

• module模式

<div id="container">
        <div id="container1"></div>
        <div id="container2"></div>
</div>

import { SplitMap } from 'mapbox-gl-split'

const map1 = new mapboxgl.Map({ container: 'container1', style });
const map2 = new mapboxgl.Map({ container: 'container2', style });

new SplitMap('container', {
  maps: [map1, map2]
});

---

• HTML标签

<div id="container">
        <div id="container1"></div>
        <div id="container2"></div>
</div>

<script src="https://unpkg.com/mapbox-gl-split"></script>

<script>
  const map1 = new mapboxgl.Map({ container: 'container1', style });
  const map2 = new mapboxgl.Map({ container: 'container2', style });

  new SplitMap('container', {
    maps: [map1, map2]
  });
</script>