自定义 WebGL 层视图

1
2
3
4
5
6
7
8
9
10
11
12
const CustomLayer = GraphicsLayer.createSubclass({
  createLayerView: function(view) {
    // We only support MapView, so we only need to return a
    // custom layer view for the `2d` case.
    if (view.type === "2d") {
      return new CustomLayerView2D({
        view: view,
        layer: this
      });
    }
  }
});

1
2
3
4
5
6
const CustomLayer = Layer.createSubclass({
  properties: {
    blendMode: {},
    effect: {}
  }
});

1
2
3
4
5
6
// Subclass the custom layer view from BaseLayerViewGL2D.
const CustomLayerView2D = BaseLayerViewGL2D.createSubclass({
  // Locations of the two vertex attributes that we use. They
  // will be bound to the shader program before linking.
  aPosition: 0,
  aOffset: 1,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  // Called once a custom layer is added to the map.layers collection and this layer view is instantiated.
  attach: function () {
    ...
  },

  // Called every time a frame is rendered.
  render: function (renderParameters) {
    ...
  },

  // Called once a custom layer is removed from the map.layers collection and this layer view is destroyed.
  detach: function () {
    ...
  },

  // Called by the map view or the popup view when hit testing is required.
  hitTest: function(mapPoint, screenPoint) {
    ...
  },

1
2
3
4
5
  // Called internally from render().
  updatePositions: function (renderParameters) {
    ...
  }
});

1
2
3
4
5
6
7
8
this.needsUpdate = false;

const requestUpdate = function() {
  this.needsUpdate = true;
  this.requestRender();
}.bind(this);

watchUtils.on(this, "layer.graphics", "change", requestUpdate, requestUpdate, requestUpdate);

1
const gl = this.context;

1
2
3
4
5
6
7
8
9
10
11
12
13
const vertexSource = `
  precision mediump float;
  uniform mat3 u_transform;
  uniform mat3 u_display;
  attribute vec2 a_position;
  attribute vec2 a_offset;
  varying vec2 v_offset;
  const float SIZE = 70.0;
  void main(void) {
      gl_Position.xy = (u_display * (u_transform * vec3(a_position, 1.0) + vec3(a_offset * SIZE, 0.0))).xy;
      gl_Position.zw = vec2(0.0, 1.0);
      v_offset = a_offset;
  }`;

1
2
3
4
5
6
7
8
9
10
11
12
13
const fragmentSource = `
  precision mediump float;
  uniform float u_current_time;
  varying vec2 v_offset;
  const float PI = 3.14159;
  const float N_RINGS = 3.0;
  const vec3 COLOR = vec3(0.23, 0.43, 0.70);
  const float FREQ = 1.0;
  void main(void) {
      float l = length(v_offset);
      float intensity = clamp(cos(l * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (l * 2.0 * N_RINGS - FREQ * u_current_time)), 0.0, 1.0);
      gl_FragColor = vec4(COLOR * intensity, intensity);
  }`;

1
2
3
this.uTransform = gl.getUniformLocation(this.program, "u_transform");
this.uDisplay = gl.getUniformLocation(this.program, "u_display");
this.uCurrentTime = gl.getUniformLocation(this.program, "u_current_time");

1
2
3
this.vertexBuffer = gl.createBuffer();
this.indexBuffer = gl.createBuffer();
this.indexBufferSize = 0;

1
this.centerAtLastUpdate = vec2.fromValues(this.view.state.center[0], this.view.state.center[1]);

1
2
3
4
5
6
7
this.watcher.remove();

const gl = this.context;

gl.deleteBuffer(this.vertexBuffer);
gl.deleteBuffer(this.indexBuffer);
gl.deleteProgram(this.program);

1
2
const gl = renderParameters.context;
const state = renderParameters.state;

1
this.updatePositions(renderParameters);

1
2
3
if (this.indexBufferSize === 0) {
  return;
}

1
2
3
4
5
6
7
8
9
mat3.identity(this.transform);
this.screenTranslation[0] = (devicePixelRatio * state.size[0]) / 2;
this.screenTranslation[1] = (devicePixelRatio * state.size[1]) / 2;
mat3.translate(this.transform, this.transform, this.screenTranslation);
mat3.rotate(this.transform, this.transform, (Math.PI * state.rotation) / 180);
this.screenScaling[0] = devicePixelRatio / view.state.resolution;
this.screenScaling[1] = -devicePixelRatio / view.state.resolution;
mat3.scale(this.transform, this.transform, this.screenScaling);
mat3.translate(this.transform, this.transform, this.translationToCenter);

1
2
this.translationToCenter[0] = -state.center[0];
this.translationToCenter[1] = -state.center[1];

1
2
this.display[0] = 2 / (devicePixelRatio * state.size[0]);
this.display[4] = -2 / (devicePixelRatio * state.size[1]);

1
2
3
4
5
6
7
8
9
10
11
12
13
gl.useProgram(this.program);
gl.uniformMatrix3fv(this.uTransform, false, this.transform);
gl.uniformMatrix3fv(this.uDisplay, false, this.display);
gl.uniform1f(this.uCurrentTime, performance.now() / 1000.0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.enableVertexAttribArray(this.aPosition);
gl.enableVertexAttribArray(this.aOffset);
gl.vertexAttribPointer(this.aPosition, 2, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(this.aOffset, 2, gl.FLOAT, false, 16, 8);
gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.drawElements(gl.TRIANGLES, this.indexBufferSize, gl.UNSIGNED_SHORT, 0);

1
this.requestRender();

1
2
3
const gl = renderParameters.context;
const stationary = renderParameters.stationary;
const state = renderParameters.state;

1
2
3
4
5
6
if (!stationary) {
  this.translationToCenter[0] = this.centerAtLastUpdate[0] - state.center[0];
  this.translationToCenter[1] = this.centerAtLastUpdate[1] - state.center[1];
  this.requestRender();
  return;
}

1
2
3
if (!this.needsUpdate && this.translationToCenter[0] === 0 && this.translationToCenter[1] === 0) {
  return;
}

1
2
3
4
this.centerAtLastUpdate.set(state.center);
this.translationToCenter[0] = 0;
this.translationToCenter[1] = 0;
this.needsUpdate = false;

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
const graphics = this.layer.graphics;

gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
const vertexData = new Float32Array(16 * graphics.length);

let i = 0;
graphics.forEach(
  (graphic) => {
    const point = graphic.geometry;

    // The (x, y) position is relative to the encoded center.
    const x = point.x - this.centerAtLastUpdate[0];
    const y = point.y - this.centerAtLastUpdate[1];

    vertexData[i * 16 + 0] = x;
    vertexData[i * 16 + 1] = y;
    vertexData[i * 16 + 2] = -0.5;
    vertexData[i * 16 + 3] = -0.5;
    vertexData[i * 16 + 4] = x;
    vertexData[i * 16 + 5] = y;
    vertexData[i * 16 + 6] = 0.5;
    vertexData[i * 16 + 7] = -0.5;
    vertexData[i * 16 + 8] = x;
    vertexData[i * 16 + 9] = y;
    vertexData[i * 16 + 10] = -0.5;
    vertexData[i * 16 + 11] = 0.5;
    vertexData[i * 16 + 12] = x;
    vertexData[i * 16 + 13] = y;
    vertexData[i * 16 + 14] = 0.5;
    vertexData[i * 16 + 15] = 0.5;

    ++i;
  }.bind(this)
);

1
2
3
4
5
6
7
8
9
10
11
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);

const indexData = new Uint16Array(6 * graphics.length);
for (let i = 0; i < graphics.length; ++i) {
  indexData[i * 6 + 0] = i * 4 + 0;
  indexData[i * 6 + 1] = i * 4 + 1;
  indexData[i * 6 + 2] = i * 4 + 2;
  indexData[i * 6 + 3] = i * 4 + 1;
  indexData[i * 6 + 4] = i * 4 + 3;
  indexData[i * 6 + 5] = i * 4 + 2;
}

1
2
3
4
5
6
7
// The map view.
const view = this.view;

if (this.layer.graphics.length === 0) {
  // Nothing to do.
  return promiseUtils.resolve([]);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const distances = this.layer.graphics.map((graphic) => {
  const graphicPoint = view.toScreen(graphic.geometry);
  return Math.sqrt((graphicPoint.x - x) * (graphicPoint.x - x) + (graphicPoint.y - y) * (graphicPoint.y - y));
});

let minIndex = 0;

distances.forEach((distance, i) => {
  if (distance < distances.getItemAt(minIndex)) {
    minIndex = i;
  }
});

const minDistance = distances.getItemAt(minIndex);

1
2
3
if (minDistance > 35) {
  return promiseUtils.resolve([]);
}

1
2
3
const graphic = this.layer.graphics.getItemAt(minIndex);
graphic.sourceLayer = this.layer;
return promiseUtils.resolve([graphic]);