在线地图瓦片URL

jzshmyt

已于 2025-05-21 13:29:36 修改

阅读量176

点赞数 1

文章标签： javascript arcgis

于 2025-05-21 13:28:27 首次发布

本文链接：https://blog.youkuaiyun.com/jzshmyt/article/details/148107440

版权

/* 图层切换按钮容器 */
.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
      }),//地形渲染图2
      USA_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
      }),//地形渲染图3
      World_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