当前位置： 首页 > news >正文

在线地图瓦片URL

news 来源：原创 2025/5/22 9:32:13 

/* 图层切换按钮容器 */
.layer-switcher {position: absolute;top: 20px;right: 20px;z-index: 1000;background: rgba(255, 255, 255, 0.9);padding: 10px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}/* 单个按钮样式 */
.layer-btn {display: flex;align-items: center;padding: 10px 15px;margin: 5px 0;width: 150px;border: none;border-radius: 6px;background: #fff;cursor: pointer;transition: all 0.3s ease;
}/* 按钮悬停效果 */
.layer-btn:hover {background: #f0f0f0;transform: translateX(-5px);
}/* 激活状态的按钮 */
.layer-btn.active {background: #4CAF50; /* 绿色主题色 */color: white;
}/* 图标和文字间距 */
.layer-btn i {margin-right: 10px;width: 5px;text-align: center;
}
 <div id="map"></div><!-- 图层切换按钮 --><div class="layer-switcher"><button class="layer-btn " data-layer-type="appmaptile"><i class="fas fa-road"></i>高德电子地图</button><button class="layer-btn active" data-layer-type="gaodeLabels"><i class="fas fa-road"></i>高德矢量地图</button><button class="layer-btn" data-layer-type="satellite"><i class="fas fa-satellite"></i>高德影像地图</button><button class="layer-btn" data-layer-type="World_Dark_Gray_Base"><i class="fas fa-mountain"></i>暗黑版地图</button><button class="layer-btn" data-layer-type="NatGeo_World_Map"><i class="fas fa-mountain"></i>地形渲染图1</button><button class="layer-btn" data-layer-type="USA_Topo_Maps"><i class="fas fa-mountain"></i>地形渲染图2</button><button class="layer-btn" data-layer-type="World_Shaded_Relief"><i class="fas fa-mountain"></i>地形渲染图3</button><button class="layer-btn" data-layer-type="World_Ocean_Base"><i class="fas fa-mountain"></i>海洋渲染图</button><button class="layer-btn" data-layer-type="opentopomap"><i class="fas fa-mountain"></i>10m等高线图</button><button class="layer-btn" data-layer-type="openstreetmap"><i class="fas fa-mountain"></i>OSM街景图</button></div>
 // 定义所有图层源const layerSources = {//高德电子地图appmaptile: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",}),visible: false}),//高德矢量地图gaodeLabels: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}"}),visible: true}),//高德卫星影像satellite: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",}),visible: false}),//暗黑地图World_Dark_Gray_Base: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/WMTS/tile/1.0.0/Canvas_World_Dark_Gray_Base/default/default028mm/{z}/{y}/{x}/"}),visible: false}),//地形渲染图NatGeo_World_Map: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}"}),visible: false}),//地形渲染图2USA_Topo_Maps: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}"}),visible: false}),//地形渲染图3World_Shaded_Relief: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}"}),visible: false}),//海洋渲染图World_Ocean_Base: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://server.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}"}),visible: false}),opentopomap: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://c.tile.opentopomap.org/{z}/{x}/{y}.png"}),visible: false}),openstreetmap: new ol.layer.Tile({source: new ol.source.XYZ({url: "https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png"}),visible: false})};// 初始化地图map = new ol.Map({target: "map",layers: [],view: new ol.View({center: ol.proj.fromLonLat([116.4, 39.9]),zoom: 4,}),});Object.values(layerSources).forEach(layer => map.addLayer(layer));


（1）高德卫星影像URL
https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
（2）高德大字体电子地图URL
http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}
（3）高德卫星影像URL与路网URL
https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8<ype=11
（4）高德卫星影像URL与地名路网URL
https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
（5）腾讯电子地图
https://rt1.map.gtimg.com/tile?z={z}&x={x}&y={-y}&styleid=0&version=256
（6）冷色地图URL
https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/WMTS/tile/1.0.0/Canvas_World_Light_Gray_Base/default/default028mm/{z}/{y}/{x}/
（7）暗黑地图URL
https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/WMTS/tile/1.0.0/Canvas_World_Dark_Gray_Base/default/default028mm/{z}/{y}/{x}
（8）地形渲染图1URL
https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}
（9）海洋渲染图URL
https://server.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}
（10）地形渲染图2URL
https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}
（11）地形渲染图3URL
https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}
（12）360电子地图URL
http://map4.qhimg.com/sotile/ver12/2/{z}/?x={x}&y={-y}
（13）ArcGIS World卫星图URL
https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
（14）Mapbox卫星混合图URL
https://api.mapbox.com/styles/v1/mapbox-official/ckpqknefy216x17t9b07w8xmf/tiles/{z}/{x/2}/{y/2}?access_token={key}
（15）高德电子地图URL
https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}
（16）10m等高线地图URL
https://c.tile.opentopomap.org/{z}/{x}/{y}.png
（17）土地利用分类地图URL
https://services.terrascope.be/wmts/v2?layer=WORLDCOVER_2021_MAP&style=&tilematrixset=EPSG:3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:3857:{z}&TileCol={x}&TileRow={y}&TIME=2022-10-31
（18）OpenCycle地形图URL
http://a.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey={key}
（19）OpenStreetMap标准地图URL
https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png
（20）地形+标注图1URL
https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}
（21）地形+标注图2URL
https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}
（22）Here卫星地图URL
https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/jpeg?apiKey={key}&lang=en&style=satellite.day&size=512
（23）OSM冬日地图URL
https://w3.outdooractive.com/map/v1/png/osm_winter/{z}/{x}/{y}/t.png?project=api-dev-oa
（24）OMS户外地图URL
http://a.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={key}
（25）OSM地形渲染图URL
http://s0.outdooractive.com/osm/OSMSummer/{z}/{x}/{y}.png

相关文章：

  • Spring Framework 的 spring-core 和 Spring Security 兼容版本
  • springboot3+vue3融合项目实战-大事件文章管理系统-自定义校验
  • 预警功能深度测评：如何用系统降低设备突发故障率？
  • 基于 STM32 的 PC ARGB 风扇控制器设计与实现
  • 工作安排小K
  • Elasticsearch生产环境性能调优指南
  • Unity中GPU Instancing使用整理
  • 全方位详解微服务架构中的Service Mesh（服务网格）
  • 互联网大厂Java求职面试：Spring Cloud微服务架构与AI集成挑战
  • 如何在 Android 手机和平板电脑上下载应用程序
  • ATT Global赞助非小号全球行，引领RWA创新浪潮
  • springboot 1.x2.x依赖spring版本
  • MySQL 5.7 实战：JSON 字段提取、Base64 解码与引号问题全解析
  • 无人机电子防抖技术要点概述！
  • 20个关于Java编程语言的常见问题
  • Redis SETNX：分布式锁与原子性操作的核心
  • SPL做量化---PSY（心理线）
  • 【人工智能基础知识】
  • Mysql索引实战1
  • 2025年二级等保实施全攻略：传统架构与云等保方案深度解析
  • 政府部门网站建设内容/企业培训课程分类
  • 桂阳 网站建设/seo 技术优化