Question

我正在尝试重建此tutorial。而不是使用Leaflet（这是可行的，但是由于不同的原因，我不想使用Leaflet），而是想使用Openlayers对其进行重建，但是我无法使用OL初始化地图。

我在Chrome浏览器中收到此错误消息，说我的地图对象为空：

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包已加载到webpack中，正如我在Chromiums DevTools Sources中看到的那样。我正在为Map Component使用一个类，该类扩展了“ Component”类，并以与使用传单的原始代码相同的方式初始化Map：

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
        })
      });
  }
}

这是原始的传单版本：

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)

  }
}

Answer 1

您正在模糊使用Map。试试

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

OpenLayers无法使用Component类和Webpack初始化地图

1 个答案: