OpenLayers не может инициализировать карту с помощью класса Component и веб-пакета - PullRequest
Новая
       32

OpenLayers не может инициализировать карту с помощью класса Component и веб-пакета

1 голос
/ 03 июля 2019

Я пытаюсь перестроить этот учебник .Вместо использования Leaflet (который работает, но по разным причинам я не хочу использовать Leaflet), я хочу перестроить его с помощью Openlayers, но не могу инициализировать карту с помощью OL.

Iполучите это сообщение об ошибке в браузере Chrome, сказав, что мой объект карты имеет значение null: 

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at new Component (component.js:17)
    at new Map (map.js:28)
    at new Map (map.js:33)
    at ViewController.initializeComponents (main.js:26)
    at new ViewController (main.js:18)
    at eval (main.js:30)
    at Object.<anonymous> (bundle.js:1580)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:64
    at bundle.js:67

Пакет ol загружен в веб-пакет, как я вижу в исходниках Chromiums DevTools.Я использую класс для Компонента Карты, который расширяет класс «Компонент» и инициализирует Карту так же, как это делает исходный код с листовкой: 

export class Component {
/*Base component class to provide view ref binding, template insertion, and event listener setup
     */

  /** SearchPanel Component Constructor
   * @param { String } placeholderId - Element ID to inflate the component into
   * @param { Object } props - Component properties
   * @param { Object } props.events - Component event listeners
   * @param { Object } props.data - Component data properties
   * @param { String } template - HTML template to inflate into placeholder id
   */
  constructor (placeholderId, props = {}, template) {
    this.componentElem = document.getElementById(placeholderId)

    if (template) {
      // Load template into placeholder element
      this.componentElem.innerHTML = template

      // Find all refs in component
      this.refs = {}
      const refElems = this.componentElem.querySelectorAll('[ref]')
      refElems.forEach((elem) => { this.refs[elem.getAttribute('ref')] = elem })
    }

    if (props.events) { this.createEvents(props.events) }
  }

  /** Read "event" component parameters, and attach event listeners for each */
  createEvents (events) {
    Object.keys(events).forEach((eventName) => {
      this.componentElem.addEventListener(eventName, events[eventName], false)
    })
  }

  /** Trigger a component event with the provided "detail" payload */
  triggerEvent (eventName, detail) {
    const event = new window.CustomEvent(eventName, { detail })
    this.componentElem.dispatchEvent(event)
  }
}

import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { Component } from '../component'

const template = '<div ref="mapContainer" class="map-container"></div>'

/**
 * Openlayers Map Component
 * @extends Component
 */
export class Map extends Component {
  /** Map Component Constructor
   * @param { String } placeholderId Element ID to inflate the map into
   * @param { Object } props.events.click Map item click listener
   */
  constructor (placeholderId, props) {
    super(placeholderId, props, template)

    const target = this.refs.mapContainer

    // Initialize Openlayers Map
    this.map = new Map({
        target,
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      });
  }
}

Вот оригинальная версия Leaflet: 

export class Map extends Component {
  constructor (placeholderId, props) {
    super(placeholderId, props, template)

   // Initialize Leaflet map
    this.map = L.map(this.refs.mapContainer, {
      center: [ 5, 20 ],
      zoom: 4,
      maxZoom: 8,
      minZoom: 4,
      maxBounds: [ [ 50, -30 ], [ -45, 100 ] ]
    })

    this.map.zoomControl.setPosition('bottomright') // Position zoom control
    this.layers = {} // Map layer dict (key/value = title/layer)
    this.selectedRegion = null // Store currently selected region

    // Render Carto GoT tile baselayer
    L.tileLayer(
      'https://cartocdn-gusc.global.ssl.fastly.net/ramirocartodb/api/v1/map/named/tpl_756aec63_3adb_48b6_9d14_331c6cbc47cf/all/{z}/{x}/{y}.png',
      { crs: L.CRS.EPSG4326 }).addTo(this.map)

  }
}

1 Ответ

0 голосов
/ 03 июля 2019

Вы используете Map неоднозначно.Попробуйте 

import {Map as olMap} from 'ol'
...
export class Map extends Component {
    ...
    // Initialize Openlayers Map
    this.map = new olMap({
...