zoukankan      html  css  js  c++  java

  • （转）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.              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>  

    效果：



    --------------------------------------------
  • 相关阅读:
    【02】SASS与SCSS
    【02】sass更新的方法
    10.19 dig：域名查询工具
    10.7 netstat：查看网络状态
    10.6 ip：网络配置工具
    S11 Linux系统管理命令
    11.19 rpm:RPM包管理器
    11.20 yum：自动化RPM包管理工具
    11.2 uptime：显示系统的运行时间及负载
    11.3 free：查看系统内存信息
  • 原文地址：https://www.cnblogs.com/telwanggs/p/7364096.html
Copyright © 2011-2022 走看看