[openlayers07]_加载天地图为底图并展示GeoJSON

最新推荐文章于 2024-02-23 10:37:22 发布

Sheyueyu

最新推荐文章于 2024-02-23 10:37:22 发布

阅读量641

点赞数

分类专栏： openlayers webgis 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/sheyueyu/article/details/128924942

版权

openlayers 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

webgis

7 篇文章 1 订阅

订阅专栏

[openlayers07]_加载天地图为底图并展示GeoJSON

1. 加载底图（得申请key）

天地图

2. 创建地图、设置center和投影

// 创建地图
const center = [114.1692, 30.494]; //EPSG:4326
const view = new View({
  center: center, //EPSG:4326
   projection: 'EPSG:4326',
  zoom: 10
})
const map =new Map({
  target: 'map-container',
  view: view,
});

3. 以天地图为底图——影像底图（图层：img_w）

// 以天地图为底图——影像底图（地图瓦片获取）
let img_w_url = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key";
let img_w = new TileLayer({
    source: new XYZ({
        url: img_w_url
    }) 
});

记得替换key

4. 展示GeoJSON数据（图层：layerGeoJson）

// ---------------------------------
// 矢量源
const sourceGeoJson = new VectorSource({
  format: new GeoJSON(),
  url:'./data/hubei.geojson'
});
// 根据矢量源构建图层  layerGeoJson
const layerGeoJson = new VectorLayer({
  source:sourceGeoJson,
});

5. 将两个图层加入map

map.addLayer(img_w); //底图
map.addLayer(layerGeoJson); //由geojson数据构建的图层

注意顺序

6. 效果

完整代码：

main.js

import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
import {Map, View} from 'ol';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON.js';

// 创建地图
const center = [114.1692, 30.494]; //EPSG:4326
const view = new View({
  center: center, //EPSG:4326
   projection: 'EPSG:4326',
  zoom: 10
})
const map =new Map({
  target: 'map-container',
  view: view,
});

// 以天地图为底图——影像底图（地图瓦片获取）
let img_w_url = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=xxxx";
let img_w = new TileLayer({
    source: new XYZ({
        url: img_w_url
    }) //
});
// ---------------------------------
// 矢量源
const sourceGeoJson = new VectorSource({
  format: new GeoJSON(),
  url:'./data/hubei.geojson'
});
// 根据矢量源构建图层  layerGeoJson
const layerGeoJson = new VectorLayer({
  source:sourceGeoJson,
});


map.addLayer(img_w); //底图
map.addLayer(layerGeoJson); //由geojson数据构建的图层

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      @import "node_modules/ol/ol.css";
    </style>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
    <script src="./main.js" type="module"></script>
  </body>
</html>