ARK MAP

# 基本概念

# Source

Source表示数据源，说明地图应显示哪些数据。使用属性指定源的类型，Source.type属性必须是vector、raster、raster-dem、geojson、image、video之一。

下面这个例子以geojson类型的Source为例，清晰的展示了Source的概念。

# 杭州的高速路：

在离开页面时，需要调用map.destroy() 销毁地图

<template>
  <div id="map-container"></div>
</template>

<script>
import arkmap from "ark-map";
import "ark-map/dist/ark-map.css";
import style from "./quick-start-style.js";
import geojson from "docs/assets/json/hangzhou_motorway.json";

export default {
  data: () => ({
    map: null,
  }),
  mounted() {
    this.map = new arkmap.Map({
      container: "map-container",
      zoom: 15,
      center: [120.10603, 30.13324],
      pitch: 61,
      bearing: -17.6,
      style,
      hash: false,
      antialias: true,
      fixedZoom: true,
      devicePixelRatio: 2,
    });
    this.map.on("map.ready", () => {
      this.addRoads();
    });
  },
  methods: {
    addRoads() {
      this.map.addSource("hangzhou_motorway", {
        type: "geojson",
        data: geojson,
      });

      this.map.addLayer({
        id: "hangzhou_motorway_layer",
        type: "line",
        source: "hangzhou_motorway",
        layout: {
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": "#7DF9A6",
          "line-width": {
            stops: [
              [10, 2],
              [15, 10]
            ],
          },
          "line-opacity": 0.6,
          "line-blur": {
            stops: [
              [10, 2],
              [15, 4]
            ],
          },
        },
      });
      this.map.addLayer({
        id: "hangzhou_motorway_layer2",
        type: "line",
        source: "hangzhou_motorway",
        layout: {
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": "#fff",
          "line-width": 1,
          "line-opacity": 1,
          "line-blur": 0,
        },
      });
    },
  },
  beforeDestroy() {
    if (this.map) this.map.destroy();
  },
};
</script>

<style lang="less" scoped>
#map-container {
  height: 500px;
}
</style>
显示代码

# Layer

Layer表示图层，一张完整的地图是由非常多的图层组成的。

如道路、河流、湖泊可以为3个图层。但是为了不同的地图样式展现，同一个数据也可以不止一个图层来展现。如道路数据可以细分为3个图层：道路、隧道、桥梁。在样式配置中添加道路、隧道、桥梁的图层，可以将不同的道路展现在地图上。

在下面这个列子可以看到，所有的Layer数据都来自于roads，但是根据不同的属性，筛选出不同的道路，并且分为3个图层：道路、隧道、桥梁。

# Layer示例

const layers = [
  // 高速路
  {
    type: "line",
    source: "composite",
    filter: ["all", ["==", "fclass", "motorway"]], // 筛选出高速路
    id: "motorway",
    paint: {...},
    "source-layer": "roads",
  },
  // 桥梁
  {
    type: "line",
    source: "composite",
    filter: ["all", ["==", "bridge", "T"]], // 筛选出桥梁
    id: "bridge",
    paint: {...},
    "source-layer": "roads",
  },
  // 隧道
  {
    type: "line",
    source: "composite",
    filter: ["all", ["==", "tunnel", "T"]], // 筛选出隧道
    id: "tunnel",
    paint: {...},
    "source-layer": "roads",
  },
]

← 投影 →