从es6创建对象并在js文件中使用openlayers map

Question

i want to create own API, i created class and object with es6 and using javascript core. 我想创建自己的API，我使用es6和使用javascript核心创建类和对象。

when i ran this code with npm, got this error; 当我用npm运行此代码时，出现此错误; Uncaught ReferenceError: mapper is not defined 未捕获的ReferenceError：未定义映射器

Where do you think I get an error? 您认为我在哪里收到错误？

index.js; index.js; OpenLayers's function in code OpenLayers在代码中的功能

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

window.onload = config;
let mapper;

function config() {
    mapper = new IMapper();
}

export class IMapper{
    constructor(){
    }

   initMap () {
        const map = new Map({
            target: 'map',
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 0
            })
        });
    }
}

index.html; index.html的; called es6 code in js core and i got this error 在js核心中调用es6代码，我收到了这个错误

<html>
<head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
        #map {
            width: 400px;
            height: 250px;
        }
    </style>
    <script type="module" src="index.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    mapper.initMap();
</script>
</body>
</html>

package.json 的package.json

 {
  "name": "ol-parcel",
  "version": "1.0.0",
  "description": "Example using OpenLayers with Parcel",
  "scripts": {
  "start": "parcel index.html",
  "build": "parcel build --public-url . *.html *.js"
  },
    "dependencies": {
    "ol": "^5.1.2"
  },
  "devDependencies": {
        "parcel-bundler": "^1.9.4"
  }    
}

Thank you for responses... 谢谢你的回复......

Answer 1

你需要实际调用你的config功能。

window.onload = config();

从es6创建对象并在js文件中使用openlayers map

问题描述

1 个解决方案

解决方案1
0 2019-04-17 13:11:41

从es6创建对象并在js文件中使用openlayers map

问题描述

1 个解决方案

解决方案1 0 2019-04-17 13:11:41

解决方案1
0 2019-04-17 13:11:41