Openlayers 无法传递 innerHTML 内容

Question

我是 OpenLayers 的新手。有一个图像列表及其顺序来构建完整图像。但是没有任何坐标。所以我创建了两个 div：一个用于地图（作为外部 div），另一个用于显示图像 table。
使用地图时，页面变成空白。

下面html代码：

<body>
    <div id="map" class="map" style="border: 1px;">
        <div id="im"> </div>
    </div>
    <script src="main.js"></script>
 </body>

main.js代码：

    var imgSrc = [
    image.a0, image.a1, image.a2, image.a3, image.a4, image.a5, image.a6, image.a7, image.a8, image.a9, 
];
        var image1 = getTable();
        var map = new Map({
            layers: [
              new ImageLayer({
                source: image1
                }),
                
            ],
            target: 'map',
            view: new View({
                center: [0,0],
                zoom: 1,
                maxZoom: 8,
              }),
        });
        //---------
           // getTable();
        //document.getElementById('im').innerHTML = function(){
            function getTable(){
                var count = 0;
                document.getElementById('im').innerHTML = function(){
            function toTable(){
                var i, html = "";
                for(i=0; i<15; i++){
                    html += toTr(i);
                }
                return "<table cellspacing='0' cellpadding='0'>" + html +"</table>";
            }
        
            function toTr(rows){
        
                return "<tr>" + toTd() + "</tr>";
            }
        
            function toTd(){
                var i, td = "";
                for(i=0; i<10; i++){
                    var filePath = count+"_Tile_2.bmp";
                    //alert(filePath)
                    td += "<td style='border:none;'><img src=\"" + imgSrc[count] + "\" /></td>";
                    count += 1;
                }
                return td;
            }
            return toTable();
            }();
        }

如果我只调用 getTable() 并注释掉 ol 代码，那么我就能正确获取图像。

感谢任何帮助。

Answer 1

您不能只将图像放入地图目标并期望它起作用。 OpenLayers 会为你做这件事。我在下面做了一个例子，其中一张图片被分成四部分，并使用 OpenLayers 来显示它。请参阅末尾的代码和框 link 以了解工作实施。

您需要根据要显示的x/y/z个位置来命名图片。在这种情况下，我有 5 张图片。

sintel-0-0-0.png 
sintel-1-0-0.png 
sintel-1-0-1.png 
sintel-1-1-0.png
sintel-1-1-1.png

第一张是低分辨率的图片，另外四张是裁剪后的完整图片。第一个数字是缩放级别，然后是 x 和 y 位置。

import "./styles.css";
import "ol/ol.css";
import Map from "ol/Map.js";
import TileGrid from "ol/tilegrid/TileGrid.js";
import View from "ol/View.js";
import { Projection } from "ol/proj.js";
import { Tile as TileLayer } from "ol/layer.js";
import { XYZ } from "ol/source.js";
import { getCenter } from "ol/extent.js";

const imageSize = [1920, 1080];
const extent = [0, 0, imageSize[0], imageSize[1]];
const projection = new Projection({
  code: "custom-image",
  units: "pixels",
  extent: extent
});

const layer = new TileLayer({
  source: new XYZ({
    tileGrid: new TileGrid({
      minZoom: 0,
      maxZoom: 1,
      resolutions: [2, 1],
      tileSize: [imageSize[0] / 2, imageSize[1] / 2],
      extent: extent
    }),
    url: "/data/sintel-{z}-{x}-{y}.png",
    projection: projection
  })
});

const map = new Map({
  layers: [layer],
  target: "map",
  view: new View({
    projection: projection,
    center: getCenter(extent),
    resolution: 1
  })
});

https://codesandbox.io/s/image-tile-grid-ufqfo?file=/src/index.js

Openlayers 无法传递 innerHTML 内容

Openlayers unable to pass innerHTML content

javascript

openlayers

parcel