# 二.中国地图

# 1.中国地图

查看代码详情

<template>
  <WebOLChina type="china"> </WebOLChina>
  <!-- <WebOLChina type="province"> </WebOLChina> -->
  <!-- <WebOLChina type="world"> </WebOLChina> -->
</template>
  
<script>
export default {
  data() {
    return {};
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# 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: "../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: "../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: "./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

← 一.车辆轨迹三.地震标记 →