Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Este artigo apresenta como usar openlayers WebGL para cortar camadas e exibir emendas de camada dupla.

1 demanda

• Camada de recorte WebGL, exibição de emenda de camada dupla

2 Análise

• Uso de eventos de pré-renderização e pós-renderização de camada

• WebGL tesouraUso de métodos

O método scissor especifica uma área de recorte, que é usada para limitar a área de desenho à sua área de caixa delimitada.

gl.scissor(x, y, largura, altura);

parâmetro:

x, especifica a coordenada de abcissas do canto inferior esquerdo da área de corte em forma de caixa, o padrão é 0.

y, especifica a ordenada do canto inferior esquerdo da área de corte em forma de caixa, o padrão é 0.

largura, um número não negativo usado para determinar a largura da área de corte da caixa, cujo padrão é a largura da tela.

altura, um número não negativo usado para especificar a altura da área de corte em forma de caixa. O padrão é a altura da tela.

3 implementação

<template>
  <div id="map" class="map"></div>
  <div class="toolbar">
    <el-slider v-model="rateH" :min="1" :max="100" :step="1" @input="handleInput"></el-slider>
    <el-slider v-model="rateV" :min="1" :max="100" :step="1" @input="handleInput"></el-slider>
  </div>
</template>

<script setup lang="ts">
import { Map, View } from 'ol';
import { WebGLTile as WebGLTileLayer } from 'ol/layer';
import { fromLonLat, get } from 'ol/proj';
import { XYZ } from 'ol/source';
import { getRenderPixel } from 'ol/render.js';

const projection = get('EPSG:3857');
const key = '替换为天地图key';
const layerTypeMap = {
  vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
  image: ['img', 'cia'], // [影像底图, 影像注记]
  terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};
let map = null;
const rateH = ref(50);
const rateV = ref(50);

const imageLayer = new WebGLTileLayer({
  source: new XYZ({
    url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap['image'][0]}_w&tk=${key}&x={x}&y={y}&l={z}`,
    projection
  })
});

const terrainLayer = new WebGLTileLayer({
  source: new XYZ({
    url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap['terrain'][0]}_w&tk=${key}&x={x}&y={y}&l={z}`,
    projection
  })
});

onMounted(() => {
  initMap('image');
});

const initMap = (layerType = 'image') => {
  // c: 经纬度 w: 墨卡托
  const matrixSet = 'w';
  map = new Map({
    target: 'map',
    layers: [
      // 底图
      terrainLayer,
      imageLayer,
      // 注记
      new WebGLTileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      })
    ],
    view: new View({
      center: fromLonLat([116.406393, 39.909006]),
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });

  imageLayer.on('prerender', function (event) {
    const gl = event.context;
    gl.enable(gl.SCISSOR_TEST);
    //获取地图[宽,高]像素（数组）
    const mapSize = map.getSize();
    // getRenderPixel从地图视口的CSS像素获取事件的画布上下文的像素。
    // 获取canvas坐标的左下和右上点坐标
    const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
    const topRight = getRenderPixel(event, [mapSize[0], 0]);

    const width = Math.round((topRight[0] - bottomLeft[0]) * (rateH.value / 100));
    const height = Math.round((topRight[1] - bottomLeft[1] )* (rateV.value / 100));;
    gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
  });

  imageLayer.on('postrender', function (event) {
    const gl = event.context;
    gl.disable(gl.SCISSOR_TEST);
  });
};

const handleInput = val => {
  map.render();
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}

.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  .el-slider {
    margin-right: 50px;
  }
  div {
    width: 100px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

Se você quiser unir as camadas e colocá-las no canto superior esquerdo, você só precisa modificar esta frase

 gl.scissor(bottomLeft[0],topRight[1]-height , width, height);
1