openlayers 添加天地图经纬度、墨卡托矢量底图瓦片

最新推荐文章于 2024-05-24 13:29:39 发布

炉火纯青-旺

最新推荐文章于 2024-05-24 13:29:39 发布

阅读量1.6k

点赞数

分类专栏： openlayers 文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_34870529/article/details/107095025

版权

openlayers 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1：经纬度底图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>天地图矢量经纬度底图</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
    type="text/css">
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
  <style>
    #map {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
  <script>
    function onLoad() {
      var layers = [
        new ol.layer.Tile({
          title: "天地图矢量经纬度底图",
          source: new ol.source.XYZ({
            projection: 'EPSG:4326',
            url: "http://124.193.68.246:12081/DataServer?T=vec_c&x={x}&y={y}&l={z}"
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [116.38, 39.93],
          zoom: 3
        }),
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        })
      });
    }
  </script>
</head>

<body onload='onLoad()'>
  <div id='map'></div>
</body>

</html>

效果展示：

2：墨卡托底图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>天地图矢量墨卡托底图</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
    type="text/css">
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
  <style>
    #map {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
  <script>
    function onLoad() {
      var layers = [
        new ol.layer.Tile({
          title: "天地图矢量墨卡托底图",
          source: new ol.source.XYZ({
            projection: 'EPSG:900913',
            url: "http://124.193.68.246:12081/DataServer?T=vec_w&x={x}&y={y}&l={z}"
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          projection: 'EPSG:900913',
          center: ol.proj.fromLonLat([116.38, 39.93]),
          zoom: 3
        }),
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        })
      });
    }
  </script>
</head>

<body onload='onLoad()'>
  <div id='map'></div>
</body>

</html>

效果展示：

炉火纯青-旺

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
openlayers 添加天地图经纬度、墨卡托矢量底图瓦片

1：经纬度底图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>
复制链接

扫一扫