Встраивание карты OpenLayers в качестве SVO foreignObject приводит к тому, что карта появляется поверх всех других элементов SVG независимо от порядка элементов SVG - PullRequest
Новая
       7

Встраивание карты OpenLayers в качестве SVO foreignObject приводит к тому, что карта появляется поверх всех других элементов SVG независимо от порядка элементов SVG

1 голос
/ 26 сентября 2019

Я пытаюсь использовать карту OpenLayers в SVG в ситуации, когда я хотел бы, чтобы SVG-элементы отображались поверх / перед картой.Я создал простой тестовый пример на основе учебника OpenLayers: 

<!DOCTYPE html>
<html>
  <head>
    <title>Working with Openlayers</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- Openlayers CSS file-->

    <style type="text/css">
      #map{
        width:100%;
        height:600px;
      }
    </style>
    <!--Basic styling for map div, 
    if height is not defined the div will show up with 0 px height  -->
  </head>
  <body>
    <svg width="800" height="500">
      <rect width="600" height="300" style="fill:rgb(0,255,255);stroke-width:3;stroke:rgb(0,0,0)" />
      <foreignObject height="300" id="_MapPOC.7-foreignObject" width="600" y="100" x="100">
        <div id="map">
          <!-- Your map will be shown inside this div-->
        </div>
      </foreignObject>
      <rect width="600" height="300" x="200" y="200" style="fill:rgb(255,255,0);stroke-width:3;stroke:rgb(0,0,0)" />
      Sorry, your browser does not support inline SVG.  
    </svg>
  </body>
  <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
  <!-- Openlayesr JS fIle -->
  <script type="text/javascript" src="map.js" type="text/javascript"></script>
  <!-- Our map file -->
</html>

В этом примере первый (голубой) прямоугольник должен появиться сзади, а затем карта (сторонний объект) должнапоявляется посередине, а второй (желтый) прямоугольник должен отображаться сверху.

Однако, когда я просматриваю страницу, карта отображается поверх голубого и желтого прямоугольника.

Если я изменю содержимое стороннего объекта на обычный HTML вместо карты, то порядок будет работать, как и ожидалось.Только когда карта OpenLayers встроена в сторонний объект, она появляется над всем остальным, несмотря на порядок элементов SVG.

Я хотел бы знать, если кто-то знает, как я могу заставить карту выглядеть правильно упорядоченной вэлементы SVG?

Я использую Chrome версии 76.0.3809.132 (официальная сборка) (64-разрядная версия) в Windows 10.

1 Ответ

1 голос
/ 26 сентября 2019

Это не ответ на вопрос, но попытка сделать код работоспособным.Это лучше демонстрирует проблему.

var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-74.006,40.712]), // Coordinates of New York
          zoom: 7 //Initial Zoom Level
        })
      });
 <style type="text/css">
  #map{
   width:100%;
   height:600px;
  }
 </style>
<head>
 <title>Working with Openlayers</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">

</head>
<body>
 <div id="map3">
  <!-- Your map will NOT be created inside this div-->
 </div>
    <svg width="800" height="500">
      <rect width="600" height="300" style="fill:rgb(0,255,255);stroke-width:3;stroke:rgb(0,0,0)" />
      <foreignObject height="300" id="_MapPOC.7-foreignObject" width="600" y="100" x="100">
        <div id="map">
          <!-- Your map will be created inside this div-->
        </div>
      </foreignObject>
      <rect width="600" height="300" x="200" y="200" style="fill:rgb(255,255,0);stroke-width:3;stroke:rgb(0,0,0)" />
      Sorry, your browser does not support inline SVG.  
    </svg>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...