<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
<div id="container">
  <div id="map"></div>
  <canvas id="deck-canvas"></canvas>
</div>

body {
  margin: 0;
  padding: 0;
}
#container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

mapboxgl.accessToken =
  "pk.eyJ1IjoiYnJhbnpoYW5nIiwiYSI6ImNrM2U2dHh0ejE2YngzaXFlcjFvdG96b2EifQ.KSQQ0l2qGa1-nrEKn3YKPw";
const INITIAL_VIEW_STATE = {
  latitude: 31.226292,
  longitude: 121.465203,
  zoom: 16,
  bearing: 15,
  pitch: 60
};
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v10",
  localIdeographFontFamily: '"Noto Sans", "Noto Sans CJK SC", sans-serif',
  interactive: false,
  center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
  zoom: INITIAL_VIEW_STATE.zoom,
  bearing: INITIAL_VIEW_STATE.bearing,
  pitch: INITIAL_VIEW_STATE.pitch
});
const deckgl = new deck.Deck({
  canvas: "deck-canvas",
  width: "100%",
  height: "100%",
  initialViewState: INITIAL_VIEW_STATE,
  controller: true,
  onViewStateChange: ({ viewState }) => {
    map.jumpTo({
      center: [viewState.longitude, viewState.latitude],
      zoom: viewState.zoom,
      bearing: viewState.bearing,
      pitch: viewState.pitch
    });
  }
});

fetch(
  "https://raw.githubusercontent.com/BranZhang/intersection-3d-rebuild/master/model/yan_an_road.json"
)
  .then((response) => response.json())
  .then((yan_an_road_data) => {
    deckgl.setProps({
      layers: [
        new deck.LineLayer({
          id: "road-paths",
          data: yan_an_road_data,
          opacity: 1,
          strokeWidth: 5,
          getSourcePosition: (d) => d.start,
          getTargetPosition: (d) => d.end,
          getColor: [200, 32, 64]
        })
      ]
    });
  });