使用openlayers构建项目

最新推荐文章于 2022-08-06 15:27:09 发布

doran_M

最新推荐文章于 2022-08-06 15:27:09 发布

阅读量783

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45523066/article/details/104042234

版权

初步步骤
为你的项目创建一个新的空目录，然后通过运行导航到该目录mkdir new-project && cd new-project。使用初始化项目。

npm init

这将package.json在您的工作目录中创建一个文件。使用以下方式将OpenLayers添加为对您的应用程序的依赖`

npm install ol

npm install ol
此时，您可以要求NPM通过运行来添加所需的开发依赖项

npm install --save-dev parcel-bundler

应用程序代码和index.html
将您的应用程序代码放在中index.js。这是一个简单的起点：

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

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

您还需要一个index.html将使用捆绑软件的文件。这是一个简单的示例：

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

创建捆绑
在另外两行中，package.json您可以引入命令npm run build并npm start手动构建捆绑包并注意更改。最后package.json带有两个附加命令"start"，"build"应如下所示：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "author": "",
  "license": "ISC"
}

而已。现在运行您的应用程序，输入

npm start

在您的控制台中。要测试您的应用程序，请在浏览器中打开***http：// localhost：1234*** /。每当您更改某些内容时，页面都会自动重新加载以显示更改结果。

请注意，已经创建了一个包含所有应用程序代码和应用程序中使用的所有依赖项的JavaScript文件。在OpenLayers软件包中，它仅包含必需的组件。

要创建应用程序的生产包，只需键入

npm run build

并将dist/文件夹复制到生产服务器。

构建openlayers项目就到这啦！！有啥不足的请多多指教啦！！！

doran_M

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用openlayers构建项目

初步步骤为你的项目创建一个新的空目录，然后通过运行导航到该目录mkdir new-project && cd new-project。使用初始化项目。npm init这将package.json在您的工作目录中创建一个文件。使用以下方式将OpenLayers添加为对您的应用程序的依赖`npm install olnpm install ol此时，您可以要求NPM通过...
复制链接

扫一扫