Openlayers7的官方示例如何使用？（以测距测面为例）

原创已于 2022-10-08 17:12:07 修改 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #npm

于 2022-10-07 20:31:21 首次发布

本文介绍如何使用OpenLayers实现地图上的测距和测面功能。通过安装必要的开发工具和依赖包，如Node.js、HBuilder及openlayers等，跟随步骤创建项目并配置环境，最终启动应用查看示例效果。

一、前言

openlayers官方给了很多示例，其中测距测面是常用功能。本文以此为例简单说明如何实现。

步骤：

1.首先要安装一下node.js,如何下载去官网搜就行了。

2.要在开发工具（我用的是HBuilder）创建两个文件，分别为index.html、main.js，把官网实例的内容复制进去。

3.Alt + C 打开当前项目的终端，首先输入npm init -y（获得一个package.json文件），接着分别输入 npm install ol（下载openlayers包）和 npm init -y vite（开发工具）

4.package.json中的script{test...}改为"

scripts": {
"start": "vite",
"build": "vite build"
}

最后的package.json 的配置：

{
"name": "_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "vite",
"build": "vite build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ol": "7.1.0" 注意版本
},
"devDependencies": {
"@babel/core": "latest",
"vite": "^3.1.6" 版本不影响
}
}