plot_modifySymbolStyle.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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_modifySymbolStyle"></title>
  9. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  10. <script type="text/javascript" exclude="iclient-classic" include="iclient8c-plot,PlottingPanel"
  11. src="../../dist/classic/include-classic.js"></script>
  12. <style type="text/css">
  13. body {
  14. margin: 0;
  15. overflow: hidden;
  16. background: #fff;
  17. width: 100%;
  18. height: 100%;
  19. position: absolute;
  20. top: 0;
  21. }
  22. #map {
  23. position: absolute;
  24. left: 250px;
  25. right: 0px;
  26. height: 100%;
  27. }
  28. #menu {
  29. float: left;
  30. background: #ffffff;
  31. width: 250px;
  32. height: 100%;
  33. border: 1px solid #3473b7;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="menu">
  39. <div class="easyui-panel" style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;padding:5px; width: 100%;">
  40. <div id="stylePanel" data-i18n="[title]resources.text_attributePanel"></div>
  41. </div>
  42. </div>
  43. <div id="map"></div>
  44. <script>
  45. var plottingLayer, plottingEdit, layer, map, stylePanel;
  46. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  47. var mapurl = host + "/iserver/services/map-world/rest/maps/World";
  48. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  49. init();
  50. function init() {
  51. map = new SuperMap.Map("map", {
  52. controls: [
  53. new SuperMap.Control.LayerSwitcher(),
  54. new SuperMap.Control.ScaleLine(),
  55. new SuperMap.Control.Zoom(),
  56. new SuperMap.Control.Navigation({
  57. dragPanOptions: {
  58. enableKinetic: true
  59. }
  60. })]
  61. });
  62. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {
  63. transparent: true,
  64. cacheEnabled: true
  65. }, {maxResolution: "auto"});
  66. layer.events.on({"layerInitialized": addLayer});
  67. plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
  68. plottingLayer.style = {
  69. fillColor: "#66cccc",
  70. fillOpacity: 0.4,
  71. strokeColor: "#66cccc",
  72. strokeOpacity: 1,
  73. strokeWidth: 3,
  74. pointRadius: 6
  75. };
  76. //态势标绘编辑
  77. plottingEdit = new SuperMap.Control.PlottingEdit();
  78. //添加态势标绘控件
  79. map.addControls([plottingEdit]);
  80. }
  81. function addLayer() {
  82. map.addLayers([layer, plottingLayer]);
  83. map.setCenter(new SuperMap.LonLat(0, 0), 0);
  84. //创建属性面板
  85. stylePanel = new SuperMap.Plotting.StylePanel("stylePanel");
  86. stylePanel.addEditLayer(plottingLayer);
  87. //标绘标号
  88. plotSymbol();
  89. plottingEdit.activate();
  90. }
  91. function plotSymbol() {
  92. //标绘多边形
  93. var polygonPoints = [];
  94. polygonPoints.push(new SuperMap.Geometry.Point(-20, 0));
  95. polygonPoints.push(new SuperMap.Geometry.Point(-10, 20));
  96. polygonPoints.push(new SuperMap.Geometry.Point(-30, 40));
  97. polygonPoints.push(new SuperMap.Geometry.Point(-60, 10));
  98. plottingLayer.createSymbolWC(0, SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL, polygonPoints);
  99. //标绘折线
  100. var linePoints = [];
  101. linePoints.push(new SuperMap.Geometry.Point(0, 0));
  102. linePoints.push(new SuperMap.Geometry.Point(0, 20));
  103. linePoints.push(new SuperMap.Geometry.Point(20, 10));
  104. linePoints.push(new SuperMap.Geometry.Point(10, 30));
  105. plottingLayer.createSymbolWC(0, SuperMap.Plot.SymbolType.POLYLINESYMBOL, linePoints);
  106. }
  107. </script>
  108. </body>
  109. </html>