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 笔记