<!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 href="https://cdn.bootcdn.net/ajax/libs/ol3/4.6.5/ol.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/ol3/4.6.5/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
//地图层
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
// 将层添加进地图
var wireFeature = new ol.Feature({
geometry: new ol.geom.LineString([
[13525596.430109723, 3663568.4585909187],
[13525596.430109723, 3664870.4650621596]
])
});
var vectorSource = new ol.source.Vector({
features: [wireFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 4
}),
})
});
// 创建地图
var map = new ol.Map({
layers: [raster,vectorLayer],
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
})
// map.addLayer(vectorLayer);
</script>
</body>
</html>
openlayers 地图 画线
最新推荐文章于 2024-06-07 23:45:00 发布