Openalyer 6-如何包括自定义多个脚本来打包包裹

编程问答 2022-08-14

问题描述

我已经使用ol6从build（npm run build）生成了地图。现在我想添加一些功能，例如集群创建，添加点，突出显示等。

map.js 

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

var distLayer = new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/district/distgrid" + "/{z}/{x}/{-y}.png",});    
const map = new Map({
  target: 'map',layers: [
    new TileLayer({
      title: 'district',type: 'base',source: distLayer,}),new TileLayer({
      title: 'Landmark',source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/Landmark/landmarkgrid" + "/{z}/{x}/{-y}.png",})
    }),new TileLayer({
      title: 'Road',source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/road/roadgrid" + "/{z}/{x}/{-y}.png",})
    })
        
  ],view: new View({
    center: [0,0],zoom: 1
  })
});

package.json 

{
  "name": "gis","version": "1.0.0","description": "map using ol6","main": "map.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","start": "parcel map.js","build": "parcel build --public-url . map.js"
  },"author": "user","license": "ISC","dependencies": {
    "ol": "^6.4.3",},"devDependencies": {
    "parcel-bundler": "^1.12.4"
  }
}

构建后（运行npm运行），我将map.js和map.css用作home.html，其中有“地图” div和渲染地图。 home.html 

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
        {% load static %}
        <link href="{% static 'css/jquery-ui.theme.min.css' %}" rel="stylesheet">
        <link href="{% static 'js/pages/dist/map.css' %}" rel="stylesheet">
        <style>html,body {margin: 0; height: 100% !important; }
        #map { position: absolute; top: 0;bottom: 0;width: 100%; }
       </style>
  </head>
  <body>
    <div id="map" style="height:90% !important; top:40px;"></div>
    <button id="createCluster" value="cluster">Create Cluster</button>
    <script src="{% static 'js/pages/dist/map.js' %}"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/pages/cluster_gis.js' %}"></script>
  </body>
</html>

点击“ 创建集群”按钮后，我想创建一个从 cluster_gis.js 到渲染地图的集群。但是，当我 import'ol / ol.css'或 cluster_gis.js 中来自ol的任何内容时，出现错误' Uncaught SyntaxError：导入声明可能仅出现在模块的顶层”，因为它不包含在捆绑软件中。我如何包含这个 cluster_gis.js 来打包包裹。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bundlebundlejavascriptopenlayersopenlayers-6