openlayers 可以实现3d地图效果吗_OpenLayers教程：图形绘制之设置图形的样式
生活随笔
收集整理的這篇文章主要介紹了
openlayers 可以实现3d地图效果吗_OpenLayers教程：图形绘制之设置图形的样式
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
OpenLayers可以對整個矢量圖層統(tǒng)一設置樣式，也可以單獨對某個要素設置樣式，本文介紹對整個矢量圖層設置樣式。
OpenLayers的ol.style.Style類用于設置樣式，它需要結(jié)合另外三個類ol.style.Image、ol.style.Stroke、ol.style.fill分別設置點或圓的樣式、邊界線的樣式、填充樣式，另外ol.style.Text類用于設置要素注記。
來看一個示例：
樣式效果：
graphicStyle.html:
<!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>設置幾何圖形樣式</title><link rel="stylesheet" href="../v5.3.0/css/ol.css" /><script src="../v5.3.0/build/ol.js"></script> </head> <body><div id="map"></div><label>Shape type </label><select id="type"><option value="Point">Point</option><option value="LineString">LineString</option><option value="Polygon">Polygon</option><option value="Circle">Circle</option><option value="Square">Square</option><option value="Box">Box</option><option value="None">None</option></select><script>let vectorSource = new ol.source.Vector();let vectorLayer = new ol.layer.Vector({source: vectorSource,// 設置圖層樣式style: new ol.style.Style({// 將點設置成圓形樣式image: new ol.style.Circle({// 點的顏色fill: new ol.style.Fill({color: '#F00'}),// 圓形半徑radius: 5}),// 線樣式stroke: new ol.style.Stroke({color: '#0F0',lineCap: 'round', // 設置線的兩端為圓頭width: 5 }),// 填充樣式fill: new ol.style.Fill({color: '#00F'})})});let map = new ol.Map({target: 'map', layers: [new ol.layer.Tile({ // 瓦片圖層source: new ol.source.OSM() // OpenStreetMap數(shù)據(jù)源}),vectorLayer],view: new ol.View({ // 地圖視圖projection: 'EPSG:3857',center: [0, 0],zoom: 0})});let typeSelect = document.getElementById('type');let draw;function addInteraction(){let type = typeSelect.value;if(type !== 'None'){let geometryFunction;switch(type){ case "Square": type = 'Circle';// 生成規(guī)則的四邊形的圖形函數(shù)geometryFunction = ol.interaction.Draw.createRegularPolygon(4);break;case 'Box':type = 'Circle';// 生成盒形狀的圖形函數(shù)geometryFunction = ol.interaction.Draw.createBox();break;default:break;}// 初始化Draw繪圖控件console.log(type);draw = new ol.interaction.Draw({source: vectorSource,type: type,geometryFunction: geometryFunction});// 將Draw繪圖控件加入Map對象map.addInteraction(draw);}}typeSelect.addEventListener('change', () => {// 移除Draw繪圖控件map.removeInteraction(draw);addInteraction();});addInteraction();</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的openlayers 可以实现3d地图效果吗_OpenLayers教程：图形绘制之设置图形的样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 字符文本中的字符太多_文本对抗---字符
- 下一篇： vant coupon 时间戳如何计算_