<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Line...
。
实现效果如下
本来我是想写一个，在规定区域内绘画，并且他们之间不能那个相互交互重叠的效果，然后今天看到了一个大佬写得返回上一步的操作我觉得很好玩。so，就改成了这样，ctrl+z和ctrl+y的效果。
绘画时难免会遇到问题，撤销是一个很有用的方法。
直接上代码：
代码如下：
<template>
<div id="map" ref="map"></div>
</template>
<script>
import "
.interaction.Modify对被选择的要素进行编辑，代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns=http://www.w3.org/1999/xhtml>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<met...
OpenLayers
是一个强大的开源JavaScript库，用于构建交互式的Web地图应用。要使用
OpenLayers
在地图上画一条
线
（P
ol
yline），你可以按照以下步骤操作：
1. 引入
OpenLayers
库：首先在HTML文件中引入
OpenLayers
的CDN链接，或者本地包含其文件。
```html
<script src="https://cdn.jsdelivr.net/npm/
openlayers
@6.6.1/dist/
OpenLayers
.js"></script>
2. 初始化地图：创建一个`<div>`容器，并设置地图的视口大小。
```html
<div id="map" style="width: 100%; height: 500px;"></div>
3. 创建地图实例：在JavaScript中，初始化地图并设置投影和分辨率。
```javascript
const map = new
ol
.Map({
target: 'map',
view: new
ol
.View({
center: [0, 0], // 设置中心点
zoom: 2, // 设置初始缩放级别
projection: 'EPSG:4326', // 使用WGS84
坐标
系
4. 添加在
线
层或地形数据：通常我们会添加一个WMS或TMS服务作为底图。
```javascript
const layer = new
ol
.layer.Tile({
source: new
ol
.source.OSM(), // 或者使用其他在
线
地图服务
map.addLayer(layer);
5. 创建
线
条矢量层：使用`
ol
.format.GeoJSON`将
线
条数据转换为
OpenLayers
可以理解的格式。
```javascript
const lineFeature = {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[0, 0], [10, 10]], //
线
条起点和终点
坐标
const lineSource = new
ol
.source.Vector({
url: 'data/lines.geojson', // 如果是本地文件，路径改为本地
format: new
ol
.format.GeoJSON(),
features: [
ol
.format.GeoJSON.writeFeature(lineFeature)],
const lineLayer = new
ol
.layer.Vector({
source: lineSource,
style: new
ol
.style.Stroke({
c
ol
or: 'blue',
width: 2,
map.addLayer(lineLayer);
[ WARN ]Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableExcept
BUG 笔记
