openlayers简介（1）

最新推荐文章于 2024-05-11 15:47:37 发布

Lynn_ML

最新推荐文章于 2024-05-11 15:47:37 发布

阅读量349

点赞数

原文链接：https://openlayers.org/en/latest/doc/tutorials/bundle.html

版权

一、简介

现代JavaScript在使用和编写模块时工作得最好。推荐的使用OpenLayers的方法是安装ol包。本教程将指导您设置一个简单的开发环境，该环境需要node来完成所有工作。
本教程，我们将使用parcel来打包我们的应用，这里有其他几种选择，你可以点击readme进行了解
1、初始化阶段
通过运行mkdir new-project && cd new-project为你的项目创建一个新的空的文件夹，输入以下代码进行初始化。

npm init

这将在你的工程文件下创建一个package.json文件。将OpenLayers作为依赖项添加到应用程序。

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文件，与index.js进行关联如下：

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

建立联系
package.json文件如下：

{
  "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 run build和 npm start来创建联系和监督变化。

npm start  //运行程序

在控制台测试应用程序，在浏览器中打开http://localhost:1234/。每当更改某些内容时，页面将自动重新加载以显示更改的结果。
请注意，已经创建了一个包含所有应用程序代码和应用程序中使用的所有依赖项的JavaScript文件。在OpenLayers包中，它只包含所需的组件。
要创建应用程序的生产包，只需输入以下命令：

npm run build

最后将打包好的文件复制到服务器上即可。

Lynn_ML

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayers简介（1）

一、简介现代JavaScript在使用和编写模块时工作得最好。推荐的使用OpenLayers的方法是安装ol包。本教程将指导您设置一个简单的开发环境，该环境需要node来完成所有工作。本教程，我们将使用parcel来打包我们的应用，这里有其他几种选择，你可以点击readme进行了解1、初始化阶段通过运行mkdir new-project && cd new-project为...
复制链接

扫一扫