直接另存爲網頁瀏覽器打開即可：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>WKT</title> 5 <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> 6 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> 7 <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script> 8 9 </head> 10 <body> 11 <div id="map" class="map"></div> 12 <script> 13 // 底圖 14 var raster = new ol.layer.Tile({ 15 source: new ol.source.OSM() 16 }); 17 18 var wkt = 'POLYGON((10.689 -25.092, 34.595 ' + 19 '-20.170, 38.814 -35.639, 13.502 ' + 20 '-39.155, 10.689 -25.092))'; 21 22 var format = new ol.format.WKT(); 23 24 // wkt轉feature 25 var feature = format.readFeature(wkt, { 26 dataProjection: 'EPSG:4326', // 目標座標系 27 featureProjection: 'EPSG:3857'// 當前座標系 28 }); 29 30 // wkt轉feature構建矢量圖 31 var vector = new ol.layer.Vector({ 32 source: new ol.source.Vector({ 33 features: [feature] 34 }) 35 }); 36 // 將兩個圖層加到地圖對象 37 var map = new ol.Map({ 38 layers: [raster, vector], 39 target: 'map', 40 view: new ol.View({ 41 center: [2952104.0199, -3277504.823], 42 zoom: 4 43 }) 44 }); 45 </script> 46 </body> 47 </html> 48