갑판을 갖춘 대규모 지리 공간의 가시화.gl, Mapbox gl 및 Vue회사 명
지도는 데이터에 위치 상하문의 귀중한 구성 요소를 추가할 수 있다.그것들은 당신이 데이터의 위치를 이해하는 데 도움을 줄 수 있습니다. 그렇지 않으면 이 데이터들은 위도와 경도열로만 끝날 것입니다.지도에서 본 것은 실체가 어떻게 이동하고 지면 자산과 어떻게 상호작용하는지에 대한 더 가치 있는 정보를 제공했다.Vue와 deck.gl를 사용하여 웹에서 멋진 대규모 시각화를 구축하는 방법을 살펴봅시다.
갑판이 뭐야?독일 로이드 선급사?
갑판gl는 우버의 개원 가시화 프레임워크입니다.이것은 웹에서 고성능 GPU 지원을 시각화하는 데 도움이 된다.그것은 대규모 데이터 집합을 처리하기 위해 구축된 것으로 성능 문제가 많지 않다.갑판gl는 우보 개원 가시화 프레임워크 세트vis.gl의 일부분이다.
갑판gl는 현대 UI 개발 라이브러리와 프레임워크와 쉽게 통합될 수 있도록 반응식 모델을 따른다.vis.gl 키트에는 React가 함께 제공됩니다.js 패키지, 그러나 우리는
@deck.gl/core
하위 모듈을 사용할 것입니다. 이 하위 모듈은 React 의존성이 없고 Vue와 통합됩니다.js 구성 요소.![](https://s1.md5.ltd/image/a812f5421b4fb278e28e3e38d2e8c03c.jpg)
종속 항목 설치
우리는 Mapbox-gl 맵을 렌더링하고 Deck.gl 를 사용하여 기존 Vue에서 시각화할 것입니다.js 응용 프로그램.갑판gl는 React에 대한 기존 지원을 가지고 있으며 본고는 주로 Vue에서 이러한 기술을 사용하여 응용 프로그램을 구축하는 데 주목하고자 한다.js.
부트된 Vue에서 다음 명령을 사용합니다.js 응용 프로그램에서 의존 항목을 설치합니다.
$ npm install --save mapbox-gl @deck.gl/core @deck.gl/layers
갑판을 사용하다.gl 및 Mapbox gl
우리는 Deck을 사용할 수 있는 두 가지 주요 방법이 있습니다.Vue에서 Mapbox gl의 gl을 사용합니다.js 응용 프로그램.
맵박스를 사용한 사용자 정의 도면층
@deck.gl/mapbox
서브 모듈은 갑판을 만드는 데 도움을 줍니다.사용자 정의 맵박스 레이어로 사용할 수 있는 gl 레이어입니다.이것은 이 두 라이브러리를 처리하는 가장 간단한 방법이지만, 이미 알고 있는 한계도 있다.이런 특수한 방법은 여전히 실험 단계에 있기 때문에 의외의 오류를 초래할 수 있다.자주 업데이트/다시 렌더링해야 하는 레이어가 있으면 이 방법을 사용하지 않는 것이 좋습니다.이런 방법을 사용하면 우리는 맵박스의 시각화와 갑판 교차 기능을 충분히 이용할 수 있다.gl층은 맵박스 층과 함께 아름다운 시각화 효과를 만듭니다.
![](https://s1.md5.ltd/image/b3556335274f6f8bffe6e3d2d4c550bc.jpg)
구성 요소에 맵박스 실례를 만들고 블록을 추가하기만 하면 됩니다.gl층은 사용자 정의 층으로 합니다.
1、지도 만들기
우리는
mapbox-gl
라이브러리를 사용하여 구성 요소 안에 지도를 신속하게 추가할 수 있다.<template>
<div class="container">
<div id="map" ref="map"></div>
</div>
</template>
<script>
import mapboxgl from "mapbox-gl";
export default {
data() {
return {
accessToken: process.env.VUE_APP_MAPBOX_TOKEN,
mapStyle: "mapbox://styles/haxzie/ck0aryyna2lwq1crp7fwpm5vz",
mapData: "https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json",
latitude: 35.4832668,
longitude: 12.9491635,
zoom: 10,
bearing: 0,
pitch: 0,
};
},
created() {
// creating a non reactive map object
this.map = null;
},
mounted() {
// initialize the map
this.map = new mapboxgl.Map({
accessToken: this.accessToken,
container: this.$refs.map,
style: this.mapStyle ,
center: [this.viewState.longitude, this.viewState.latitude],
zoom: this.viewState.zoom,
pitch: this.viewState.pitch,
bearing: this.viewState.bearing,
});
},
}
</script>
<style lang="scss">
.map-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
</style>
2. 갑판을 연결한다.gl MapBox 레이어
@deck.gl/mapbox
모듈을 사용하면 사용자 정의 맵박스 층을 만들고 그룹 하나를 포함할 수 있습니다.gl층 내.일단 네가 그것들을 모두 합치면 구성 요소가 이렇게 해야 한다. 너는 시작할 수 있다.s<template>
<div class="container">
<div id="map" ref="map"></div>
</div>
</template>
<script>
import mapboxgl from "mapbox-gl";
import { GeoJsonLayer } from "@deck.gl/layers";
import { MapboxLayer } from "@deck.gl/mapbox";
export default {
data() {
return {
accessToken: process.env.VUE_APP_MAPBOX_TOKEN,
mapStyle: "mapbox://styles/haxzie/ck0aryyna2lwq1crp7fwpm5vz",
mapData: "https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json",
latitude: 35.4832668,
longitude: 12.9491635,
zoom: 10,
bearing: 0,
pitch: 0,
};
},
created() {
// creating a non reactive map object
this.map = null;
},
mounted() {
// initialize the map
this.map = new mapboxgl.Map({
accessToken: this.accessToken,
container: this.$refs.map,
style: this.mapStyle ,
center: [this.viewState.longitude, this.viewState.latitude],
zoom: this.viewState.zoom,
pitch: this.viewState.pitch,
bearing: this.viewState.bearing,
});
this.loadLayer();
},
methods: {
loadLayer() {
// create a new MapboxLayer of type GeoJSON Layer
const layer = new MapboxLayer({
id: 'geojson-layer',
type: GeoJsonLayer,
data: this.mapData,
filled: true,
lineWidthScale: 20,
lineWidthMinPixels: 2,
getFillColor: d => [245, 133, 5, 0],
getLineColor: d => [245, 245, 245],
getLineWidth: 1,
)};
// add the layer to map
this.map.addLayer(MapboxLayer);
}
},
};
</script>
<style lang="scss">
.map-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
</style>
맵박스를 밑그림과 중첩 플랫폼으로 사용합니다.독일 로이드 선급사
![](https://s1.md5.ltd/image/9124c27c49482b8c3eccc3ab38b778e5.png)
이런 갑판을 사용하는 방법에서gl 지도와 갑판을 렌더링하기 위해 맵박스를 밑그림으로 사용합니다.gl는 시각화와 상호작용에 사용됩니다.우리는 deck에 완전한 상호작용 제어를 제공했다.gl, 갑판을 매번 축소, 평이, 기울일 수 있도록 합니다.gl 화포가 밑그림에 반영됩니다.지금까지 이것은 deck의 가장 건장한 실현이다.우리는 생산 중gl를 사용할 수 있다.
1. 템플릿 설정
상술한 방법으로 구성 요소를 구축할 때, 우리는 두 개의 층을 추가해야 한다.gl canvas와mapboxgl 요소를 템플릿으로 가져옵니다.갑판을 확보하다.gl 캔버스는 맵박스 요소의 맨 위에 있습니다.
<template>
<div class="deck-container">
<div id="map" ref="map"></div>
<canvas id="deck-canvas" ref="canvas"></canvas>
</div>
</template>
<style scoped>
.deck-container {
width: 100%;
height: 100%;
position: relative;
}
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #e5e9ec;
overflow: hidden;
}
#deck-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
2. 지도함gl과 갑판을 연결한다.gl 실례
다음은 맵과 deck을 초기화해야 합니다.gl 실례와 상호작용을 연결합니다.우리는 마운트된 갈고리를 사용하여 그것을 초기화하고 나중에 사용할 수 있도록 비반응성 변수에 분배할 수 있다.
import { Deck } from "@deck.gl/core";
import mapboxgl from "mapbox-gl";
export default {
data() {
return {
viewState: {
latitude: 100.01,
longitude: 100.01,
zoom: 12,
pitch: 0,
bearing: 0
}
}
},
created() {
this.map = null;
this.deck = null;
},
mounted() {
// creating the map
this.map = new mapboxgl.Map({
accessToken: this.accessToken,
container: this.$refs.map,
interactive: false,
style:
this.mapStyle || "mapbox://styles/haxzie/ck0aryyna2lwq1crp7fwpm5vz",
center: [this.viewState.longitude, this.viewState.latitude],
zoom: this.viewState.zoom,
pitch: this.viewState.pitch,
bearing: this.viewState.bearing,
});
// creating the deck.gl instance
this.deck = new Deck({
canvas: this.$refs.canvas,
width: "100%",
height: "100%",
initialViewState: this.viewState,
controller: true,
// change the map's viewstate whenever the view state of deck.gl changes
onViewStateChange: ({ viewState }) => {
this.map.jumpTo({
center: [viewState.longitude, viewState.latitude],
zoom: viewState.zoom,
bearing: viewState.bearing,
pitch: viewState.pitch,
});
},
});
}
}
3. 레이어 생성 및 렌더링
갑판gl는 내장된 내부 상호작용 기능을 가지고 있어 우리는 갑판의 층 도구를 간단하게 설치할 수 있다.레이어를 효과적으로 렌더링합니다.레이어의 데이터가 변경될 때마다
deck.setProps({})
이 렌더링을 터치해야 합니다.아래의 예는 어떻게 이 점을 실현하는지 잘 설명하였다.import { PathLayer } from "@deck.gl/layers";
export default {
data() {
return {
// all your data properties
pathData: [
{
path: [[100, 10], [200, 30]...],
color: [255, 255, 255, 50]
},
...
] // some geo data
}
},
computed: {
// a reactive property which creates the layer objects whenever the data is changed
getLayers() {
const paths = new PathLayer({
id: "path-layer",
data: this.pathData,
widthScale: 20,
widthMinPixels: 2,
getPath: d => d.path,
getColor: d => d.color,
getWidth: d => 1
});
return [paths]
}
},
methods: {
renderLayers(layers) {
// setting the layers to deck.gl props
this.deck.setProps({
layers
})
}
},
watch: {
// whenever the layer data is changed and new layers are created,
// rerender the layers
getLayers(layers) {
this.renderLayers(layers);
}
}
}
이 방법을 렌더링에만 사용하고 별도의 블록으로 추상화할 수도 있습니다.gl 패키지 구성 요소.일단 이 구성 요소를 준비하면, 구성 요소 바깥쪽의 층을 계산해서 도구로 당신의 갑판에 전달할 수 있습니다.gl 패키지 구성 요소.deck에 대한 더 많은 정보를 알 수 있습니다.gl 및 APIdeck.gl
지리 공간의 시각화를 즐겨 읽습니까?deck를 어떻게 사용하는지에 대한 더 깊은 글에 계속 관심을 가져 주십시오.gl는 생산 응용 프로그램에 있습니다.
Hi there! I work as a UX Engineer at Locale.ai solving Geo-Spatial problems for our B2B customers. If you think you love solving UX problems for users, love designing and want to work with a team of enthusiastic individuals, check out the job openings we have at Locale.
Wanna talk? You can find me on , and GitHub.
최초 출판 haxzie.com
Reference
이 문제에 관하여(갑판을 갖춘 대규모 지리 공간의 가시화.gl, Mapbox gl 및 Vue회사 명), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/localeai/large-scale-geospatial-visualization-with-deck-gl-mapbox-gl-and-vue-js-54im텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)