mapVLayerPolylineSimple.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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_mapVLayerPolylineSimple"></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,widgets.alert" src="../js/include-web.js"></script>
  13. <script type="text/javascript" include="mapv" src="../../dist/classic/include-classic.js"></script>
  14. <script type="text/javascript">
  15. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  16. var map, baseLayer, mapvLayer,
  17. url = host + "/iserver/services/map-china400/rest/maps/China_4326";
  18. init();
  19. function init() {
  20. if (!document.createElement('canvas').getContext) {
  21. widgets.alert.showAlert(resources.msg_supportCanvas, false);
  22. return;
  23. }
  24. map = new SuperMap.Map("map", {
  25. controls: [
  26. new SuperMap.Control.Attribution(),
  27. new SuperMap.Control.ScaleLine(),
  28. new SuperMap.Control.Zoom(),
  29. new SuperMap.Control.Navigation({
  30. dragPanOptions: {
  31. enableKinetic: true
  32. }
  33. })
  34. ]
  35. });
  36. baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {
  37. transparent: true,
  38. cacheEnabled: true
  39. }, {
  40. maxResolution: "auto"
  41. });
  42. baseLayer.events.on({
  43. "layerInitialized": addLayer
  44. });
  45. }
  46. function addLayer() {
  47. map.addLayers([baseLayer]);
  48. map.setCenter(new SuperMap.LonLat(104, 34.7), 2);
  49. createMapVLayer();
  50. }
  51. //示例数据来源为百度MapV的加偏数据,iClient未做纠偏处理
  52. function createMapVLayer() {
  53. var randomCount = 1000;
  54. var data = [];
  55. var citys = [
  56. "北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特",
  57. "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌",
  58. "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川",
  59. "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"
  60. ];
  61. //自定义数据
  62. while (randomCount--) {
  63. var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
  64. var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
  65. data.push({
  66. geometry: {
  67. type: 'LineString',
  68. coordinates: [
  69. [cityCenter1.lng - 1 + Math.random() * 1, cityCenter1.lat - 1 + Math.random() *
  70. 1
  71. ],
  72. [cityCenter2.lng - 1 + Math.random() * 1, cityCenter2.lat - 1 + Math.random() *
  73. 1
  74. ]
  75. ]
  76. },
  77. count: 30 * Math.random()
  78. });
  79. }
  80. var dataSet = new mapv.DataSet(data);
  81. var options = {
  82. strokeStyle: 'rgba(255, 10, 50, 0.3)',
  83. shadowColor: 'rgba(255, 10, 50, 1)',
  84. shadowBlur: 20,
  85. lineWidth: 0.7,
  86. draw: 'simple'
  87. };
  88. mapvLayer = new SuperMap.Layer.MapVLayer("mapv", {
  89. dataSet: dataSet,
  90. options: options
  91. });
  92. map.addLayer(mapvLayer);
  93. setTimeout(function () {
  94. openToolTip(resources.text_iClient, map.getCenter());
  95. }, 1000);
  96. }
  97. function openToolTip(text, latLng) {
  98. var contentHTML = "<div style='width:216px; font-size:12px;font-weight:bold ; opacity: 0.8'>";
  99. contentHTML += text;
  100. contentHTML += "</div>";
  101. framedCloud = new SuperMap.Popup.FramedCloud(
  102. "chicken",
  103. latLng,
  104. null,
  105. contentHTML,
  106. null,
  107. true,
  108. null,
  109. true
  110. );
  111. map.addPopup(framedCloud);
  112. }
  113. </script>
  114. </body>
  115. </html>