6

使用superMap实现点标注和区域着色教程详解

 2 years ago
source link: https://www.huhexian.com/44142.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

使用superMap实现点标注和区域着色教程详解

2022-05-1909:46:42评论

本文章主要介绍了使用superMap实现点标注和区域着色，具有不错的的参考价值，希望对您有所帮助，如解说有误或未考虑完全的地方，请您留言指出，谢谢！

使用superMap实现点标注和区域着色教程详解

1、定义html文件，引入superMap的js和theme文件：

<script src='${_ctxPath }/statics/js/superMap/SuperMap.Include.js'></script>

2、定义dom对象，用于初始化地图对象

<div id="container" style="width: 100%; height: 100%"></div>

3、定义不同区域的不同样式

  1. var style = { 
  2.         strokeColor : "#CAFF70", 
  3.         fillColor : "#FF4500", 
  4.         strokeWidth : 2, 
  5.         fillOpacity : 0.2, 
  6.         label : "西方\nWestern", 
  7.         labelXOffset : 30, 
  8.         labelYOffset : 20, 
  9.         fontColor : "#FFFF6F" 
  10.     var style1 = { 
  11.         strokeColor : "#CAFF70", 
  12.         fillColor : "#8A2BE2", 
  13.         strokeWidth : 2, 
  14.         fillOpacity : 0.2, 
  15.         label : "西方\nWestern", 
  16.         labelXOffset : 30, 
  17.         labelYOffset : 20, 
  18.         fontColor : "#FFFF6F" 
  19.     var style2 = { 
  20.         strokeColor : "#CAFF70", 
  21.         fillColor : "#FFD700", 
  22.         strokeWidth : 2, 
  23.         fillOpacity : 0.3, 
  24.         label : "西方\nWestern", 
  25.         labelXOffset : 30, 
  26.         labelYOffset : 20, 
  27.         fontColor : "#FFFF6F" 


4、初始化地图对象和其他图层对象


var map, layer, marker, marker1, marker2, markers, vectorLayer;

url = "http://localhost:8090/iserver/services/map-china400/rest/maps/China";


  1. $(function() { 
  2.         //初始化地图 
  3.         map = new SuperMap.Map("container", { 
  4.             controls : [ new SuperMap.Control.Navigation(), 
  5.                     new SuperMap.Control.PanZoomBar() ] 
  6.         map.addControl(new SuperMap.Control.MousePosition()); 
  7.         //初始化图层 
  8.         layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, { 
  9.             maxResolution : "auto" 
  10.         //监听图层信息加载完成事件 
  11.         layer.events.on({ 
  12.             "layerInitialized" : addLayer 
  13.         //初始化标记图层类 
  14.         markers = new SuperMap.Layer.Markers("Markers"); 
  15.         layer.events.on({ 
  16.             "layerInitialized" : addMarker 
  17.         getBoundary(); 


5、调用QueryBySQLService接口从rest接口查询各区域矢量信息


  1. function getBoundary() { 
  2.         var queryParam = new SuperMap.REST.FilterParameter({ 
  3.             name : "China_Province_R@China400", 
  4.             attributeFilter : "name like '%市%'", 
  5.             fields : [ "NAME", "SmID" ] 
  6.         var queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({ 
  7.             queryParams : [ queryParam ] 
  8.         var myQueryBySQLService = new SuperMap.REST.QueryBySQLService(url, { 
  9.             eventListeners : { 
  10.                 "processCompleted" : queryCompleted, 
  11.                 "processFailed" : queryError 
  12.         myQueryBySQLService.processAsync(queryBySQLParams); 


6、定义queryCompleted方法，渲染图层


  1. function queryCompleted(QueryEventArgs) { 
  2.         //声明一个矢量图层 vectorLayer，在 vectorLayer 上进行要素选择 
  3.         vectorLayer = new SuperMap.Layer.Vector("Vector Layer", { 
  4.             renderers : [ "Canvas2" ] 
  5.         //将获取到的所有feature循环遍历，标注在地图上 
  6.         var features = QueryEventArgs.result.recordsets[0].features; 
  7.         var pointFeature; 
  8.         for (var i = 0; i < features.length; i++) { 
  9.             if (i % 3 == 0) { 
  10.                 pointFeature = new SuperMap.Feature.Vector( 
  11.                         features[i].geometry, null, style); 
  12.             } else if (i % 3 == 1) { 
  13.                 pointFeature = new SuperMap.Feature.Vector( 
  14.                         features[i].geometry, null, style1); 
  15.             } else { 
  16.                 pointFeature = new SuperMap.Feature.Vector( 
  17.                         features[i].geometry, null, style2); 
  18.             vectorLayer.addFeatures(pointFeature); 
  19.             //provinces.set('Adam', 67); 
  20.             console.log('省会城市的坐标信息：' 
  21.                     + QueryEventArgs.result.recordsets[0].features[i].id); 
  22.             console.log('省会城市的坐标信息：' 
  23.                     + QueryEventArgs.result.recordsets[0].features[i].fid); 
  24.             console 
  25.                     .log('省会城市的坐标信息：' 
  26.                             + QueryEventArgs.result.recordsets[0].features[i].data.NAME); 
  27.         map.addLayer(vectorLayer); 
  28.         var selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, { 
  29.             onSelect : onFeatureSelect, 
  30.             onUnselect : onUnFeatureSelect, 
  31.             repeat : true 
  32.         //map上添加控件 
  33.         map.addControl(selectFeature); 
  34.         //激活控件 
  35.         selectFeature.activate(); 


完整代码参考


  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
  3. <link href='${_ctxPath }/statics/css/superMap/bootstrap.min.css' 
  4.     rel='stylesheet' /> 
  5. <link 
  6.     href='${_ctxPath }/statics/css/superMap/bootstrap-responsive.min.css' 
  7.     rel='stylesheet' /> 
  8. <link type="text/css" rel="stylesheet" 
  9.     href="${_ctxPath%20}/statics/css/style.css" /> 
  10. <link type="text/css" rel="stylesheet" 
  11.     href="${_ctxPath%20}/statics/css/global.css" /> 
  12. <link type="text/css" rel="stylesheet" 
  13.     href="${_ctxPath%20}/statics/js/jqueryeasyui/themes/default/easyui.css" /> 
  14. <link type="text/css" rel="stylesheet" 
  15.     href="${_ctxPath%20}/statics/js/jqueryeasyui/themes/icon.css" /> 
  16. <%@ include file="/WEB-INF/front_pages/jsp/default/includes/top.jsp"%> 
  17. <script src='${_ctxPath }/statics/js/superMap/SuperMap.Include.js'></script> 
  18. <script type="text/javascript" 
  19.     src="http://api.map.baidu.com/api?v=1.5&ak=95a21d20cfe4df8d03f267282e62d8ae"></script> 
  20. <script type="text/javascript" 
  21.     src="${_ctxPath%20}/statics/js/superMap/iConnectorBaidu.js"></script> 
  22. <script type="text/javascript" 
  23.     src="${_js%20}/baidumap/MarkerClusterer_min.js"></script> 
  24. <script type="text/javascript" 
  25.     src="${_js%20}/baidumap/TextIconOverlay_min.js"></script> 
  26. <script type="text/javascript" 
  27.     src="${_ctxPath%20}/statics/js/jqueryeasyui/jquery.easyui.min.js"></script> 
  28. <script type="text/javascript" 
  29.     src="${_ctxPath%20}/statics/js/easyui-lang-zh_CN.js"></script> 
  30. <style type="text/css"> 
  31. body, html, #container { 
  32.     width: 100%; 
  33.     height: 100%; 
  34.     overflow: hidden; 
  35.     margin: 0; 
  36. </style> 
  37. <div id="container" style="width: 100%; height: 100%"></div> 
  38. <div id="mainInfo" style="margin-top: 10px;"></div> 
  39. <div class="fixedBox" id="fixedBox" style="margin-top: 20px"> 
  40.     <UL class="fixedBoxList"> 
  41.         <LI style="display: block;" id="cartboxs" class="fixeBoxLi cart_bd"> 
  42.             <SPAN class="fixeBoxSpan"></SPAN><STRONG>高级查询</STRONG> 
  43.             <div class="cartBox" id="createBox" 
  44.                 style="display: none; min-height: 150px; margin-top: -5px; margin-left: 270px; width: 605px; overflow: hidden; padding: 15px;"> 
  45.                 <div class="bjfff"></div> 
  46.                 <div class="ylistr"> 
  47.                     <form id="serrchCondition"> 
  48.                         <div class=" pull-left eleTtitle" 
  49.                             style="line-height: 25px; width: 570px !important;">养老机构高级查询</div> 
  50.                         <div class="pull-left"> 
  51.                             <label class="pull-left" 
  52.                                 style="color: #666; font-size: 16px; margin-top: 5px;">关键字：</label> 
  53.                             <input type="text" name="name" class="pull-left form-controller" 
  54.                                 style="line-height: 25px; width: 400px; height: 30px;"> 
  55.                             <div class="pull-left"> 
  56.                                 <button style="margin-left: 15px;" 
  57.                                     onclick="search();removeHover();return false;" 
  58.                                     class="YImmediatelyininstallment">查询</button> 
  59.                             </div> 
  60.                         </div> 
  61.                     </form> 
  62.                 </div> 
  63.             </div> 
  64.         </li> 
  65.     </ul> 
  66.     </LI> 
  67.     </UL> 
  68. </div> 
  69. </body> 
  70. <script type="text/javascript"> 
  71.     var style = { 
  72.         strokeColor : "#CAFF70", 
  73.         fillColor : "#FF4500", 
  74.         strokeWidth : 2, 
  75.         fillOpacity : 0.2, 
  76.         label : "西方\nWestern", 
  77.         labelXOffset : 30, 
  78.         labelYOffset : 20, 
  79.         fontColor : "#FFFF6F" 
  80.     var style1 = { 
  81.         strokeColor : "#CAFF70", 
  82.         fillColor : "#8A2BE2", 
  83.         strokeWidth : 2, 
  84.         fillOpacity : 0.2, 
  85.         label : "西方\nWestern", 
  86.         labelXOffset : 30, 
  87.         labelYOffset : 20, 
  88.         fontColor : "#FFFF6F" 
  89.     var style2 = { 
  90.         strokeColor : "#CAFF70", 
  91.         fillColor : "#FFD700", 
  92.         strokeWidth : 2, 
  93.         fillOpacity : 0.3, 
  94.         label : "西方\nWestern", 
  95.         labelXOffset : 30, 
  96.         labelYOffset : 20, 
  97.         fontColor : "#FFFF6F" 
  98.     //var provinces = new Map(); 
  99.     //初始化百度地图 
  100.     var map, layer, marker, marker1, marker2, markers, vectorLayer; 
  101.     //host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host, 
  102.     url = "http://localhost:8090/iserver/services/map-china400/rest/maps/China"; 
  103.     //url = "http://localhost:8090/iserver/services/map-ChinaProvinces/rest/maps/ChinaProvinces"; 
  104.     $(function() { 
  105.         //初始化地图 
  106.         map = new SuperMap.Map("container", { 
  107.             controls : [ new SuperMap.Control.Navigation(), 
  108.                     new SuperMap.Control.PanZoomBar() ] 
  109.         map.addControl(new SuperMap.Control.MousePosition()); 
  110.         //初始化图层 
  111.         layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, { 
  112.             maxResolution : "auto" 
  113.         //监听图层信息加载完成事件 
  114.         layer.events.on({ 
  115.             "layerInitialized" : addLayer 
  116.         //初始化标记图层类 
  117.         markers = new SuperMap.Layer.Markers("Markers"); 
  118.         layer.events.on({ 
  119.             "layerInitialized" : addMarker 
  120.         getBoundary(); 
  121.     //要素被选中时调用此函数,需要传入当前选中要素参数feature 
  122.     function onFeatureSelect(feature) { 
  123.         //TODO 
  124.         var id = feature.id; 
  125.         alert("被选中的是：" + feature.id); 
  126.     //要素被选中时调用此函数,需要传入当前选中要素参数feature 
  127.     function onUnFeatureSelect(feature) { 
  128.         //TODO 
  129.     var infowin = null; 
  130.     //定义mouseClickHandler函数，触发click事件会调用此函数 
  131.     function mouseClickHandler(event) { 
  132.         closeInfoWin(); 
  133.         //初始化popup类 
  134.         popup = new SuperMap.Popup("chicken", marker.getLonLat(), 
  135.                 new SuperMap.Size(220, 140), '打开详情窗口！！！<br>我被点击了！！！', true, null); 
  136.         infowin = popup; 
  137.         //添加弹窗到map图层 
  138.         map.addPopup(popup); 
  139.     function closeInfoWin() { 
  140.         if (infowin) { 
  141.                 infowin.hide(); 
  142.                 infowin.destroy(); 
  143.             } catch (e) { 
  144.     //定义addLayer函数，触发 layerInitialized事件会调用此函数 
  145.     function addLayer() { 
  146.         //map上添加分块动态REST图层和标记图层 
  147.         map.addLayers([ layer, markers ]); 
  148.         map.setCenter(new SuperMap.LonLat(11878237, 3067685), 6); 
  149.         //map.setCenter(new SuperMap.LonLat(114.98015042696258,36.06015621945102), 4); 
  150.     //定义addMarker函数，触发layerInitialized事件会调用此函数 
  151.     function addMarker() { 
  152.         size = new SuperMap.Size(21, 25); 
  153.         offset = new SuperMap.Pixel(-(size.w / 2), -size.h); 
  154.         icon = new SuperMap.Icon('/statics/js/theme/images/marker-gold.png', 
  155.                 size, offset); 
  156.         for (i = 1; i < 5; i++) { 
  157.             //初始化标记覆盖物类 
  158.             marker = new SuperMap.Marker( 
  159.                     new SuperMap.LonLat(11878237 + i * 8000 * Math.random(), 
  160.                             3067685 + i * 8000 * Math.random()), icon); 
  161.             //marker = new SuperMap.Marker(new SuperMap.LonLat(118+i*2*Math.random(), 30.67685+i*2*Math.random()),icon); 
  162.             //添加覆盖物到标记图层 
  163.             markers.addMarker(marker); 
  164.             //注册 click 事件,触发 mouseClickHandler()方法 
  165.             marker.events.on({ 
  166.                 "click" : mouseClickHandler, 
  167.                 "touchstart" : mouseClickHandler 
  168.             //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件 
  169.     function getBoundary() { 
  170.         var queryParam = new SuperMap.REST.FilterParameter({ 
  171.             name : "China_Province_R@China400", 
  172.             attributeFilter : "name like '%市%'", 
  173.             fields : [ "NAME", "SmID" ] 
  174.         var queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({ 
  175.             queryParams : [ queryParam ] 
  176.         var myQueryBySQLService = new SuperMap.REST.QueryBySQLService(url, { 
  177.             eventListeners : { 
  178.                 "processCompleted" : queryCompleted, 
  179.                 "processFailed" : queryError 
  180.         myQueryBySQLService.processAsync(queryBySQLParams); 
  181.     function queryCompleted(QueryEventArgs) { 
  182.         //声明一个矢量图层 vectorLayer，在 vectorLayer 上进行要素选择 
  183.         vectorLayer = new SuperMap.Layer.Vector("Vector Layer", { 
  184.             renderers : [ "Canvas2" ] 
  185.         //将获取到的所有feature循环遍历，标注在地图上 
  186.         var features = QueryEventArgs.result.recordsets[0].features; 
  187.         var pointFeature; 
  188.         for (var i = 0; i < features.length; i++) { 
  189.             if (i % 3 == 0) { 
  190.                 pointFeature = new SuperMap.Feature.Vector( 
  191.                         features[i].geometry, null, style); 
  192.             } else if (i % 3 == 1) { 
  193.                 pointFeature = new SuperMap.Feature.Vector( 
  194.                         features[i].geometry, null, style1); 
  195.             } else { 
  196.                 pointFeature = new SuperMap.Feature.Vector( 
  197.                         features[i].geometry, null, style2); 
  198.             vectorLayer.addFeatures(pointFeature); 
  199.             //provinces.set('Adam', 67); 
  200.             console.log('省会城市的坐标信息：' 
  201.                     + QueryEventArgs.result.recordsets[0].features[i].id); 
  202.             console.log('省会城市的坐标信息：' 
  203.                     + QueryEventArgs.result.recordsets[0].features[i].fid); 
  204.             console 
  205.                     .log('省会城市的坐标信息：' 
  206.                             + QueryEventArgs.result.recordsets[0].features[i].data.NAME); 
  207.         map.addLayer(vectorLayer); 
  208.         var selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, { 
  209.             onSelect : onFeatureSelect, 
  210.             onUnselect : onUnFeatureSelect, 
  211.             repeat : true 
  212.         //map上添加控件 
  213.         map.addControl(selectFeature); 
  214.         //激活控件 
  215.         selectFeature.activate(); 
  216.     function queryError(QueryEventArgs) { 
  217.         //todo 
  218.         alert('查询区域失败：' + SuperMap.REST.QueryResult); 
  219.     $(".header-nav").css({ 
  220.         display : 'none' 
  221. </script> 
  222. <jsp:include 
  223.     page="/WEB-INF/front_pages/jsp/fuse/orgMapShows/global/commonModal.jsp"></jsp:include> 
  224. <%@ include file="/WEB-INF/front_pages/jsp/default/includes/bottom.jsp"%>
			

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK