ARCGIS API 加载WKT(terraformers工具的使用)

最新推荐文章于 2024-05-10 10:03:33 发布
最新推荐文章于 2024-05-10 10:03:33 发布
阅读量2.2k 收藏 4
点赞数
分类专栏： ARCGIS API WKT 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36179257/article/details/109242149
版权

需求场景:从接口获得WKT格式数据，在前端通过ARCGIS JS API呈现到页面。
ARCGIS JS API 无法直接使用WKT格式数据，但通过terraformers工具的转换后可以使用。terraformers是Esri的一个开源项目，参考：https://github.com/Esri/Terraformer，主要作用是可以将wkt转换为geometry。
在这里插入图片描述
直接上代码，为了测试方便，接口数据用测试数据替代，其他引用的模块和地图都来自互联网，复制可直接运行。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
  <style>
      html,
      body,
      #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body>
  <input type="button" value="点" onclick="getMap('point')">
  <input type="button" value="线" onclick="getMap('polyline')">
  <input type="button" value="面" onclick="getMap('polygon')">
  <!-- 地图区域 -->
  <div id="map"></div>
</body>
  <script src="https://unpkg.com/terraformer@1.0.8"></script>
  <script src="https://unpkg.com/terraformer-arcgis-parser@1.0.5"></script>
  <script src="https://unpkg.com/terraformer-wkt-parser@1.1.2"></script>
  <script src="https://js.arcgis.com/3.26/"></script>
  <script>
    var map, getMap;
    require([
      "esri/map",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/geometry/Extent",
      "esri/layers/GraphicsLayer",
      "esri/graphic",
      "esri/geometry/Point",
      "esri/geometry/jsonUtils",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/Color",
      "dojo/domReady!"
    ], function(
      Map,
      ArcGISTiledMapServiceLayer,
      Extent,
      GraphicsLayer,
      Graphic,
      Point,
      geometryJsonUtils,
      SimpleMarkerSymbol,
      SimpleLineSymbol,
      SimpleFillSymbol,
      Color
  ) {
    //地图范围
    var mapExtent = new Extent({
      xmax: 113.799760210539,
      xmin: 106.57095767482662,
      ymax: 20.459116202966324,
      ymin: 18.27952992162579,
      spatialReference: {
        wkid: 4326
      }
    })
   
    map = new Map("map", {
      extent: mapExtent,
      sliderStyle: "small",
      logo: false,
    });
 
    map.on('load', function () {
       map.hideZoomSlider()
       map.hidePanArrows()
    })
 
    //arcgis 在线切片底图
    var myTileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer", {
      visible: true
    });
    map.addLayer(myTileLayer)

    //绘制图层
    var ghLayer = new GraphicsLayer();
    map.addLayer(ghLayer);

    //WKT格式测试数据
    var wktData = [
      "POINT(110.7692 19.7441)",
      "LINESTRING(110.4025 19.2101,109.9402 18.5681)",
      "POLYGON((110.4235 19.8364,109.7155 19.8026,108.8381 18.9952,109.4193 18.3927))"]

    getMap = function(geoType) {
      var primitive = null
      var symbol = null
      switch (geoType) {
        case "point":
          primitive = Terraformer.WKT.parse(wktData[0]);
          symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 1),new Color([0,0,255,255]))
          break;
        case "polyline":
          primitive = Terraformer.WKT.parse(wktData[1]);
          symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 2)
          break;
        case "polygon":
          primitive = Terraformer.WKT.parse(wktData[2]);
          symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 2),new Color([255,255,0,0.25]))
          break;
      }
      var arcgis = Terraformer.ArcGIS.convert(primitive)
      var geometry = geometryJsonUtils.fromJson(arcgis)
      console.log(geometry)
      var gh = new Graphic(geometry,symbol)
      ghLayer.add(gh)
    }    
  })
  </script>
</html>

在这里插入图片描述

gis小白的成长之路
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WKT与ArcGIS的feature互转
记忆博客
09-15 693
1、封装WKTUtil.js var WKTUtil = function(options){ this.initialize(options); } WKTUtil.prototype = { /** * Constructor: OpenLayers.Format.WKT * Create a new parser for WKT * * Parameters: * options - {Object} An optional ob...
wkt转arcgis之geometry第三方组件（来自开源项目，提供完整实例代码，仅供技术交流）
03-07
改脚本实现了wkt转arcgis，提供point, multipoint,linestring,multilinestring,polygon,multipolygon的转换支持。并提供完整实例和测试数据。供交流技术参考。
探索Terraformer：基础设施到Terraform代码的桥梁
最新发布
gitblog_00053的博客
05-10 307
探索Terraformer：基础设施到Terraform代码的桥梁 项目地址:https://gitcode.com/GoogleCloudPlatform/terraformer 项目介绍 Terraformer是一个强大的命令行工具，旨在将现有的基础设施转换为Terraform配置文件（.tf和.tfstate），这一过程被称为反向Terraform。它由Waze SRE团队创建，虽然不是官方...
ArcGIS 添加存WKT字符串的字段
mzfly的博客
11-15 988
ArcMap10.2： 1.开启编辑 2.新建一个足够长的字符类型字段 3.开启编辑图层 4.右键字段 5.打开字段计算器 6.解析程序选择：Python 7.在表达式输入框输入：!shape!.wkt 8.点击确定 ...
terraformer-arcgis-parser
05-06
重要的！ 此仓库是已归档的Terraformer项目的一部分。 有关更多详细信息，请参见 。 Terraformer ArcGIS JSON解析器 和之间的双向转换。 正在安装 Node.js $ npm install terraformer-arcgis-parser 浏览器 在浏览器中，需要 。 文献资料 有关完整的文档，请查看 。 Node.js var ArcGIS = require ( 'terraformer-arcgis-parser' ) ; // parse ArcGIS JSON, convert it to a Terraformer.Primitive (GeoJSON) var primitive = ArcGIS . parse ( { 'x' : - 122.6764 , 'y' : 45.5165 , 'spatialRe
WKT转换工具terraformers
weixin_30510153的博客
11-13 699
概述：前面的文章中，提到了Arcgis中实现wkt转换为geometry，但是这种转换仅实现了简单的点（point）、线（polyline）和面（polygon）的转换，对于复杂点或者复杂多边形没有涉及，在本文讲述通过terraformers加载展示wkt。terraformers简介:terraformers是Esri的一个开源项目，主要功能如下：大家可通过http://download.c...
ArcMap中使用ArcPy实现Geometry与WKT的相互转换（转载）
weixin_30467087的博客
09-06 532
转自：在Web GIS迅猛发展的http://blog.csdn.net/linghe301/article/details/29554257 今天，使用浏览器来进行交互以其方便性、快捷性被广大用户所推崇，那么在传输格式方面，都已比较简单的JSON或者WKT来解决网络带宽带来的数据压力。 在ArcGIS10.2版本，已经提供了Geometry与JSON的相互转换，而且在现实业务中，Geo...
ArcGIS API 4.10之加载百度地图
01-18
基于ArcGIS API 4.10，通过自定义BaseTileLayer类来实现在三维球体加载显示百度地图和影像地图
ArcGIS API for Javascript3加载天地图
12-21
利用ArcGIS API for Javascript3最新版本【3.23】加载天地图，包括矢量图、影像图、地形图，并包含标注图层。
ArcGIS API for JavaScript4.10加载腾讯地图
01-19
使用ArcGIS API for Javascript 4版本的最新版本4.10，通过扩展BaseTileLayer来自定义图层来加载腾讯矢量地图、影像、地形图、以及暗色矢量图
ArcGIS API for JavaScript3加载谷歌地图
12-28
利用ArcGIS API for JavaScript最新版本【3.23】加载在线谷歌地图，谷歌影像（包括标注）
WKT转换工具terraformer
11-13
WKT转换工具terraformer
terraformer-wkt-parser:Terraformer的知名文本解析器
05-06
重要的！ 此仓库是已归档的Terraformer项目的一部分。 有关更多详细信息，请参见 。 Terraformer知名的文本解析器 和WKT之间的双向转换。 属于项目的一部分。 正在安装 Node.js $ npm install terraformer-wkt-parser 浏览器 在浏览器中，还必须使用Terraformer。 $ bower install terraformer-wkt-parser 文献资料 有关完整文档，请查看 。 var wkt = require ( 'terraformer-wkt-parser' ) ; // parse a WKT file, convert it into a terraformer primitive var primitive = wkt . parse ( 'LINESTRING (30 10, 10 30, 40
ArcGIS Js API 加载WMTS服务
08-07
NULL 博文链接：https://wzg866.iteye.com/blog/2110958
6.（地图数据篇）wkt坐标转geojson坐标（后端java）
GIS之家家长
07-04 467
地图之家：cesium+leaflet+echart+地图数据+地图工具等相关内容的介绍 1、加入maven依赖 2、编写实现类
Terraformer-wkt-parser wkt和geoJson转换
weixin_41025720的博客
04-18 2710
geoJson与wkt都是WebGIS开发中经常用到的格式，很多时候WebGIS人员需要在二者之间进行互相转换。可以尝试用Terraformer-wkt-parser进行一下二者的转换。 这个插件主要有两个函数 parse(string) wkt转为geojson convert(string) geojson转wkt 安装： npm install terraformer-wkt-parser --save 引入： import WKT from "terrafor
Arcgis for js之WKT和GEOMETRY的相互转换
herogui的专栏
11-08 2458
转：https://blog.csdn.net/GISShiXiSheng/article/details/44057453
ArcGIS客户端API中加载大量数据的几种解决办法
weixin_30621711的博客
08-04 388
ArcGIS客户端API中加载大量数据的几种解决办法 2011-03-25 18:17 REST风格的一切事物方兴未艾，ArcGIS Server的客户端API(Javascript/Flex/Silverlight API)也逐渐站上了GIS舞台的中央。虽然客户端API给我们带来了更快捷的开发体验，更丰富的展现效果，但有些（奇怪的）需求还不能直接解决。比如要求...
加载wkt就如此简单 -来自openlayers
zw3413的专栏
12-29 2969
一个简单的加载wkt到地图的示例，代码来自openlayers官网。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;WKT&lt;/title&gt; &lt;link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol
arcgis api 加载高德地图作为底图
07-01
### 回答1： 要在ArcGIS API中加载高德地图作为底图，需要按以下步骤操作： 1. 获取高德地图的服务URL。可以通过高德地图开放平台提供的API或其他方法获取到高德地图的服务URL。 2. 在ArcGIS API的地图对象中添加图层。首先，创建一个新的ArcGIS地图对象，并将高德地图的服务URL作为底图添加到地图中。 ```javascript var map = new Map({ basemap: { baseLayers: [ new TileLayer({ portalItem: { id: { // 高德地图的服务URL // 例如：http://webrd0{subDomain}.is.autonavi.com/appmaptile?style=6&x={col}&y={row}&z={level} // "{level}" 表示缩放级别, "{col}" 表示列号, "{row}" 表示行号, "{subDomain}" 表示服务器子域 // 要根据高德地图的服务URL的具体格式进行替换 source: "<高德地图的服务URL>" } } }) ] } }); ``` 3. 创建视图对象并将地图对象附加到视图中。将地图对象设置为视图的地图属性，然后将视图附加到指定的DOM元素上。 ```javascript var view = new MapView({ container: "viewDiv", // 将视图附加到具有指定ID的DOM元素上 map: map // 设置视图的地图为之前创建的地图对象 }); ``` 通过以上步骤，就可以在ArcGIS API中成功加载高德地图作为底图了。可以根据具体需求进行其他配置和样式的设定，例如放大倍数、中心点、缩放范围等。 ### 回答2： 要加载高德地图作为ArcGIS API的底图，需要按照以下步骤进行操作。 首先，打开ArcGIS API for JavaScript官方网站，并下载最新的API版本。安装完成后，将它引入到你的项目中。 接下来，你需要在你的HTML文件中创建一个容器，用于显示地图。可以使用div元素，并设置其宽度和高度。 在你的JavaScript代码中，首先创建一个地图对象。使用arcgis对象中的Map类可以实现这一功能。在创建地图对象时，需要指定地图容器的ID以及其他的可选参数，如初始缩放级别和初始中心点。 接下来，你需要创建一个底图图层对象，并将其添加到地图对象中。使用arcgis对象中的TileLayer类可以加载高德地图服务作为底图。在创建底图图层对象时，需要指定该服务的URL。 最后，将地图对象添加到地图容器中，并显示地图。使用arcgis对象中的MapView类可以实现这一功能。在创建MapView对象时，需要指定地图对象、地图容器对象以及其他的可选参数，如初始视图范围。 加载高德地图作为ArcGIS API的底图需要使用合适的API版本，创建地图对象、底图图层对象和视图对象，并将它们按照正确的顺序进行添加和显示。通过以上步骤，你可以成功加载高德地图作为ArcGIS API的底图。 ### 回答3： 要将高德地图作为ArcGIS API的底图，可以按照以下步骤进行： 1. 首先，在ArcGIS API的官方文档中找到相关的代码示例或文档，这些示例和文档将指导你如何加载外部地图服务。 2. 打开ArcGIS API的开发环境，创建一个新的HTML文件。 3. 在HTML文件中，引入ArcGIS API的JavaScript库文件，并对其进行初始化。 4. 在JavaScript代码中，创建一个地图对象，并指定地图的初始显示范围、放大级别等。 5. 使用ArcGIS API提供的图层对象，加载高德地图的服务URL作为底图图层。 6. 设置地图对象的底图图层为加载的高德地图图层。 7. 运行或部署该HTML文件，以查看加载的高德地图作为ArcGIS API的底图的效果。 需要注意的是，使用高德地图作为ArcGIS API的底图需要确保高德地图服务的URL和相关访问秘钥是有效的，并且遵循高德地图和ArcGIS API的使用协议和限制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值