Κοινή χρήση τεχνολογίας

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

Αυτό το άρθρο εισάγει τον τρόπο χρήσης των ανοιχτών επιπέδων WebGL για την περικοπή επιπέδων και την εμφάνιση ματίσματος δύο επιπέδων.

1 απαίτηση

• Επίπεδο αποκοπής WebGL, οθόνη ματίσματος διπλού στρώματος

2 Ανάλυση

• Χρήση γεγονότων προαπόδοσης και μετά απόδοσης επιπέδου

• WebGL ψαλιδίζωΧρήση μεθόδων

Η μέθοδος ψαλιδιού καθορίζει μια περιοχή αποκοπής, η οποία χρησιμοποιείται για τον περιορισμό της περιοχής σχεδίασης στην οριοθετημένη περιοχή του πλαισίου.

gl.scissor(x, y, πλάτος, ύψος);

παράμετρος:

x, καθορίζει την τετμημένη συντεταγμένη της κάτω αριστερής γωνίας της περιοχής περικοπής σε σχήμα κουτιού, η προεπιλογή είναι 0.

y, καθορίζει τη τεταγμένη της κάτω αριστερής γωνίας της περιοχής περικοπής σε σχήμα κουτιού, η προεπιλογή είναι 0.

πλάτος, ένας μη αρνητικός αριθμός που χρησιμοποιείται για τον προσδιορισμό του πλάτους της περιοχής περικοπής του πλαισίου, ορίζεται από προεπιλογή στο πλάτος του καμβά.

ύψος, ένας μη αρνητικός αριθμός που χρησιμοποιείται για τον καθορισμό του ύψους της περιοχής περικοπής σε σχήμα κουτιού Η προεπιλογή είναι το ύψος του καμβά.

3 υλοποίηση

<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

Εάν θέλετε να συνδέσετε τα στρώματα και να τα τοποθετήσετε στην επάνω αριστερή γωνία, χρειάζεται μόνο να τροποποιήσετε αυτήν την πρόταση

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