vue 視覚化大画面

マップボックスを使用する理由

上記または他の WebGIS フレームワークや統合サービスプロバイダーを検索して、Mapbox の利点を簡単に比較できます。

3D 地形と 3D モデルをサポート
複数の座標系投影をサポート
Mapbox Studio はマップスタイルをオンラインで編集します。使用時に必要なリンクは 1 つだけで、更新時にリンクを変更する必要はありません (置き換え不可能)
美しい（誰が議論できるでしょうか？）
シンプルで使いやすい (Cesium と Openlayers を比較)
地理データの完全な形式のサポート (画像、KML、WMS、WMTS、GeoJson)
完全に機能するマップボックスはもはや花瓶ではなく、強力で完全な大規模フレームワークになりました

マップボックスアカウントを登録する

Mapboxは中国での新規ユーザー登録を禁止しているため、グローバルマジックをオンにして Mapbox公式サイトにアクセスして登録する必要があります。

海外の銀行カード番号の入力を求められた場合は、次を参照してください: Zhihu: Why do I need to fill in the Card number when registered for Mapbox? Is there any Bank required? I read online that it doesn't need to be completed.具体的にはどうすればいいでしょうか?アドバイスをお願いします。?

登録が完了すると以下の画面が表示されます

左上の赤いボックスを使用すると、オンラインでマップスタイルを作成および編集できます。下の赤いボックスは公開キーで、作成した公開マップにアクセスするために使用できます。

パーソナライズされた地図を作成する

各レイヤーが何であるかを自分で調べることができます。ここでは衛星画像のみを追加しました。レイヤーが増えると、読み込みが遅くなり、使用するときにラグが生じます。

左上隅の 3D ボタンをクリックして 3D ビューを開きます。Mapbox はグローバル等高線情報に基づいて地形をシミュレートします。

上の写真は山東省泰安市です。以下もサポートしています:

カスタム光源
カスタム座標系
カスタマイズされた地形の誇張
霧 (可視範囲、適切な設定はパフォーマンスの最適化に役立ちます)

VUEプロジェクトでmapBoxを使用する

この記事では vue3 を使用しており、オプションは次のとおりです。

ルーター

vuex

少ない

インストール、NPM 経由でインストール
1. ```
npm i mapbox-gl
```

導入

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文

初期化

mapboxgl.accessToken='pk.eyJ1IjoiemJiZW4iLCJhIjoiACtpemtnOXRoMDRhcDMwbG43aGYxbXhqYyJ9.YOJzSXzubABBJeK7SXg60w'; //这是一个无效的公钥，上面提到了公钥在哪里可以获取到
this.map = new mapboxgl.Map({
        container: "basicMapbox",
        style: 'mapbox://styles/xxx/ckus1uok22m4117aif4pg9qa6', //这是个假链接，在上面有提到分享按钮，那里有你自己的链接
        center: [118, 28],
        zoom: 3, //zoom你都不懂就别看了
        pitch: 0, // 相对于地面3D视角的角度
        bearing: 0, // 东西南北 方向，正北方为 0
        projection: 'globe', // 为 3D 地球
        antialias: false, //抗锯齿，通过false关闭提升性能
        essential: true, //不知道什么意思，我看人家写我就写了
        renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
        skipOnboarding: true,//可选择不等待瓦片加载
      });
// ### 标签汉化
// this.map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
// ### 添加导航控制条
// this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');

イベントをリッスンする

this.map.on("eventName",()=>{})
// 常用事件有：load、moveend、render等，自行探索

一般的な方法

this.map.setFog({}); //开启宇宙、星空
this.map.flyTo({
     center: [109.926476, 19.088415], //目标中心点 海南省琼中县湾岭镇
     zoom: 11, //目标缩放级别
     bearing: 56.50, //目标方位角
     pitch: 47.50, //目标倾斜角
},duration: 7000,) //飞行
let shape = await request.get("some_geoJosn")
this.map.addSource('customSourceName'{
    type:"geojson" //可选： raster || image || 等
    // 每个类型所需的参数不一样，自行探索，这里用geojson举例。
    "data": shape
}) //添加资源
this.map.getSource('customSourceName') && this.map.removeSource('customSourceName') //获取资源、删除资源
this.map.addLayer({
        id: 'measure-lines',
        type: 'line',
        source: 'customSourceName', //使用刚刚添加的资源
        layout: {
          'line-cap': 'round',
          'line-join': 'round'
        },
        paint: {
          'line-color': '#00FFF4',
          'line-width': 2.5,
          'line-opacity': 1,
          'line-gap-width': 0,
        },
}); // 添加图层，如上使用 名为 customSourceName 的资源 添加了一个用线勾勒轮廓的图层。
this.map.getLayer('measure-lines') && this.map.removeLayer('measure-lines') // 获取图层、删除图层

挿入ポイント。以下は挿入ポイントの簡単な例です。vue コンポーネントを使用して、挿入ポイントの応答ポップアップウィンドウをレンダリングできます。

import mapboxPopView from '../mapboxPopView/mapboxPopView.vue'; //弹窗组件需提前引入
  
async setMaker(makerList) {
      if (!makerList) {
        return
      }
      // console.log('makerList::: ', makerList);
      for (let item of makerList) {
        let dom = document.createElement('img')
        dom.src = require(`../../../public/static/img/${item.deviceType}.png`) //这里使用了自定义图片来替换默认插点图标
        dom.style.width = '52.4px'
        dom.style.height = 'auto' //可以保持比例
        dom.id = `marker-${item.deviceId}`
        dom.classList.add("markerCustom")
        dom.addEventListener("click", () => {
          this.setPopContent(item)
        })
        let marker = new mapboxgl.Marker({
          element: dom,
          offset: [0, -50], //图标偏移量
        }).setLngLat([item.lon, item.lat]).addTo(this.map);
        // 添加标记的弹窗事件
        var popup = new mapboxgl.Popup({
          offset: [0, -100], //弹窗偏移量
        }).setHTML(`<div id="popup-content-${item.deviceId}"></div>`)
        // this.setPopContent(item)
        marker.setPopup(popup);
        this.markerList.push(marker)
        // 点击标记时显示弹窗
      }
      this.$store.dispatch('addLayer')
    },
   setPopContent(item) {
      const MyNewPopup = defineComponent({
        extends: mapboxPopView,
        setup() {
          const deviceItem = item
          return { deviceItem } //这里的常量可以直接在组件的this对象中获取
        },
      })
      setTimeout(() => {
        createApp(MyNewPopup).mount(`#popup-content-${item.deviceId}`) //挂载到刚刚定义的拥有唯一ID的DOM节点上
      }, 10);
    },

ポイントを挿入すると次のような効果が得られます。

この時点で、mapbox の基本機能が紹介されました。さらに、mapbox はカスタム画像ソースをサポートします。以下は、空の地図タイルの使用例です。

setTiandituLaryer() {
      this.map.addSource('tianditu', {
        type: 'raster',
        tiles: [
          '你的天地图链接',
        ],
        tileSize: 256,
      });
      this.map.addLayer({
        id: 'tianditu',
        type: 'raster',
        source: 'tianditu',
      });
},

他の画像ソースを使用する場合は、Mapbox Studio で不要なレイヤーを閉じるか削除することを忘れないでください。

マップボックスを使用する理由

マップボックスアカウントを登録する

パーソナライズされた地図を作成する

VUEプロジェクトでmapBoxを使用する

おすすめ