Vue QEarth

# qe-vector-tile-layer

矢量切片图层组件，主要用于解析渲染矢量切片服务

# 实例

隐藏代码 
<template>

  <div  style="height: 450px;position:relative;">
    <qe-viewer
      :imagery-type="'TMap'"
      :default-view="defaultView"
      :scene3d-only="true"
      :request-render-mode="true"
      @ready="viewerReady"
    >
      <qe-vector-tile-layer name="vectortilelayer" :tile-options="tileOptions" />
      <qe-layer-control />
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeVectorTileLayer,QeLayerControl} from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
import elementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(elementUI)

const accesstoken =
  'pk.eyJ1IjoicXlnaXMyMDIyIiwiYSI6ImNreTQzNHdkYzA3dm0ycnBxbHppYWVlNG4ifQ.eUwY_Oza3bNXlGrYcuSeOg'

export default {
  components: {
    QeViewer,
    QeVectorTileLayer,
    QeLayerControl
  },
  data () {
    return {
      defaultView: [
        121.06784751,
        37.68715515,
        961.557,
        1.4193217459133531,
        -48.40169274479005,
        0.0016336104831656695
      ],
      tileOptions: {
        url: `https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7/{z}/{x}/{y}.vector.pbf?access_token=${accesstoken}`,
        subdomains: ['a', 'b', 'c', 'd'],
        mvtOptions: {
          layers: ['road', 'poi_label', 'building','landcover']
        },
        style: {
          version: '1.0',
          name: 'basic',
          metadata: {},
          layers: [
            {
              type: 'line',
              id: 'road',
              paint: {
                'fabric': {type:'Fade',uniforms:{fadeDirection:{x:false,y:true}}},
                'line-width': 20.0,
                'clamp-to-ground': true,
                'line-opacity': 1.0,
                visibility: 'visible'
              },
              'source-layer': 'road'
              // minZoom: 9
              // maxZoom: 18
            },
            {
              id: 'building',
              type: 'fill',
              'source-layer': 'building',
              paint: {
                'fabric': {type:'Image',uniforms:{color:'red'}},
                // 'fill-opacity': 1.0,
                'clamp-to-ground': false,
                'extruded-height': '{height}',
                visibility: 'visible'
              }
            },
            {
              id: 'landcover',
              type: 'fill',
              'source-layer': 'landcover',
              paint: {
                'fabric': {type:'Color',uniforms:{color:'green'}},
                // 'fill-opacity': 1.0,
                'clamp-to-ground': true,
                'extruded-height': '{height}',
                outline:true,
                'outline-color':'black',
                visibility: 'visible'
              }
            }
          ]
        }
      }
    };
  },
  methods: {
    viewerReady(viewer) {
      viewer.depthTestAgainstTerrain = false
    }
  }
}
</script>

# Attributes

参数 说明 类型 可选值 默认值
tileOptions 矢量切片图层可选参数 object 参照 tileOptions 说明 —
name 图层名称 string — —
id 图层唯一 id 不设置会自动生成 string — —
visible 图层是否可见 boolean — true
minZoom 图层最小层级，低于最小层级则不显示 Number — 0
maxZoom 图层最大层级，超过则不显示 Number — 25
layerOptions 图层其他可选参数 object — —

# tileOptions

const tileOptions = {
  // 矢量切片服务地址 --- 必填
  url: `https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7/{z}/{x}/{y}.vector.pbf?access_token=${accesstoken}`,
  // 多域设置 --- 可选，但是 url 中带有多域名设置，必填
  subdomains: ['a', 'b', 'c', 'd'],
  // 必填参数，设置矢量切片样式, 可以是 json 对象也可以是 url 地址
  style: '/mvtProxy/mvt-style/mvt-style.json',
  // 矢量切片服务一些可选参数  ---可选参数，不必填
  mvtOptions: {
    // 设置矢量切片中那些图层可以被解析,如果不设置默认解析所有图层
    layers: ['road', 'poi_label', 'building'],
  },
  // 设置矢量切片服务请求范围 ---- 可选参数，不必填
  extent: [
    121.93989190453804, 40.657298258352974, 122.26565246669644,
    40.84659322407394,
  ],
  // 设置是切片服务最大请求层级 ---可选参数，不必填
  maximumLevel: 18,
  // 设置是切片服务最小请求层级 ---可选参数，不必填
  minimumLevel: 0,
}

# tileOptions---style 设置

const mvtStyle = {
  version: '1.0',
  name: 'basic',
  metadata: {},
  // sources: {},
  // sprite: '',
  // glyphs: '',
  /*---设置材质图片地址是否根据样式文件路径来拼接，
  当值为 'auto' 时材质图片地址按照文件路径拼接,不设置材质图片地址按照绝对路径访问*/
  materials: 'auto',
  layers: [
    {
      type: 'line', // 线样式渲染
      // filter 基于 mapbox 实现的样式规则，具体设置参照下面详解
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['!in', 'class', 'street', 'path'],
      ],
      id: 'road', // id 必设置，且保障唯一
      paint: {
        // 线的相关样式设置
        fabric: { type: 'Color', uniforms: { color: 'purple' } },
        'line-width': 2.0,
        'clamp-to-ground': false,
        'line-opacity': 1.0,
        visibility: 'visible',
      },
      'source-layer': 'pj_road_3d', // 对应矢量切片中的图层名
      minZoom: 9, // 设置最小可见层级
      maxZoom: 18, // 设置最大可见层级
    },
    {
      id: 'building',
      type: 'fill', // 多边形样式设置
      'source-layer': 'ent',
      paint: {
        fabric: { type: 'Image', uniforms: { color: 'red' } }, // 可以设置颜色值，也可以设置纹理图片路径
        'clamp-to-ground': false,
        'extruded-height': '{height}', // 根据属性字段设置三维挤出高度
        visibility: 'visible',
      },
    },
    {
      filter: ['all', ['==', '$type', 'LineString'], ['==', 'class', 'path']],
      type: 'pipeline', // 三维管线样式设置
      id: 'test-pipeline-1',
      paint: {
        'pipeline-type': 'circle', // 三维管线形状设置， circle 圆形管道 rectangle 方形管道
        'pipeline-radius': 2.0, // 当形状为圆形管道时，能设置管道半径
        // 'pipeline-type': 'rectangle',
        // 'pipeline-width': 3.0,  // 当形状为方形管道时，能设置管道宽度
        // 'pipeline-height': 2.0, // 当形状为方形管道时，能设置管道高度
        'pipeline-thickness': 0.5, // 管壁厚度
        fabric: { type: 'Image', uniforms: { color: 'gray' } }, // 可以设置颜色值，也可以设置纹理图片路径
        visibility: 'visible',
      },
      'source-layer': 'road',
      minZoom: 15,
      // maxZoom: 18
    },
    {
      minZoom: 14,
      filter: ['all', ['==', '$type', 'Point'], ['==', 'type', 'Office']],
      type: 'gltf', // 三维模型 gltf 样式设置
      id: 'gltf-test',
      paint: {
        url: '/sample-data/models/man.glb', // 三维模型地址
        scale: 10.0, // 三维模型比例
        rotation: [2, 2, 2], // 三维模型旋转角度
        translation: [0, 0, 10], // 三维模型位置变换设置
      },
      'source-layer': 'poi_label',
    },
    {
      minZoom: 14,
      filter: ['all', ['==', '$type', 'Point'], ['!=', 'type', 'Office']],
      type: 'symbol', // marker 或者文字样式设置
      id: 'poi_label',
      paint: {
        'icon-anchor': 'bottom',
        'icon-image': '/sample-data/assets/ent.png', // 图片 url
        'icon-width': 32,
        'icon-height': 32,
        'text-name': '{name}', // 指定显示文字名称的属性字段
        'text-font': '12px 宋体',
        'text-anchor': 'bottom',
        'text-offset': [0, -30],
        'text-stroke': true,
        'text-stroke-width': 6,
        'text-padding': 6,
        'text-fill-color': 'black',
        'text-stroke-color': 'white',
        'text-background-color': '',
        'text-background-opacity': 0,
      },
      'source-layer': 'poi_label',
    },
  ],
}

# style 样式规则介绍

矢量切片服务样式中使用的数据过滤表达式，基于 mapbox 的 feature-filter (MIT License) 开发。

示例：
// 过滤所有集合类型是 LineString 且 class 属性不等于 tertiary 的数据
['all', ['==', '$type', 'LineString'], ['!==', 'class', 'tertiary']]

支持的表达式语法：
是否存在表达式
feature[key]存在
["has", key]
feature[key]不存在
["!has", key]

比较表达式：
等于， feature[key] = value
["==", key, value]
不等于： feature[key] != value
["!=", key, value]
大于： feature[key] > value
[">", key, value]
大于等于：feature[key] >= value
[">=", key, value]
小于： feature[key] < value
["<", key, value]
小于等于：feature[key] <= value
["<=", key, value]

集合表达式：
在集合中，feature[key] in {v0, ..., vn}
["in", key, v0, ..., vn]
不在集合中，feature[key] !in {v0, ...., vn}
["!in", key, v0, ..., vn]

条件表达式：
条件表达式用于将多个表达式组合起来，组成复合表达式。以下定义中的f0, ..., fn同样都是表达式。
AND条件，f0... fn
["all", f0, ..., fn]
OR条件，f0 ...  fn
["any", f0, ..., fn]
none 条件，f0 ... fn
["none", f0, ..., fn]

key 必须是一个字符串类型的 feature 属性名，或者下列特殊的属性名：
● "$type"： feature的type，可以用于"==","!=", "in", "!in"等过滤器，可能的值有 "Point", "MultiPoint", "LineString", "MultiLineString", "Polygon"和"MultiPolygon"。

# Events

事件的使用请参照上面VectorTileLayer 实例

// 图层可选事件
"ready" // 组件装载后，返回当前实例对象
最后更新时间: 4/28/2023, 11:27:49 AM

← qe-layer-group →