Openlayers学习笔记

# 二.中国地图

# 1.中国地图

查看代码详情 
<template>
  <div ref="map" class="map" style="position: relative">
    <button
      style="position: absolute; z-index: 100; right: 0"
      @click="handleClick"
    >
      {{ !show ? "显示" : "隐藏" }}底图
    </button>
  </div>
</template>
  
  <script>
let {
  Map,
  View,
  Feature,
  style: { Style, Stroke, Fill },
  layer: { Vector: VectorLayer, Tile: TileLayer },
  geom: { Polygon, MultiPolygon },
  source: { XYZ, Vector: VectorSource },
  proj: { fromLonLat },
  control: { OverviewMap, defaults },
} = ol;
export default {
  data() {
    return {
      layer: "",
      show: true,
    };
  },
  async mounted() {
    let { data } = await this.$axios.get(
      this.$withBase("/data/100000_full.json")
    );
    let layer = new TileLayer(
      {
        source: new XYZ({
          url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunityENG/MapServer/tile/{z}/{y}/{x}",
        }),
      },
      { zoomOffset: 1 }
    );
    this.layer = layer;
    let map = new Map({
      target: this.$refs.map,
      controls: defaults({
        zoom: true,
      }).extend([]),
      layers: [layer],
      view: new View({
        center: fromLonLat([108.522097, 37.272848]),
        zoom: 2,
        maxZoom: 19,
        minZoom: 1,
      }),
    });
    let areaLayer = new VectorLayer({
      source: new VectorSource({
        features: [],
      }),
    });
    map.addLayer(areaLayer);

    let areaFeature = null;
    data.features.forEach((g) => {
      let lineData = g;
      if (lineData.geometry.type == "MultiPolygon") {
        areaFeature = new Feature({
          geometry: new MultiPolygon(lineData.geometry.coordinates).transform(
            "EPSG:4326",
            "EPSG:3857"
          ),
        });
      } else if (lineData.geometry.type == "Polygon") {
        areaFeature = new Feature({
          geometry: new Polygon(lineData.geometry.coordinates).transform(
            "EPSG:4326",
            "EPSG:3857"
          ),
        });
      }
      areaFeature.setStyle(
        new Style({
          fill: new Fill({ color: "#4e98f444" }),
          stroke: new Stroke({
            width: 1,
            color: [71, 137, 227, 1],
          }),
        })
      );
      areaLayer.getSource().addFeatures([areaFeature]);
    });
  },
  methods: {
    handleClick() {
      this.show = !this.show;
      this.layer.setVisible(this.show);
    },
  },
};
</script>
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

# 2.中国地图

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>
  
  <script>
let {
  format: { TopoJSON },
  Map,
  View,
  layer: { Tile: TileLayer, Vector: VectorLayer },
  source: { XYZ, Vector: VectorSource },
  style: { Fill, Stroke, Style },
} = ol;
export default {
  async mounted() {
    let chinaLayer = new VectorLayer({
      source: new VectorSource({
        url: this.$withBase("/data/topojson/province.json"),
        format: new TopoJSON(),
      }),
      style: new Style({
        fill: new Fill({
          color: "#eeeeee",
        }),
        stroke: new Stroke({
          color: "#c3c3c4",
          width: 1,
        }),
      }),
    });
    const map = new Map({
      layers: [chinaLayer],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 3,
        maxZoom: 19,
        minZoom: 1,
      }),
    });
    function addHighlightLayer(layer) {
      layer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: () => {
          const style = new ol.style.Style({
            fill: new ol.style.Fill({
              color: "raba(0,0,0,1)",
            }),
            stroke: new ol.style.Stroke({
              color: "rgba(255, 255, 255, 1)",
              width: 1,
            }),
          });
          return style;
        },
      });
      map.addLayer(layer);
      onBindLayerClick(layer);
      return layer;
    }

    function onBindLayerClick(layer) {
      layer.on("precompose", (evt) => {
        evt.context.shadowBlur = 25;
        evt.context.shadowColor = "black";
      });
      layer.on("postcompose", (evt) => {
        evt.context.shadowBlur = 0;
        evt.context.shadowColor = "black";
      });
    }
    let res = await this.$axios({
      type: "get",
      url: this.$withBase("/data/topojson/province.json"),
    });
    var features = new ol.format.TopoJSON({
      featureProjection: "EPSG:3857",
    }).readFeatures(res.data);
    var f = features[0];
    chinaLayer.getSource().addFeature(f);
    //添加阴影的图层
    var highlightLayer = addHighlightLayer(chinaLayer);

    //新增以下代码
    highlightLayer.setStyle(() => {
      return new ol.style.Style({
        fill: new ol.style.Fill({
          color:
            f.style && f.style.getFill ? f.style.getFill().getColor() : "#aaa",
        }),
        stroke: new ol.style.Stroke({
          color: "rgba(255, 255, 255, 0.2)",
          width: 2,
        }),
      });
    });
    highlightLayer.getSource().addFeature(f);
  },
};
</script>
  ```
  
  <style>
.map-container {
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</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

# 3.世界地图

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>
  
  <script>
let {
  format: { TopoJSON },
  Map,
  View,
  layer: { Tile: TileLayer, Vector: VectorLayer },
  source: { XYZ, Vector: VectorSource },
  style: { Fill, Stroke, Style },
} = ol;
export default {
  mounted() {
    const map = new Map({
      layers: [
        new VectorLayer({
          source: new VectorSource({
            url: this.$withBase("/data/topojson/world-110m.json"),
            format: new TopoJSON({
              layers: ["countries"],
            }),
            overlaps: false,
          }),
          style: new Style({
            fill: new Fill({
              color: "#eeeeee",
            }),
            stroke: new Stroke({
              color: "#c3c3c4",
              width: 1,
            }),
          }),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 1.5,
        maxZoom: 19,
        minZoom: 1,
      }),
    });
  },
};
</script>
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

← 三.地震标记 →