갑판을 갖춘 대규모 지리 공간의 가시화.gl, Mapbox gl 및 Vue회사 명

지리 공간의 시각화와 분석은 위치 데이터를 수집하는 모든 회사에 많은 기회를 열 수 있다.내부 데이터는 외부 데이터에 비해 제품 성장에 큰 도움이 됩니다.이러한 모델, 재산 등을 이해하면 효과적인 마케팅, 판매 또는 이용 전략을 형성하는 데 도움을 줄 수 있다.우리는 데이터가 창업 회사의 성장 구동력이라고 의심하지 않지만, 대부분의 경우 위치 데이터는 결국 CSV 파일의 다른 열에 불과하다.
지도는 데이터에 위치 상하문의 귀중한 구성 요소를 추가할 수 있다.그것들은 당신이 데이터의 위치를 이해하는 데 도움을 줄 수 있습니다. 그렇지 않으면 이 데이터들은 위도와 경도열로만 끝날 것입니다.지도에서 본 것은 실체가 어떻게 이동하고 지면 자산과 어떻게 상호작용하는지에 대한 더 가치 있는 정보를 제공했다.Vue와 deck.gl를 사용하여 웹에서 멋진 대규모 시각화를 구축하는 방법을 살펴봅시다.

갑판이 뭐야?독일 로이드 선급사?

갑판gl는 우버의 개원 가시화 프레임워크입니다.이것은 웹에서 고성능 GPU 지원을 시각화하는 데 도움이 된다.그것은 대규모 데이터 집합을 처리하기 위해 구축된 것으로 성능 문제가 많지 않다.갑판gl는 우보 개원 가시화 프레임워크 세트vis.gl의 일부분이다.
갑판gl는 현대 UI 개발 라이브러리와 프레임워크와 쉽게 통합될 수 있도록 반응식 모델을 따른다.vis.gl 키트에는 React가 함께 제공됩니다.js 패키지, 그러나 우리는 @deck.gl/core 하위 모듈을 사용할 것입니다. 이 하위 모듈은 React 의존성이 없고 Vue와 통합됩니다.js 구성 요소.

종속 항목 설치

우리는 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 응용 프로그램.

갑판을 사용한다.gl 도면층은 사용자 정의 맵박스 도면층으로 사용

맵박스를 밑그림으로 사용하고 갑판을 덮어씁니다.gl 캔버스

우리는 이 두 가지 방법으로 응용 프로그램을 구축하는 방법을 토론할 것이다.

맵박스를 사용한 사용자 정의 도면층

@deck.gl/mapbox 서브 모듈은 갑판을 만드는 데 도움을 줍니다.사용자 정의 맵박스 레이어로 사용할 수 있는 gl 레이어입니다.이것은 이 두 라이브러리를 처리하는 가장 간단한 방법이지만, 이미 알고 있는 한계도 있다.이런 특수한 방법은 여전히 실험 단계에 있기 때문에 의외의 오류를 초래할 수 있다.자주 업데이트/다시 렌더링해야 하는 레이어가 있으면 이 방법을 사용하지 않는 것이 좋습니다.
이런 방법을 사용하면 우리는 맵박스의 시각화와 갑판 교차 기능을 충분히 이용할 수 있다.gl층은 맵박스 층과 함께 아름다운 시각화 효과를 만듭니다.

구성 요소에 맵박스 실례를 만들고 블록을 추가하기만 하면 됩니다.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>

맵박스를 밑그림과 중첩 플랫폼으로 사용합니다.독일 로이드 선급사

이런 갑판을 사용하는 방법에서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