官方图层

使用

<amap>
  <amap-satellite-layer />
  <amap-road-net-layer />
  <amap-traffic-layer />
</amap>

Source Code

Props

属性名	类型	备注
visible	boolean
zIndex	number
opacity	number
zooms	number[2]
autoRefresh	boolean	仅限TrafficLayer
interval	number	仅限TrafficLayer
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

Events

事件名	备注
complete

Example

<template>
  <demo-view class="tile-layer-example">
    <template v-slot:control>
      <a-form-item label="traffic">
        <a-checkbox v-model="traffic" />
      </a-form-item>
      <a-form-item label="roadnet">
        <a-checkbox v-model="roadnet" />
      </a-form-item>
      <a-form-item label="satellite">
        <a-checkbox v-model="satellite" />
      </a-form-item>
      <a-form-item label="opacity">
        <a-slider
          v-model="opacity"
          :min="0"
          :max="1"
          :step="0.1"
          style="width: 180px;"
        />
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-traffic-layer v-if="traffic" :opacity="opacity" />
      <amap-road-net-layer v-if="roadnet" :opacity="opacity" />
      <amap-satellite-layer v-if="satellite" :opacity="opacity" />
    </template>
  </demo-view>
</template>

<script>
export default {
  data() {
    return {
      traffic: true,
      roadnet: false,
      satellite: false,
      opacity: 0.5,
    };
  },
};
</script>