openlayers画线 (七)

ゝ一纸荒年。 2023-07-25 08:46 10阅读 0赞

创建要素

var wireFeature = new ol.Feature({ 
      geometry:new ol.geom.LineString([[121.5025,31.237015], [121.5025,31.247015], [121.4925,31.237015]])
    });

数据源

var vectorSource = new ol.source.Vector({ 
      features: [iconFeature1, iconFeature2, wireFeature]
    });

创建矢量图层

var vectorLayer = new ol.layer.Vector({ 
      source: vectorSource
    });

把矢量图层添加进地图

map.addLayer(vectorLayer);

查看效果  
![在这里插入图片描述][20200413165637310.png]  
线的其他操作可以参考上一篇文章，点是如何操作的。

完整代码

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>demo</title>
      <link rel="stylesheet" href="./static/ol.css">
      <script src="./static/ol.js"></script>
    </head>
    <body>
      <div id="map"></div>
      <script type="text/javascript"> // 创建地图 var map = new ol.Map({ view: new ol.View({ center: ol.proj.transform([121.5025,31.237015], 'EPSG:4326', 'EPSG:3857'), zoom: 14, // 地图默认缩放级别 maxZoom: 15, // 地图最大缩放级别 minZoom: 11, // 地图最小缩放级别 }), target: 'map', // 地图容器id }) // 创建一个使用离线地图瓦片的层 var offlineMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: './tiles/{z}/{x}/{y}.png', }) }); // 将层添加进地图 map.addLayer(offlineMapLayer); // 创建要素1 var iconFeature1 = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([121.5025,31.237015], 'EPSG:4326', 'EPSG:3857')), }); // 创建要素2 var iconFeature2 = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([121.5025,31.247015], 'EPSG:4326', 'EPSG:3857')), }); var wireFeature = new ol.Feature({ geometry:new ol.geom.LineString([ ol.proj.transform([121.5025,31.237015], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([121.5025,31.247015], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([121.4925,31.237015], 'EPSG:4326', 'EPSG:3857') ]) }); var vectorSource = new ol.source.Vector({ features: [iconFeature1, iconFeature2, wireFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); </script>
    </body>
    </html>

[20200413165637310.png]: /images/20230528/9a264114b6804c419860dece59533db9.png