前端之家

  1. 首页
  2. 问答

将自定义面板添加到Openlayers地图

• 问答

我用OpenLayers，Openstreetmap和BingMaps创建了具有不同图层的地图。

现在，我想向地图添加自定义面板。我可以创建一个面板（下拉菜单），但是无法将其放置在地图上。我已经在网上找到了几种解决方案，但是到目前为止，它们都没有。

将自定义面板添加到Openlayers地图

例如： http://vasir.net/blog/openlayers/openlayers-tutorial-part-3-controls/或http://jsfiddle.net/4zNH6/。感谢您的所有帮助。 这是我main.js中的代码：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {fromLonLat,toLonLat} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {circular} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';

// define the map
const map = new Map({
  target: 'map',view: new View({
    center: fromLonLat([16.37,48.2]),zoom: 13
  })
});

sync(map);

//Adresssuche
const searchResultsource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultsource
});

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(0,128,1)'
    }),stroke: new Stroke({
      color: '#000000',width: 1.25
    }),radius: 15
  })
}));

var element = document.getElementById('search');  
element.addEventListener('keydown',listenerFunction);

function listenerFunction(event) {
  console.log(event);
  console.log(event.keyCode);
  if (event.keyCode === 13) {

    const xhr = new XMLHttpRequest;
    xhr.open('GET','https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
    xhr.onload = function() {
      const json = JSON.parse(xhr.responseText);
      const geoJsonReader = new GeoJSON({
        featureProjection: 'EPSG:3857'
      });  
      searchResultsource.clear(); 
      const features = geoJsonReader.readFeatures(json);
      console.log(features);
      searchResultsource.addFeatures(features);
        if (!searchResultsource.isEmpty()) {
    map.getView().fit(searchResultsource.getExtent(),{
      maxzoom: 18,duration: 500
    });
  }
    };
    xhr.send();


  }
}

//OpenStreetMap
const OSMbaseLayer = new TileLayer({
    type: 'base',source: new OSM()
}); 

// Statellit
const satellitLayer = new TileLayer({
    source: new XYZ ({
    attributions: ['Powered by Esri','Source: Esri,DigitalGlobe,GeoEye,Earthstar Geographics,Cnes/Airbus DS,USDA,USGS,AeroGRID,IGN,and the GIS User Community'],attributionsCollapsible: false,url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',maxzoom: 30
    })
});

//shape
const parkLayer = new VectorLayer({
    source: new Vector({ 
        url: 'data/park1.geojson',format: new GeoJSON()
    })
});

parkLayer.setStyle(new Style({
      fill: new Fill({
      color: 'green'
    }),stroke: new Stroke({
      color: 'green',}));


// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);   
 map.addLayer(parkLayer);   

const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click',function(event) {
  //contr.style.color = 'ffffff';
  //Andere Layer entfernen
  map.removeLayer(satellitLayer);
  map.removeLayer(searchResultLayer);
   //OSM Layer hinzufügen
  map.addLayer(OSMbaseLayer);
  map.addLayer(searchResultLayer);
});

// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click',function(event) {
  //Andere Layer entfernen
  map.removeLayer(OSMbaseLayer);
  map.removeLayer(searchResultLayer);
  //Satelliten Layer hinzufügen
  map.addLayer(satellitLayer);
  map.addLayer(searchResultLayer);  
 });

//GPS Location
const GPSsource = new Vector();
const GPSlayer = new VectorLayer({
  source: GPSsource
});
map.addLayer(GPSlayer);


navigator.geolocation.watchPosition(function(pos) {
  const coords = [pos.coords.longitude,pos.coords.latitude];
  const accuracy = circular(coords,pos.coords.accuracy);
  GPSsource.clear(true);
  GPSsource.addFeatures([
    new Feature(accuracy.transform('EPSG:4326',map.getView().getProjection())),new Feature(new Point(fromLonLat(coords)))
  ]);
},function(error) {
  alert(`ERROR: ${error.message}`);
},{
  enableHighaccuracy: true
});

const locate = document.createElement('div');
locate.classname = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button title="Locate me">◎</button>';
locate.addEventListener('click',function() {
  if (!GPSsource.isEmpty()) {
    map.getView().fit(GPSsource.getExtent(),duration: 500
    });
  }
});

map.addControl(new Control({
  element: locate
}));

这是index.html中的代码：

<!DOCTYPE html>
<html>
  <head>
  <link href="../stylesheet.css" rel="stylesheet">
    <title>Feedback</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,width=device-width">
    <title>OpenLayers</title>
    <style>
      html,body,.fullscreen {
        width: 100%;
        height: 100%;
        margin: 0;
      }
      .arrow_box {
          position: relative;
          background: #000;
          border: 1px solid #003c88;
      }
      .arrow_box:after,.arrow_box:before {
          top: 100%;
          left: 50%;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
      }
      .arrow_box:after {
          border-color: rgba(0,0);
          border-top-color: #000;
          border-width: 10px;
          margin-left: -10px;
      }
      .arrow_box:before {
          border-color: rgba(0,60,136,0);
          border-top-color: #003c88;
          border-width: 11px;
          margin-left: -11px;
      }
      .arrow_box {
        border-radius: 5px;
        padding: 10px;
        opacity: 0.8;
        background-color: black;
        color: white;
      }
      #popup-content {
        max-height: 200px;
        overflow: scroll;
      }
      #popup-content th {
        text-align: left;
        width: 125px;
      }

      .locate {
        top: 90px;
        left: 8px;
    }

    </style>
  </head>
  <body>
  <div class="header">
    </div>
            <div class="title">
            <h1>Karte</h1>
    </div>
    <ul id="homebar">
    <li>
    <a href="../home/start_content_grp.htm"> Home </a>
    </li>
    <li> 
    <a href="../projekt/projekt.htm"> Projekt </a>
    </li>
    <li> 
    <a href="../team/team.htm"> Team </a>
    </li>
    <li> 
    <a href="map.htm"> Karte </a>
    </li>
    <li> 
    <a href="../uebungsbeispiele/beispiele.htm"> &Uumlbungsbeispiele </a>
    </li>
    <li>
    <a href="../kontaktformular/formular.htm"> Kontaktformular </a>
    </li>
    <li>
    <a href="../impressum/impressum.htm"> Impressum </a>
    </li>
    <li>
    <a href="../intranet/start_content_grp_intranet.htm"> Intranet </a>
    </li>
    </ul>
    <input type="text" id="search"  placeholder="Adresssuche..."></input>
      <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <div style="margin:20px; margin-top:5px;" class="codebox">
    <dt style="height:25px; text-align: left;">
    <input type="button" value="Layeroptionen" style="width:100px; font-size:12px; margin:5px; padding:5px;" onclick="var spoiler = $(this).parents('.codebox').find('.content').toggle('slow');
    if ( this.value == 'Layeroptionen' ) { this.value = 'Layeroptionen'; } else { this.value = 'Layeroptionen'; };
    return false;"></dt>
    <dd><div class="content" name="spoiler" style="display: none;">
    <div id="control">
    <label class="radio">
        <br><input class="rb" id="OSMbase" type="radio" name="foobar" checked>
        Base-Layer OSM
        </label><br>
        <label class="radio">
         <input class="rb" id="satellit" type="radio" name="foobar">
         Sattelite
        </label>
      </div>
    </div></dd></div>
    <script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script> 
    <div id="map" class="fullscreen">
        <select id="combo">
        <option value="baselayer-osm">Base-Layer OSM</option>
        <option value="sattelite">Sattelite</option>
    </select>
</div>
    <!-- <div class="arrow_box" id="popup-container">
      <div id="popup-content"></div> -->
    </div>
  </body>
</html>
xufeng123456 回答：将自定义面板添加到Openlayers地图
暂时没有好的解决方案，如果你有好的解决方案，请发邮件至：iooj@foxmail.com
csshtmljavascriptopenlayerspanel
本文链接：https://www.f2er.com/2942370.html

大家都在问