ol7源码学习之Geometry

Geometry类：Base class for vector geometries.

父类：BaseObject

1、Point

构造函数参数：

Name	Type	Description
coordinates	Coordinate	坐标.
layout	GeometryLayout | undefined	几何图形的坐标布局，指示第三或第四个z (' z ')或测量('M')坐标是可用的。@typedef {'XY' | 'XYZ' | 'XYM' | 'XYZM'} GeometryLayout

方法：

set(key, value, silent)                                                               Sets a value.

get(key)                                                                                   Gets a value

实例：

import Feature from 'ol/Feature';
import {Icon, Style} from 'ol/style';
import Map from 'ol/Map';
import Point from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import Stamen from 'ol/source/Stamen';

function createStyle(src, img) {
  return new Style({
    image: new Icon({
      anchor: [0.5, 0.96],
      crossOrigin: 'anonymous',
      src: src,
      img: img,
      imgSize: img ? [img.width, img.height] : undefined,
    }),
  });
}

const iconFeature = new Feature(new Point([0, 0]));
iconFeature.set('style', createStyle('data/icon.png', undefined));

const map = new Map({
  layers: [
    new TileLayer({
      source: new Stamen({layer: 'watercolor'}),
    }),
    new VectorLayer({
      style: function (feature) {
        return feature.get('style');
      },
      source: new VectorSource({features: [iconFeature]}),
    }),
  ],
  target: document.getElementById('map'),
  view: new View({
    center: [0, 0],
    zoom: 3,
  }),
});

2、Polygon

构造函数参数：

Name	Type	Description
coordinates	!ArrayCoordinate>> | !Array.<number>	定义多边形的线性环阵列。 数组的第一个线性环定义多边形的外边界或表面。 每个后续的线性环在多边形表面上定义一个孔。 一个线性环是顶点坐标的数组，其中第一个坐标和最后一个坐标是等价的。
layout	GeometryLayout | undefined	几何图形的坐标布局
ends	Array.<number> | undefined	Ends (for internal use with flat coordinates).

方法：

clone()                                                                  Make a complete copy of the geometry.

getFirstCoordinate()                                            返回第一个线性环即外边界，用于提取多边形顶点

GeoJSON格式的Polygon：揭示了polygon只是带标签的坐标数组。

{
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [-2e6, -1e6],
            [-1e6, 1e6],
            [0, -1e6],
            [-2e6, -1e6],
          ],
        ],
      },
 },

实例：（clone方法中的实例）

clone() {
    const polygon = new Polygon(
      this.flatCoordinates.slice(),
      this.layout,
      this.ends_.slice()
    );
    polygon.applyProperties(this);
    return polygon;
  }

3、Circle

构造函数参数：

Name	Type	Description
center	Coordinate	圆心坐标
radius	number | undefined	Radius.
layout	GeometryLayout | undefined	Layout.

实例：

const circleFeature = new Feature({
  geometry: new Circle([12127398.797692968, 4063894.123105166], 50),
});
new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
      visible: true,
    }),
    new VectorLayer({
      source: new VectorSource({
        features: [circleFeature],
      }),
    }),
  ],
  target: 'map',
  view: new View({
    center: [12127398.797692968, 4063894.123105166],
    zoom: 19,
  }),
});

 4、MultiPoint

构造函数参数：

Name	Type	Description
coordinates	Array<Coordinate> | Array.<number>	坐标数组
layout	GeometryLayout | undefined	Layout.

实例：

const styles = [
  /* We are using two different styles for the polygons:
   *  - The first style is for the polygons themselves.
   *  - The second style is to draw the vertices of the polygons.
   *    In a custom `geometry` function the vertices of a polygon are
   *    returned as `MultiPoint` geometry, which will be used to render
   *    the style.
   */
  new Style({
    stroke: new Stroke({
      color: 'blue',
      width: 3,
    }),
    fill: new Fill({
      color: 'rgba(0, 0, 255, 0.1)',
    }),
  }),
  new Style({
    image: new CircleStyle({
      radius: 5,
      fill: new Fill({
        color: 'orange',
      }),
    }),
    geometry: function (feature) {
      // return the coordinates of the first ring of the polygon
      //返回第一个线性环，作为顶点的坐标
      const coordinates = feature.getGeometry().getCoordinates()[0];//getFirstCoordinate()
      return new MultiPoint(coordinates);
    },
  }),
];

const geojsonObject = {
  'type': 'FeatureCollection',
  'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:3857',
    },
  },
  'features': [
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [-5e6, 6e6],
            [-5e6, 8e6],
            [-3e6, 8e6],
            [-3e6, 6e6],
            [-5e6, 6e6],
          ],
        ],
      },
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [-2e6, 6e6],
            [-2e6, 8e6],
            [0, 8e6],
            [0, 6e6],
            [-2e6, 6e6],
          ],
        ],
      },
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [1e6, 6e6],
            [1e6, 8e6],
            [3e6, 8e6],
            [3e6, 6e6],
            [1e6, 6e6],
          ],
        ],
      },
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [-2e6, -1e6],
            [-1e6, 1e6],
            [0, -1e6],
            [-2e6, -1e6],
          ],
        ],
      },
    },
  ],
};

const source = new VectorSource({
  features: new GeoJSON().readFeatures(geojsonObject),
});

const layer = new VectorLayer({
  source: source,
  style: styles,
});

const map = new Map({
  layers: [layer],
  target: 'map',
  view: new View({
    center: [0, 3000000],
    zoom: 2,
  }),
});