<!DOCTYPE html> <html> <head> <title>Icon Colors</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script> <style> #map { position: relative; } </style> </head> <body> <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])) }); rome.setStyle(new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ color: '#8959A8', src: 'https://openlayers.org/en/v4.0.1/examples/data/dot.png' })) })); london.setStyle(new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ color: '#4271AE', src: 'https://openlayers.org/en/v4.0.1/examples/data/dot.png' })) })); madrid.setStyle(new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ color: [113, 140, 0], src: 'https://openlayers.org/en/v4.0.1/examples/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/v3/mapbox.geography-class.json?secure', 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>
OpenLayers示例代码:图标颜色
Copyright © Since 2014.
开源地理空间基金会中文分会
吉ICP备05002032号
Powered by TorCMS