<script src="https://unpkg.com/deck.gl@latest/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]
})
]
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.