Openlayers学习笔记

# 六.WMTS

# 1.瓦片图

  • IGC 数据

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      tilegrid: { WMTS: WMTSTileGrid },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { WMTS },
      proj: { fromLonLat, get: getProjection },
      extent: { getWidth },
    } = ol;
    const map = new Map({
      target: this.$refs.map,
      view: new View({
        zoom: 5,
        center: fromLonLat([5, 45]),
      }),
    });
    const resolutions = [];
    const matrixIds = [];
    const proj3857 = getProjection("EPSG:3857");
    const maxResolution = getWidth(proj3857.getExtent()) / 256;
    for (let i = 0; i < 20; i++) {
      matrixIds[i] = i.toString();
      resolutions[i] = maxResolution / Math.pow(2, i);
    }
    map.addLayer(
      new TileLayer({
        source: new WMTS({
          url: "https://wxs.ign.fr/choisirgeoportail/geoportail/wmts",
          layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
          matrixSet: "PM",
          format: "image/png",
          projection: "EPSG:3857",
          tileGrid: new WMTSTileGrid({
            origin: [-20037508, 20037508],
            resolutions: resolutions,
            matrixIds: matrixIds,
          }),
          style: "normal",
          attributions:
            '<a href="https://www.ign.fr/" target="_blank">' +
            '<img src="https://wxs.ign.fr/static/logos/IGN/IGN.gif" title="Institut national de l\'' +
            'information géographique et forestière" alt="IGN"></a>',
        }),
      })
    );
  },
};
</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

# 2.打印到缩放示例

查看代码详情 
<template>
  <div>
    <div class="wrapper">
      <div ref="map" class="map"></div>
    </div>
    <form class="form">
      <label for="format">页面大小 </label>
      <select id="format">
        <option value="a0">A0 (slow)</option>
        <option value="a1">A1</option>
        <option value="a2">A2</option>
        <option value="a3">A3</option>
        <option value="a4" selected>A4</option>
        <option value="a5">A5 (fast)</option>
      </select>
      <label for="resolution">分辨率 </label>
      <select id="resolution">
        <option value="72">72 dpi (fast)</option>
        <option value="150">150 dpi</option>
        <option value="200" selected>200 dpi</option>
        <option value="300">300 dpi (slow)</option>
      </select>
      <label for="scale">比例 </label>
      <select id="scale">
        <option value="500">1:500000</option>
        <option value="250" selected>1:250000</option>
        <option value="100">1:100000</option>
        <option value="50">1:50000</option>
        <option value="25">1:25000</option>
        <option value="10">1:10000</option>
      </select>
      <button id="export-pdf">导出 PDF</button>
    </form>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      format: { WMTSCapabilities },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: {
        WMTS: { optionsFromCapabilities },
      },
      control: { ScaleLine, defaults: defaultControls },
      proj: {
        getPointResolution,
        get: getProjection,
        proj4: { register },
      },
    } = ol;
    this.$proj4.defs(
      "EPSG:27700",
      "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 " +
        "+x_0=400000 +y_0=-100000 +ellps=airy " +
        "+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 " +
        "+units=m +no_defs"
    );
    register(this.$proj4);
    const proj27700 = getProjection("EPSG:27700");
    proj27700.setExtent([0, 0, 700000, 1300000]);
    const raster = new TileLayer();
    const url =
      "https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Raster/MapServer/WMTS";
    fetch(url)
      .then(function (response) {
        return response.text();
      })
      .then(function (text) {
        const result = new WMTSCapabilities().read(text);
        const options = optionsFromCapabilities(result, {
          layer: "OS_Open_Raster",
        });
        options.attributions =
          "Contains OS data © Crown Copyright and database right " +
          new Date().getFullYear();
        options.crossOrigin = "";
        options.projection = proj27700;
        options.wrapX = false;
        raster.setSource(new ol.source.WMTS(options));
      });
    const map = new Map({
      layers: [raster],
      controls: defaultControls({
        attributionOptions: { collapsible: false },
      }),
      target: this.$refs.map,
      view: new View({
        center: [373500, 436500],
        projection: proj27700,
        zoom: 7,
      }),
    });
    const scaleLine = new ScaleLine({ bar: true, text: true, minWidth: 125 });
    map.addControl(scaleLine);
    const dims = {
      a0: [1189, 841],
      a1: [841, 594],
      a2: [594, 420],
      a3: [420, 297],
      a4: [297, 210],
      a5: [210, 148],
    };
    const exportOptions = {
      useCORS: true,
      ignoreElements: function (element) {
        const className = element.className || "";
        return !(
          className.indexOf("ol-control") === -1 ||
          className.indexOf("ol-scale") > -1 ||
          (className.indexOf("ol-attribution") > -1 &&
            className.indexOf("ol-uncollapsible"))
        );
      },
    };
    const exportButton = document.getElementById("export-pdf");
    exportButton.addEventListener(
      "click",
      function () {
        exportButton.disabled = true;
        document.body.style.cursor = "progress";
        const format = document.getElementById("format").value;
        const resolution = document.getElementById("resolution").value;
        const scale = document.getElementById("scale").value;
        const dim = dims[format];
        const width = Math.round((dim[0] * resolution) / 25.4);
        const height = Math.round((dim[1] * resolution) / 25.4);
        const viewResolution = map.getView().getResolution();
        const scaleResolution =
          scale /
          getPointResolution(
            map.getView().getProjection(),
            resolution / 25.4,
            map.getView().getCenter()
          );
        map.once("rendercomplete", function () {
          exportOptions.width = width;
          exportOptions.height = height;
          html2canvas(map.getViewport(), exportOptions).then(function (canvas) {
            const pdf = new jspdf.jsPDF("landscape", undefined, format);
            pdf.addImage(
              canvas.toDataURL("image/jpeg"),
              "JPEG",
              0,
              0,
              dim[0],
              dim[1]
            );
            pdf.save("map.pdf");
            scaleLine.setDpi();
            map.getTargetElement().style.width = "";
            map.getTargetElement().style.height = "";
            map.updateSize();
            map.getView().setResolution(viewResolution);
            exportButton.disabled = false;
            document.body.style.cursor = "auto";
          });
        });
        scaleLine.setDpi(resolution);
        map.getTargetElement().style.width = width + "px";
        map.getTargetElement().style.height = height + "px";
        map.updateSize();
        map.getView().setResolution(scaleResolution);
      },
      false
    );
  },
};
</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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

# 3.光栅重新投影

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <form class="form-inline">
      <div class="col-md-3">
        <label for="base-layer">底图:</label>
        <select id="base-layer">
          <option value="osm">OSM (EPSG:3857)</option>
          <option value="wms4326">WMS (EPSG:4326)</option>
        </select>
      </div>
      <div class="col-md-4">
        <label for="overlay-layer">重叠地图:</label>
        <select id="overlay-layer">
          <option value="bng">英国国家电网(EPSG:27700)</option>
          <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
          <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
          <option value="states">United States (EPSG:3857)</option>
        </select>
      </div>
      <div class="col-md-5">
        <label for="view-projection">观察投影:</label>
        <select id="view-projection">
          <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
          <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
          <option value="ESRI:54009">Mollweide (ESRI:54009)</option>
          <option value="EPSG:27700">British National Grid (EPSG:27700)</option>
          <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
          <option value="EPSG:2163">
            US National Atlas Equal Area (EPSG:2163)
          </option>
          <option value="EPSG:3413">
            NSIDC Polar Stereographic North (EPSG:3413)
          </option>
          <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
        </select>
      </div>
    </form>
    <form class="form-inline">
      <div class="col-md-auto">
        <label>
          渲染重投影边:&nbsp;
          <input type="checkbox" id="render-edges" />
        </label>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      tilegrid: { TileGrid },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: {
        WMTS: { optionsFromCapabilities },
        OSM,
        TileImage,
        TileWMS,
      },
      format: { WMTSCapabilities },
      proj: {
        get: getProjection,
        transformExtent,
        proj4: { register },
      },
      extent: { getCenter, getWidth },
    } = ol;
    this.$proj4.defs(
      "EPSG:27700",
      "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 " +
        "+x_0=400000 +y_0=-100000 +ellps=airy " +
        "+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 " +
        "+units=m +no_defs"
    );
    this.$proj4.defs(
      "EPSG:23032",
      "+proj=utm +zone=32 +ellps=intl " +
        "+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs"
    );
    this.$proj4.defs(
      "EPSG:5479",
      "+proj=lcc +lat_1=-76.66666666666667 +lat_2=" +
        "-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 " +
        "+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    );
    this.$proj4.defs(
      "EPSG:21781",
      "+proj=somerc +lat_0=46.95240555555556 " +
        "+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel " +
        "+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs"
    );
    this.$proj4.defs(
      "EPSG:3413",
      "+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 " +
        "+x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"
    );
    this.$proj4.defs(
      "EPSG:2163",
      "+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 " +
        "+a=6370997 +b=6370997 +units=m +no_defs"
    );
    this.$proj4.defs(
      "ESRI:54009",
      "+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 " + "+units=m +no_defs"
    );
    register(this.$proj4);
    const proj27700 = getProjection("EPSG:27700");
    proj27700.setExtent([-650000, -150000, 1350000, 1450000]);
    const proj23032 = getProjection("EPSG:23032");
    proj23032.setExtent([-1206118.71, 4021309.92, 1295389.0, 8051813.28]);
    const proj5479 = getProjection("EPSG:5479");
    proj5479.setExtent([6825737.53, 4189159.8, 9633741.96, 5782472.71]);
    const proj21781 = getProjection("EPSG:21781");
    proj21781.setExtent([485071.54, 75346.36, 828515.78, 299941.84]);
    const proj3413 = getProjection("EPSG:3413");
    proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
    const proj2163 = getProjection("EPSG:2163");
    proj2163.setExtent([
      -8040784.5135, -2577524.921, 3668901.4484, 4785105.1096,
    ]);
    const proj54009 = getProjection("ESRI:54009");
    proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
    const layers = {};
    layers["osm"] = new TileLayer({
      source: new OSM(),
    });
    layers["wms4326"] = new TileLayer({
      source: new TileWMS({
        url: "https://ahocevar.com/geoserver/wms",
        crossOrigin: "",
        params: {
          LAYERS: "ne:NE1_HR_LC_SR_W_DR",
          TILED: true,
        },
        projection: "EPSG:4326",
      }),
    });
    layers["wms21781"] = new TileLayer({
      source: new TileWMS({
        attributions:
          '© <a href="https://shop.swisstopo.admin.ch/en/products/maps/national/lk1000"' +
          'target="_blank">Pixelmap 1:1000000 / geo.admin.ch</a>',
        crossOrigin: "anonymous",
        params: {
          LAYERS: "ch.swisstopo.pixelkarte-farbe-pk1000.noscale",
          FORMAT: "image/jpeg",
        },
        url: "https://wms.geo.admin.ch/",
        projection: "EPSG:21781",
      }),
    });
    const parser = new WMTSCapabilities();
    layers["wmts3413"] = new TileLayer();
    const urlA =
      "https://map1.vis.earthdata.nasa.gov/wmts-arctic/" +
      "wmts.cgi?SERVICE=WMTS&request=GetCapabilities";
    fetch(urlA)
      .then(function (response) {
        return response.text();
      })
      .then(function (text) {
        const result = parser.read(text);
        const options = optionsFromCapabilities(result, {
          layer: "OSM_Land_Mask",
          matrixSet: "EPSG3413_250m",
        });
        options.crossOrigin = "";
        options.projection = "EPSG:3413";
        options.wrapX = false;
        layers["wmts3413"].setSource(new ol.source.WMTS(options));
      });

    layers["bng"] = new TileLayer();
    const urlB =
      "https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Raster/MapServer/WMTS";
    fetch(urlB)
      .then(function (response) {
        return response.text();
      })
      .then(function (text) {
        const result = parser.read(text);
        const options = optionsFromCapabilities(result, {
          layer: "OS_Open_Raster",
        });
        options.attributions =
          "Contains OS data © Crown Copyright and database right " +
          new Date().getFullYear();
        options.crossOrigin = "";
        options.projection = "EPSG:27700";
        options.wrapX = false;
        layers["bng"].setSource(new ol.source.WMTS(options));
      });

    const startResolution =
      getWidth(getProjection("EPSG:3857").getExtent()) / 256;
    const resolutions = new Array(22);
    for (let i = 0, ii = resolutions.length; i < ii; ++i) {
      resolutions[i] = startResolution / Math.pow(2, i);
    }

    layers["states"] = new TileLayer({
      source: new TileWMS({
        url: "https://ahocevar.com/geoserver/wms",
        crossOrigin: "",
        params: { LAYERS: "topp:states" },
        serverType: "geoserver",
        tileGrid: new TileGrid({
          extent: [-13884991, 2870341, -7455066, 6338219],
          resolutions: resolutions,
          tileSize: [512, 256],
        }),
        projection: "EPSG:3857",
      }),
    });
    const map = new Map({
      layers: [layers["osm"], layers["bng"]],
      target: this.$refs.map,
      view: new View({
        projection: "EPSG:3857",
        center: [12579156, 3274244],
        zoom: 2,
      }),
    });
    const baseLayerSelect = document.getElementById("base-layer");
    const overlayLayerSelect = document.getElementById("overlay-layer");
    const viewProjSelect = document.getElementById("view-projection");
    const renderEdgesCheckbox = document.getElementById("render-edges");
    let renderEdges = false;
    function updateViewProjection() {
      const newProj = getProjection(viewProjSelect.value);
      const newProjExtent = newProj.getExtent();
      const newView = new View({
        projection: newProj,
        center: getCenter(newProjExtent || [0, 0, 0, 0]),
        zoom: 0,
        extent: newProjExtent || undefined,
      });
      map.setView(newView);
      if (newProj.isGlobal()) {
        layers["bng"].setExtent(
          transformExtent(proj27700.getExtent(), proj27700, newProj, 2)
        );
      } else {
        layers["bng"].setExtent(undefined);
      }
    }
    viewProjSelect.addEventListener("change", updateViewProjection);
    updateViewProjection();
    const updateRenderEdgesOnLayer = function (layer) {
      if (layer instanceof TileLayer) {
        const source = layer.getSource();
        if (source instanceof TileImage) {
          source.setRenderReprojectionEdges(renderEdges);
        }
      }
    };
    baseLayerSelect.addEventListener("change", function () {
      const layer = layers[baseLayerSelect.value];
      if (layer) {
        layer.setOpacity(1);
        updateRenderEdgesOnLayer(layer);
        map.getLayers().setAt(0, layer);
      }
    });
    overlayLayerSelect.addEventListener("change", function () {
      const layer = layers[overlayLayerSelect.value];
      if (layer) {
        layer.setOpacity(0.7);
        updateRenderEdgesOnLayer(layer);
        map.getLayers().setAt(1, layer);
      }
    });
    renderEdgesCheckbox.addEventListener("change", function () {
      renderEdges = renderEdgesCheckbox.checked;
      map.getLayers().forEach(function (layer) {
        updateRenderEdgesOnLayer(layer);
      });
    });
  },
};
</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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284

# 4.WMTS

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      tilegrid: { WMTS: WMTSTileGrid },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { OSM, WMTS },
      extent: { getTopLeft, getWidth },
      proj: { get: getProjection },
    } = ol

    const projection = getProjection("EPSG:3857")
    const projectionExtent = projection.getExtent()
    const size = getWidth(projectionExtent) / 256
    const resolutions = new Array(19)
    const matrixIds = new Array(19)
    for (let z = 0; z < 19; ++z) {
      resolutions[z] = size / Math.pow(2, z)
      matrixIds[z] = z
    }

    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        new TileLayer({
          opacity: 0.7,
          source: new WMTS({
            attributions:
              'Tiles © <a href="https://mrdata.usgs.gov/geology/state/"' +
              ' target="_blank">USGS</a>',
            url: "https://mrdata.usgs.gov/mapcache/wmts",
            layer: "sgmc2",
            matrixSet: "GoogleMapsCompatible",
            format: "image/png",
            projection: projection,
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),
              resolutions: resolutions,
              matrixIds: matrixIds,
            }),
            style: "default",
            wrapX: true,
          }),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [-11158582, 4813697],
        zoom: 4,
      }),
    })
  },
}
</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

← 七.XYZ →