Technology sharing

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

Articulus hic introducit interpretes WebGL uti ad stratis seges et duplicem plicatilem ostentationem.

1 demand

• WebGL iacuit tonsura, duplex iacuit plicatio ostentationis

2 Analysis

• Usus iacuit preender and posterus eventus

• WebGL scissorUsus methodorum

Methodus scissoris aream tonsuram designat, quae spatium tractum finire solebat ad aream cistae suae terminandam.

gl.scissor(x, y, latitudo, altitudo);

modulus;

x, abscissa coordinata inferioris sinistri anguli cistae informibus tondendi in area specificat, defalta 0 est.

y, ordinatam inferiorem sinistram anguli capsulae informibus tondentes aream designat, defalta 0 est.

latitudo, numerus non-negativus adhibitus ad determinandam latitudinem capsulae tondendi, defaltam ad latitudinem carbasi.

altitudo, numerus non-negativus, qui ad magnitudinem pixidis informibus tondendam aream designandam adhibitus est.

3 implementation

<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

Si stratas splicere vis et eas in angulo sinistro superiore collocare, tantum debes hanc sententiam mutare

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