Я пытаюсь перестроить этот учебник .Вместо использования 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)
}
}