I want to draw a polygon in OpenLayers. I have tried to make ol.geom.polygon.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" /><script src="https://unpkg.com/[email protected]/dist/ol-layerswitcher.js"></script><link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/ol-layerswitcher.css" /><script type="module">
import{toLonLat as A}from"https://cdn.jsdelivr.net/npm/[email protected]/proj.js";import{fromExtent as e}from"https://cdn.jsdelivr.net/npm/[email protected]/geom/Polygon.js";globalThis.init=function(){var A,e;A=new ol.Map({target:"map",renderer:"canvas",view:new ol.View({projection:"EPSG:900913"})}),window.ap=A;const C=new ol.layer.Tile({title:"grid",source:new ol.source.XYZ({tileUrlFunction:function(A){return"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAPLSURBVHhe7dsxbmMxEAXBT9//zlwT2BN4ggm6ChAUCU9Rg8mc7/vu7+fP7h39/Dvn/YW/s29/or7/8/8bCBIACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACDt3eFDsntv+hP3dfS8ACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACHvHxKODZPfc9ifs7+57AUCYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAEDYucODYvfc9ifs7+57AUCYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAEDYOyYeHSS757Y/YX933wsAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAws4dHhS757Y/YX933wsAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwgQAwt4x8egg2T23/Qn7u/teABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABB27vCg2D23/Qn7u/teABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABD2jolHB8nuue1P2N/d9wKAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAsHOHB8Xuue1P2N/d9wKAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAsHdMPDpIds9tf8L+7r4XAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAISdOzwods9tf8L+7r4XAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIQJAIS9Y+LRQbJ7bvsT9nf3vQAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAg7NzhQbF7bvsT9nf3vQAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAg7B0Tjw6S3XPbn7C/u+8FAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGHnDg+K3XPbn7C/u+8FAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAGECAFnf9w8MTpHYBEBGyAAAAABJRU5ErkJggg=="}})});A.addLayer(C),e=new ol.proj.transform([4.35247,50.84673],"EPSG:4326",A.getView().getProjection()),A.getView().setCenter(e),A.getView().setZoom(15);const g=new ol.format.OSMXML,o=new ol.source.Vector({format:g,loader:function(e,C,t,B,r){ol.proj.transformExtent(e,t,"EPSG:4326");fetch(osmFile).then((e=>{e.text().then((e=>{const C=g.readFeatures(e,{featureProjection:A.getView().getProjection()});o.addFeatures(C),B(C)}))})).catch(r)},strategy:ol.loadingstrategy.fixed});ol.color.asString(ol.color.asArray("orange").slice(0,3).concat(.1));let t=new ol.control.LayerSwitcher({tipLabel:"Légende"});A.addControl(t);var B=new ol.layer.Vector({source:new ol.source.Vector({features:[new ol.Feature({geometry:new ol.geom.Point(ol.proj.fromLonLat([4.35247,50.84673]))}),new ol.Feature({geometry:new ol.geom.Polygon([[[8623931.28,1449016.75],[8624007.72,1458265.63],[8629358.31,1458571.37],[8628441.06,1455284.58],[8625765.77,1449781.12],[8630275.55,1453450.09],[8629281.88,1452456.42],[8627294.51,1451080.54],[8625765.76,1449781.11],[8623931.28,1449016.75]]])})]})});A.addLayer(B)};</script></head><body onload="init()"><div id="map" style="width:100%;height:100%"></div>
New contributor
user27412789 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3