本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1030.html ，对应的 官网示例 https://openlayers.org/en/latest/examples/icon-color.html?q=Icon
image.png
image.png
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../include/ol.css" type="text/css">
<link rel="stylesheet" href="../include/bootstrap.css" type="text/css">
<script src="../include/ol.js"></script>
<script src="../include/jquery.js"></script>
<script src="../include/bootstrap.min.js"></script>
</head>
<body>
<div id="popup" style="width:40px"></div>
<div id="map" class="map"></div>
<script>
var rome = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
});
var london = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
});
var madrid = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
});
//地图上显示的三个不同颜色的点，加载同一张白色的图片，通过设置color属性，设置不同颜色
rome.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
color: '#8959A8',
crossOrigin: 'anonymous',
src: '../data/dot.png'
}))
}));
london.setStyle(new ol.style.Style({
image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */({
color: '#4271AE',
crossOrigin: 'anonymous',
src: '../data/dot.png'
}))
}));
madrid.setStyle(new ol.style.Style({
image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */({
color: [113, 140, 0],
crossOrigin: 'anonymous',
src: '../data/dot.png'
}))
}));
var vectorSource = new ol.source.Vector({
features: [rome, london, madrid]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q',
crossOrigin: ''
})
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([2.896372, 44.60240]),
zoom: 3
})
});
</script>
</body>
</html>
网友评论