文章/答案/技术大牛

发布

社区首页 >问答首页 >我的地图无法在openlayers 6.2和angular 9中移动，即使使用DragRotateAndZoom交互也无法移动

问我的地图无法在openlayers 6.2和angular 9中移动，即使使用DragRotateAndZoom交互也无法移动
EN

Stack Overflow用户

提问于 2020-02-21 06:05:57

回答 1查看 975关注 0票数 2

我正在尝试创建一个地图，正如我在其他网站和示例中看到的那样，每个人都可以通过鼠标点击和拖动来移动他们的地图。但是我的地图一点也不动，有人知道我做错了什么吗？

这些是我正在使用的components.ts和component.html文件。我按照https://openlayers.org/en/latest/doc/tutorials/bundle.html上的说明操作，没有安装parcel，因为我使用的是angular。

map.component.ts

ngOnInit(): void {
  this.mapInit();
  }

   mapInit() {
   var mousePositionControl = new MousePosition({
         coordinateFormat: createStringXY(4),
         projection: 'EPSG:4326',
         // comment the following two lines to have the mouse position
         // be placed within the map.
         className: 'custom-mouse-position',
         target: document.getElementById('mouse-position'),
         undefinedHTML: '&nbsp;'
       });

          var source = new OSM();
          var overviewMapControl = new OverviewMap({
            layers: [
              new TileLayer({
                source: source
              })
            ]
          });

          this.map = new Map({
          target: 'map',
          interactions: defaultInteractions().extend([
              new DragRotateAndZoom
            ]),
            layers: [
              new TileLayer({
                source: source
              }),
            ],
            view: new View({
              center: fromLonLat([19.833549, 45.267136]),
              zoom: 7
            }),
            controls: defaultControls().extend([
            overviewMapControl,
            new FullScreen(),
            mousePositionControl,
            new ZoomToExtent({
            extent: [
               813079.7791264898, 5929220.284081122,
               848966.9639063801, 5936863.986909639,
             ]
             })
            ])
          });

map.component.html

<html lang="en">
<head>
  <title>Drag, Rotate, and Zoom</title>
  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

</head>
<body>
<div id="map" class="map"></div>
<div id="mouse-position"></div>
</body>
</html>

angular9

openlayers-6

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-22 23:37:45

这与本期相同：https://github.com/openlayers/openlayers/issues/10663

超文本标记语言中没有包含最新版本的ol.css。

添加：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60329226

复制

相似问题

问我的地图无法在openlayers 6.2和angular 9中移动，即使使用DragRotateAndZoom交互也无法移动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的地图无法在openlayers 6.2和angular 9中移动，即使使用DragRotateAndZoom交互也无法移动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的地图无法在openlayers 6.2和angular 9中移动，即使使用DragRotateAndZoom交互也无法移动
EN