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

  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. function getSymbol(geotype){
  71. var symbol = null;
  72. if(geotype==="point"){
  73. symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12,
  74. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
  75. new Color([255,0,0]), 1),
  76. new Color([0,0,255,255]));
  77. }
  78. else if(geotype==="polyline"){
  79. symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
  80. new Color([255,0,0]), 2);
  81. }
  82. else{
  83. symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
  84. new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
  85. new Color([255,0,0]), 2),new Color([255,255,0,0.25])
  86. );
  87. }
  88. return symbol;
  89. }
  90. });
  91. </script>
  92. </head>
  93. <body>
  94. <div id="map"></div>
  95. </body>
  96. </html>

效果：

2、leaflet加载WKT

  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>

效果：

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

（转）WKT转换工具terraformers的更多相关文章

  1. Unicode编码解码在线转换工具

    // Unicode编码解码在线转换工具 Unicode 是基于通用字符集(Universal Character Set)的标准来发展,并且同时也以书本的形式(The Unicode Standar ...

  2. android px,dp,sp大小转换工具

    package com.voole.playerlib.util; import android.content.Context; /** * Android大小单位转换工具类<br/> ...

  3. Json与javaBean之间的转换工具类

    /**  * Json与javaBean之间的转换工具类  *  * {@code 现使用json-lib组件实现  *    需要  *     json-lib-2.4-jdk15.jar  * ...

  4. Rsa加解密Java、C#、php通用代码 密钥转换工具

    之前发了一篇"TripleDes的加解密Java.C#.php通用代码",后面又有项目用到了Rsa加解密,还是在不同系统之间进行交互,Rsa在不同语言的密钥格式不一样,所以过程中主 ...

  5. ubuntu下编码转换工具

    ubuntu打开windows下的txt或者代码文件,经常会出现乱码, ubuntu自带一种转换工具,是命令行的,下面提供一种最简单的方法进行转换 比如要转换的文件为1.txt,进入1.txt的目录 ...

  6. 日期转换工具类 CommUtil.java

    package com.util; import java.text.ParseException; import java.text.SimpleDateFormat; import java.ut ...

  7. 视频转换工具 Transmageddon

    点这里 Transmageddon 是一个采用 Python 语言开发的视频转换工具,支持输出几乎所有的视频格式,同时也可以生成指定平台下的视频格式. 软件界面如下图所示

  8. Base64 图片转换工具

    以前在写asp的后台的时候,有一个上传功能是必须的,那时候进行的图片预览(未上传前)其实就是获取本地的图片路径来显示图片,但是随着HTML5的出现,可以把图片通过编码来实现预览. 在雅虎的36条速度优 ...

  9. web字体格式及几种在线格式转换工具介绍

    原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字 ...

随机推荐

  1. swift编程语言基础教程 中文版

    swift编程语言基础教程 中文版 http://download.csdn.net/detail/u014036026/7845491

  2. jquery選取所有checkbox和判斷是否全部checkbox已經被勾選

    前言 勾選/取消勾選 全部勾選checkbox的時候 勾選/取消勾選 所有對應的checkbox 當所有對應checkbox有別勾選的時候, 全部勾選checkbox 也要被勾選 完整程式碼範例 前言 ...

  3. 使用adb在电脑和手机间传文件

    首先须要root手机. 然后,"Win + R",打开cmd窗体.以下以copy d:\1.txt到/system/文件夹为例说明. adb push source(localpa ...

  4. 【C/C++多线程编程之五】pthread线程深入理解

    多线程编程之pthread线程深入理解       Pthread是 POSIX threads 的简称,是POSIX的线程标准.           前几篇博客已经能给你初步的多线程概念.在进一步学 ...

  5. IEDA-maven引用本地jia包

    简单说下为啥用maven引用本地jar包:当在pom文件中配置需要引用了jar的坐标,但是maven引用不了(原因未知情况下),这种情况下就需要找开发提供相关依赖的的jar文件打成一个jar包发送过来 ...

  6. [计算机]如何在win7下查看并更改文件的默认后缀名

    如何在win7下查看默认文件的后缀名并更改呢? 例如有一个文件本来是exe,想变更为txt.但是无法看到后缀名,就无法更改. 双击桌面上的计算机图标,或者任意盘符界面,单击如下图左侧“组织”右侧的下拉 ...

  7. nohup 程序在后台运营 避免 xshell 卡死 通过 nohup.out分析调取系统命令时的异常分析

    nohup  程序在后台运营 避免 xshell  卡死 [root@admin1 after_fc_distributed]# nohup /root/anaconda3/bin/python da ...

  8. Delphi中WebBrowser控件打开部分网站报"Invalid floating point operation”解决

    Delphi中WebBrowser控件打开部分网站报"Invalid floating point operation”解决 EmbeddedWBWebBrowserDelphi  最近用E ...

  9. ios21--xib例子

    故事板控制器: // // XMGViewController.m // 03-综合练习 // // Created by xiaomage on 15/12/28. // Copyright © 2 ...

  10. hdu 6035(树形dp）

    题意:给你棵树,树上每个节点都有颜色,每条路径上有m种颜色  问你所有路径上出现的颜色的和 思路:答案求的是每种颜色对路径的贡献  我们可以反过来每种颜色不经过的路径的条数 假设根节点的颜色为x  我 ...