vue+openlayers5学习总结（一）入门demo实例

张栓来

10088人浏览 · 2019-05-24 13:15:02

张栓来 · 2019-05-24 13:15:02 发布

1、介绍

现代JavaScript在使用和创作模块时效果最佳。使用OpenLayers的推荐方法是安装ol包。本教程将指导您设置一个简单的开发环境，该环境需要节点才能使所有内容正常工作。

在本教程中，我们将使用Parcel捆绑我们的应用程序。还有其他几个选项，其中一些是从README链接的

2、初步步骤

为项目创建一个新的空目录，并通过运行导航到它mkdir new-project && cd new-project。使用npm init并初始化您的项目并回答问题。

使用OpenLayers作为依赖项添加到您的应用程序

npm install ol

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

npm install --save-dev parcel-bundler

3、应用程序代码和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将使用您的捆绑包的文件。这是一个简单的例子：

// An highlighted block
<!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>

4、创建一个包

使用简单的脚本，您可以分别引入命令npm run build并npm start手动构建捆绑包并监视更改。将以下内容添加到脚本部分package.json：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "parcel index.html",
  "build": "parcel build --public-url . index.html"
}

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

npm start

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

请注意，已创建包含应用程序代码和应用程序中使用的所有依赖项的单个JavaScript文件。从OpenLayers包中，它只包含所需的组件。

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

npm run build

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^