Openlayers示例21 | Static Image(静态图像)-CFANZ编程社区

Openlayers示例21 | Static Image(静态图像)

此示例使用静态图像作为图层源。地图视图配置了自定义投影，可将图像坐标直接转换为地图坐标。

Openlayers示例21 | Static Image(静态图像)_css

Static Image

此示例使用静态图像作为图层源。地图视图配置了自定义投影，可将图像坐标直接转换为地图坐标。

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

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <!-- css代码 -->
  <style>
    .map {
      width: 100%;
      height: 500px;
    }
  </style>
  <title>Static Image</title>
</head>
<body>
  <div id="map" class="map"></div>
</body>
<script>
  const extent = [0, 0, 1024, 968];
  const projection = new ol.proj.Projection({
    code: 'xkcd-image',
    units: 'pixels',
    extent: extent,
  });

  const map = new ol.Map({
    layers: [
      // new ol.layer.Tile({
      //   source: new ol.source.OSM()
      // }),
      new ol.layer.Image({
        source: new ol.source.ImageStatic({
          attributions: '© <a href="https://c.com/echohye">echohye</a>',
          url: 'https://images.c.com/cnblogs_com/blogs/709967/galleries/2040987/o_211006010837Figure_1.png',
          // url: 'https://imgs.xkcd.com/comics/online_communities.png',
          projection: projection,
          imageExtent: extent,
        }),
      }),
    ],
    target: 'map',
    view: new ol.View({
      projection: projection,
      center: ol.extent.getCenter(extent),
      zoom: 2,
      maxZoom: 8,
    }),
  });
</script>
</html>

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。

0 条评论