【openlayers框架学习】三：图层Layers的概念及瓦片图层的使用

最新推荐文章于 2025-09-13 22:08:00 发布

原创最新推荐文章于 2025-09-13 22:08:00 发布 · 758 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #笔记 #javascript #前端框架

该文章已生成可运行项目，

文章目录

- openlayers入门

openlayers入门

08 openlayers中图层的基本概念

图层Layers分为三种：
1.瓦片图层（tilelayer加载底图）
2.静态图层（Imagelayer加载静态图片）
3.矢量图层（VectorLayer通常加载矢量数据、添加地图标注）

09 openlayers中切换地图（setZIndex）

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="map"></div>
    <div class="btns">
      <button>去到北京</button>
      <button>向上移动</button>
      <button>向下移动</button>
      <button>向左移动</button>
      <button>向右移动</button>
      <button>切换到城市地图</button>
      <button>切换到卫星地图</button>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js

import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';

const view = new View({
    center: [114.25, 30.59],
    zoom: 10,
    projection: "EPSG:4326",
});
//城市矢量地图
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
//卫星底图
const satelliteSource = new XYZ({
    url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?&style=6&x={x}&y={y}&z={z}',
});
//标记底图
const markSource = new XYZ({
    url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const satelliteLayer = new TileLayer({
    source: satelliteSource,
});
const markLayer = new TileLayer({
    source: markSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer, satelliteLayer, markLayer],
});
//点击按钮
const btn1 = document.querySelectorAll(".btns button")[0];
const btn2 = document.querySelectorAll(".btns button")[1];
const btn3 = document.querySelectorAll(".btns button")[2];
const btn4 = document.querySelectorAll(".btns button")[3];
const btn5 = document.querySelectorAll(".btns button")[4];
const btn6 = document.querySelectorAll(".btns button")[5];
const btn7 = document.querySelectorAll(".btns button")[6];
btn1.onclick = function(){
    //重新设置center中心点-北京
    // view.setCenter([116.46, 39.92]);
    view.animate({
        center: [116.46, 39.92],
        zoom: 6,
        duration: 2000,
    });
}
btn2.onclick = function(){
    //获取当前的中心点
    const center = view.getCenter();    //[经度，纬度]
    //重新设置center中心点
    // view.setCenter([center[0], center[1]+0.1]);
    center[1] += 0.1;
    view.setCenter(center);
    map.render();   //刷新视图
}
btn3.onclick = function(){
    //获取当前的中心点
    const center = view.getCenter();    //[经度，纬度]
    center[1] -= 0.1;
    view.setCenter(center);
    map.render();   //刷新视图
}
btn4.onclick = function(){
    //获取当前的中心点
    const center = view.getCenter();    //[经度，纬度]
    center[0] -= 0.1;
    view.setCenter(center);
    map.render();   //刷新视图
}
btn5.onclick = function(){
    //获取当前的中心点
    const center = view.getCenter();    //[经度，纬度]
    center[0] += 0.1;
    view.setCenter(center);
    map.render();   //刷新视图
}
//希望切换底图
btn6.onclick = function(){
   //图层按照先后顺序依次绘制到map，如果希望展示其中某一个，将其的层级关系置顶即可
   gaodeLayer.setZIndex(100);
   satelliteLayer.setZIndex(49);
   markLayer.setZIndex(50);
}
btn7.onclick = function(){
   gaodeLayer.setZIndex(50);
   satelliteLayer.setZIndex(99);
   markLayer.setZIndex(100);
}

style.css

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#map{
  width: 100vw;
  height: 100vh;
}
.btns{
  position: fixed;
  left: 50px;
  top: 10px;
}

10 openlayers中切换底图1 (addLayer和removeLayer)

//希望切换底图
btn6.onclick = function(){
   // 图层按照先后顺序依次绘制到map，如果希望展示其中某一个，将其的层级关系置顶即可
//    gaodeLayer.setZIndex(100);
//    satelliteLayer.setZIndex(49);
//    markLayer.setZIndex(50);
   map.addLayer(gaodeLayer);
}
btn7.onclick = function(){
//    gaodeLayer.setZIndex(50);
//    satelliteLayer.setZIndex(99);
//    markLayer.setZIndex(100);
   // 去掉最后城市矢量图层
   map.removeLayer(gaodeLayer);
}

11 openlayers切换底图2（setVisible）

//希望切换底图
btn6.onclick = function(){
   // 图层按照先后顺序依次绘制到map，如果希望展示其中某一个，将其的层级关系置顶即可
//    gaodeLayer.setZIndex(100);
//    satelliteLayer.setZIndex(49);
//    markLayer.setZIndex(50);
//    map.addLayer(gaodeLayer);
   gaodeLayer.setVisible(true);
}
btn7.onclick = function(){
//    gaodeLayer.setZIndex(50);
//    satelliteLayer.setZIndex(99);
//    markLayer.setZIndex(100);
   // 去掉最后城市矢量图层
//    map.removeLayer(gaodeLayer);
   gaodeLayer.setVisible(false);
}

12 openlayers切换底图3

地图Map的结构
Map->layers:TileLayer->source:XYZ->url:'http://xxx/xxx?x={}&y={}&z={}'

13 openlayers加载天地图

天地图：国家地理信息公共服务平台

http://lbs.tianditu.gov.cn/
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=您的密钥

//加载天地图瓦片
const TIANDITUKEY = "xxxxxxxxxx"
const tiandituSouece = new XYZ({
    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=${TIANDITUKEY}`,
});
const tiandituLayer = new TileLayer({
    source: tiandituSouece,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [tiandituLayer],
});

天地图API

矢量底图     
http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密钥     经纬度投影
http://t0.tianditu.gov.cn/vec_w/wmts?tk=您的密钥     球面墨卡托投影
矢量注记
http://t0.tianditu.gov.cn/cva_c/wmts?tk=您的密钥     经纬度投影
http://t0.tianditu.gov.cn/cva_w/wmts?tk=您的密钥     球面墨卡托投影
影像底图
http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥     经纬度投影
http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥     球面墨卡托投影
影像注记
http://t0.tianditu.gov.cn/cia_c/wmts?tk=您的密钥     经纬度投影
http://t0.tianditu.gov.cn/cia_w/wmts?tk=您的密钥     球面墨卡托投影
地形晕渲
http://t0.tianditu.gov.cn/ter_c/wmts?tk=您的密钥     经纬度投影
http://t0.tianditu.gov.cn/ter_w/wmts?tk=您的密钥     球面墨卡托投影
地形注记
http://t0.tianditu.gov.cn/cta_c/wmts?tk=您的密钥     经纬度投影
http://t0.tianditu.gov.cn/cta_w/wmts?tk=您的密钥     球面墨卡托投影
全球境界
http://t0.tianditu.gov.cn/ibo_c/wmts?tk=您的密钥     经纬度投影
http://t0.tianditu.gov.cn/ibo_w/wmts?tk=您的密钥     球面墨卡托投影
三维地名[调用说明 http://lbs.tianditu.gov.cn/docs/#/sanwei/]
https://[ t0-t7 ].tianditu.gov.cn/mapservice/GetTiles?tk=您的密钥
三维地形[调用说明 http://lbs.tianditu.gov.cn/docs/#/sanwei/]
https://[ t0-t7 ].tianditu.gov.cn/mapservice/swdx?tk=您的密钥
元数据查询
http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts
地图瓦片获取
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=您的密钥

本文章已经生成可运行项目