OGC_GeoJSON.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="utf-8">
  8. <title data-i18n="resources.title_GeoJSON"></title>
  9. </head>
  10. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  11. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  12. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  13. <script type="text/javascript" exclude="iclient-classic" include="OSMBuildings-SuperMap"
  14. src="../../dist/classic/include-classic.js"></script>
  15. <script type="text/javascript">
  16. var map, layer,vLayer,
  17. host = window.isLocal ? window.server : "https://iserver.supermap.io";
  18. url = host + "/iserver/services/map-world/rest/maps/World";
  19. //初始化地图
  20. map = new SuperMap.Map("map", {
  21. controls: [
  22. new SuperMap.Control.Navigation(),
  23. new SuperMap.Control.MousePosition(),
  24. new SuperMap.Control.LayerSwitcher(),
  25. new SuperMap.Control.Zoom()
  26. ]
  27. });
  28. //初始化图层
  29. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, {maxResolution: "auto"});
  30. vLayer = new SuperMap.Layer.Vector("vector");
  31. //监听图层信息加载完成事件
  32. layer.events.on({"layerInitialized": addLayer});
  33. //异步加载图层
  34. function addLayer() {
  35. map.addLayers([layer, vLayer]);
  36. map.setCenter(new SuperMap.LonLat(102.0, 0.5), 4);
  37. //GeoJSON对象,也可以是一个字符串
  38. var geojson = {
  39. "type": "FeatureCollection",
  40. "features": [
  41. {
  42. "type": "Feature",
  43. "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
  44. "properties": {"prop0": "value0"}
  45. },
  46. {
  47. "type": "Feature",
  48. "geometry": {
  49. "type": "LineString",
  50. "coordinates": [
  51. [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
  52. ]
  53. },
  54. "properties": {
  55. "prop0": "value0",
  56. "prop1": 0.0
  57. }
  58. },
  59. {
  60. "type": "Feature",
  61. "geometry": {
  62. "type": "Polygon",
  63. "coordinates": [
  64. [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
  65. [100.0, 1.0], [100.0, 0.0]]
  66. ]
  67. },
  68. "properties": {
  69. "prop0": "value0",
  70. "prop1": {"this": "that"}
  71. }
  72. }
  73. ]
  74. };
  75. //创建一个GeoJSON解析器
  76. var geojsonParse = new SuperMap.Format.GeoJSON();
  77. //将GeoJSON对象转化成要素数组
  78. var features = geojsonParse.read(geojson);
  79. //最后将要素数组加到矢量图层里面进行渲染
  80. vLayer.addFeatures(features);
  81. }
  82. </script>
  83. </body>
  84. </html>