加载wkt到地图 Demo (可直接运行）

直接另存为网页浏览器打开即可：

 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

 

posted @ 2023-07-24 18:22  Angelasp  阅读(70)  评论(0)  编辑  收藏  举报