（转）WKT转换工具terraformers

http://blog.csdn.net/gisshixisheng/article/details/53150111

概述：

前面的文章中，提到了Arcgis中实现wkt转换为geometry，但是这种转换仅实现了简单的点（point）、线（polyline）和面（polygon）的转换，对于复杂点或者复杂多边形没有涉及，在本文讲述通过terraformers加载展示wkt。

 

terraformers简介:

terraformers是Esri的一个开源项目，主要功能如下：

大家可通过http://download.csdn.NET/detail/gisshixisheng/9681608下载相关的js文件，也可直接在github上下载，github上的地址为https://github.com/Esri/Terraformer。

 

实现代码：

1、Arcgis加载WKT

 

[html] view plain copy
 
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">  
  6.     <title>Hello Map</title>  
  7.     <link rel="stylesheet" href="http://localhost/arcgis_js_311/api/arcgis_js_api/library/3.11/3.11/dijit/themes/tundra/tundra.css">  
  8.     <link rel="stylesheet" href="http://localhost/arcgis_js_311/api/arcgis_js_api/library/3.11/3.11/esri/css/esri.css"><style>  
  9.         html, body, #map {  
  10.             height: 100%;  
  11.             width: 100%;  
  12.             margin: 0;  
  13.             padding: 0;  
  14.         }  
  15.     </style>  
  16.     <script src="../../plugin/terraformer/terraformer.js"></script>  
  17.     <script src="../../plugin/terraformer/terraformer-wkt-parser.js"></script>  
  18.     <script src="../../plugin/terraformer/terraformer-arcgis-parser.js"></script>  
  19.     <script src="http://localhost/arcgis_js_311/api/arcgis_js_api/library/3.11/3.11/init.js"></script>  
  20.     <script src="../../plugin/jquery/jquery-1.8.3.js"></script>  
  21.     <script>  
  22.         var map;  
  23.         require([ "esri/map",  
  24.             "esri/layers/ArcGISTiledMapServiceLayer",  
  25.             "esri/layers/GraphicsLayer",  
  26.             "esri/graphic",  
  27.             "esri/geometry/Point",  
  28.             "esri/geometry/jsonUtils",  
  29.             "esri/symbols/SimpleMarkerSymbol",  
  30.             "esri/symbols/SimpleLineSymbol",  
  31.             "esri/symbols/SimpleFillSymbol",  
  32.             "esri/Color",  
  33.             "dojo/domReady!"  
  34.         ],  
  35.         function(Map,  
  36.             Tiled,  
  37.             GraphicsLayer,  
  38.             Graphic,  
  39.             Point,  
  40.             geometryJsonUtils,  
  41.             SimpleMarkerSymbol,  
  42.             SimpleLineSymbol,  
  43.             SimpleFillSymbol,  
  44.             Color){  
  45.             map = new Map("map");  
  46.             var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/lzugis/base_china/MapServer");  
  47.             map.addLayer(tiled);  
  48.             var mapCenter = new Point(103.847, 36.0473, {"wkid":4326});  
  49.             map.centerAndZoom(mapCenter,1);  
  50.             var gLayer = new GraphicsLayer();  
  51.             map.addLayer(gLayer);  
  52.             gLayer.on("click",function(feature){  
  53.                 console.log(feature);  
  54.             });  
  55.             var wkts = [  
  56.                 "POINT(107.5758285931443 29.7822116459692)",  
  57.                 "LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",  
  58.                 "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"  
  59.             ];  
  60.             map.on("load",function(){  
  61.                 for(var i=0,len = wkts.length;i<len;i++){  
  62.                     var primitive = Terraformer.WKT.parse(wkts[i]);  
  63.                     var arcgis = Terraformer.ArcGIS.convert(primitive);  
  64.                     var geometry = geometryJsonUtils.fromJson(arcgis);  
  65.                     var symbol = getSymbol(geometry.type);  
  66.                     var gfx = new Graphic(geometry,symbol);  
  67.                     gLayer.add(gfx);  
  68.                 }  
  69.             });  
  70.               
  71.             function getSymbol(geotype){  
  72.                 var symbol = null;  
  73.                 if(geotype==="point"){  
  74.                     symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12,  
  75.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  76.                                 new Color([255,0,0]), 1),  
  77.                         new Color([0,0,255,255]));  
  78.                 }  
  79.                 else if(geotype==="polyline"){  
  80.                     symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  81.                                 new Color([255,0,0]), 2);  
  82.                 }  
  83.                 else{  
  84.                     symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,  
  85.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,  
  86.                         new Color([255,0,0]), 2),new Color([255,255,0,0.25])  
  87.                       );  
  88.                 }  
  89.                 return symbol;  
  90.             }  
  91.         });  
  92.     </script>  
  93. </head>  
  94. <body>  
  95. <div id="map"></div>  
  96. </body>  
  97. </html>  

效果：

 

2、leaflet加载WKT

 

[html] view plain copy
 
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
  6.     <title>leaflet</title>  
  7.     <link rel="stylesheet" href="../../plugin/leaflet/leaflet.css" type="text/css">  
  8.     <style>  
  9.         body {  
  10.             padding: 0;  
  11.             margin: 0;  
  12.         }  
  13.         html, body, #map {  
  14.             height: 100%;  
  15.         }  
  16.         .leaflet-control-attribution{  
  17.             display: none;  
  18.         }  
  19.     </style>  
  20.     <script src="../../plugin/jquery/jquery-1.8.3.js"></script>  
  21.     <script src="../../plugin/terraformer/terraformer.js"></script>  
  22.     <script src="../../plugin/terraformer/terraformer-wkt-parser.js"></script>  
  23.     <script src="../../plugin/leaflet/leaflet.js"></script>  
  24.     <script>  
  25.         var map;  
  26.         $(window).load(function() {  
  27.             map = L.map('map').setView([35.851354460363,104.21390114103], 4);//35.851354460363,104.21390114103  
  28.             var wms = L.tileLayer.wms("http://localhost:8088/geoserver/lzugis/wms", {  
  29.                 layers: 'province',  
  30.                 format: 'image/png',  
  31.                 transparent: true,  
  32.                 version:'1.1.1'  
  33.             });  
  34.             map.addLayer(wms);  
  35.             function onEachFeature(feature, layer) {  
  36.                 var popupContent = "<p>I started out as a WKT " +  
  37.                         feature.type + ", but now I'm a Leaflet vector!</p>";  
  38.                 if (feature.properties && feature.properties.popupContent) {  
  39.                     popupContent += feature.properties.popupContent;  
  40.                 }  
  41.                 layer.bindPopup(popupContent);  
  42.             }  
  43.             var wkts = [  
  44.                 "POINT(107.5758285931443 29.7822116459692)",  
  45.                 "LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",  
  46.                 "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"  
  47.             ];  
  48.             var geojsons = [];  
  49.             for(var i=0,len = wkts.length;i<len;i++){  
  50.                 var geojson = Terraformer.WKT.parse(wkts[i]);  
  51.                 geojsons.push(geojson);  
  52.             }  
  53.             var layer = L.geoJson(geojsons, {onEachFeature: onEachFeature}).addTo(map);  
  54.         });  
  55.     </script>  
  56. </head>  
  57. <body>  
  58. <div id="map"></div>  
  59. </body>  
  60. </html>  

效果：

 

 

 

 



--------------------------------------------

posted @ 2017-08-15 11:18  疯子110  阅读(3567)  评论(0)  编辑  收藏  举报