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

最新推荐文章于 2024-05-29 14:15:41 发布

gis小白的成长之路

最新推荐文章于 2024-05-29 14:15:41 发布

阅读量2.2k

点赞数

分类专栏： ARCGIS API WKT 文章标签： javascript

本文链接：https://blog.csdn.net/qq_36179257/article/details/109242149

版权

ARCGIS API 同时被 2 个专栏收录

21 篇文章 18 订阅

订阅专栏

WKT

1 篇文章 0 订阅

订阅专栏

需求场景:从接口获得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
评论
ARCGIS API 加载WKT(terraformers工具的使用)

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

扫一扫