您的位置：首页 > 运维架构

openlayers画线 (七)

2020-04-13 16:58 106 查看

创建要素

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);

查看效果

线的其他操作可以参考上一篇文章，点是如何操作的。

完整代码

<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航