openlayers 地图加载geojson绘制边界,点,线,面_openlayer 加载图形要素

openlayers 地图加载geojson绘制边界,点,线,面

• 方法

 // 绘制点 / 线 / 面
    drawContent(geo) {
      if (this.routeLayer) {
        this.map.removeLayer(this.routeLayer);
      }

      let features = [];
      geo.features.forEach((g) => {
        let lineData = g.geometry;
        let routeFeature = "";
        if (lineData.type === "MultiPolygon") {
          routeFeature = new Feature({
            geometry: new MultiPolygon(lineData.coordinates),
          });
          routeFeature.setStyle(
            new Style({
              fill: new Fill({
                color: "rgba(0,0,255, 0.5)", //填充颜色
              }),
              stroke: new Stroke({
                width: 2, //边界宽度
                color: [255, 0, 0, 1], //边界颜色
              }),
            })
          );
        } else if (lineData.type === "Polygon") {
          routeFeature = new Feature({
            geometry: new Polygon(lineData.coordinates),
          });
          routeFeature.setStyle(
            new Style({
              fill: new Fill({
                color: "rgba(0,0,255, 0.5)", //填充颜色
              }),
              stroke: new Stroke({
                width: 2, //边界宽度
                color: [255, 0, 0, 1], //边界颜色
              }),
            })
          );
        } else if (lineData.type === "MultiLineString") {
          routeFeature = new Feature({
            geometry: new MultiLineString(lineData.coordinates),
          });
          routeFeature.setStyle(
            new Style({
              fill: new Fill({
                color: "rgba(0,0,255, 1)", //填充颜色
              }),
              stroke: new Stroke({
                width: 2, //边界宽度
                color: [255, 0, 0, 1], //边界颜色
              }),
            })
          );
        } else if (lineData.type === "LineString") {
          routeFeature = new Feature({
            geometry: new LineString(lineData.coordinates),
          });
          routeFeature.setStyle(
            new Style({
              fill: new Fill({
                color: "rgba(0,0,255, 1)", //填充颜色
              }),
              stroke: new Stroke({
                width: 2, //边界宽度
                color: [255, 0, 0, 1], //边界颜色
              }),
            })
          );
        }

        features.push(routeFeature);

        const center = this.getLast(lineData.coordinates);
        this.map.getView().setCenter(center);
      });
      // 设置图层
      this.routeLayer = new VectorLayer({
        source: new VectorSource({
          features: features,
        }),
      });
      // 添加图层
      this.map.addLayer(this.routeLayer);
    },
    // 获取到第一个坐标点,设置成地图中心
    getLast(list) {
      const isArray = list[0] instanceof Array;
      if (!isArray) {
        return list;
      } else {
        return this.getLast(list[0]);
      }
    },
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

• geojson示例数据
  获取中国行政区geojson: http://datav.aliyun.com/portal/school/atlas/area_selector

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":370321,"name":"xx县","center":[118.101556,36.959773],"centroid":[118.026774,36.992528],"childrenNum":0,"level":"district","acroutes":[100000,370000,370300],"parent":{"adcode":370300}},"geometry":{"type":"MultiPolygon","coordinates":[[[[117.940613,36.891605],[117.940224,36.899505],[117.941006,36.899192],[117.940613,36.891605]]]]}}]}

1
2