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.     };
  11.     var style1 = {
  12.         strokeColor : "#CAFF70",
  13.         fillColor : "#8A2BE2",
  14.         strokeWidth : 2,
  15.         fillOpacity : 0.2,
  16.         label : "西方\nWestern",
  17.         labelXOffset : 30,
  18.         labelYOffset : 20,
  19.         fontColor : "#FFFF6F"
  20.     };
  21.     var style2 = {
  22.         strokeColor : "#CAFF70",
  23.         fillColor : "#FFD700",
  24.         strokeWidth : 2,
  25.         fillOpacity : 0.3,
  26.         label : "西方\nWestern",
  27.         labelXOffset : 30,
  28.         labelYOffset : 20,
  29.         fontColor : "#FFFF6F"
  30.     };

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.         });
  7.         map.addControl(new SuperMap.Control.MousePosition());
  8.         //初始化图层
  9.         layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, {
  10.             maxResolution : "auto"
  11.         });
  12.         //监听图层信息加载完成事件
  13.         layer.events.on({
  14.             "layerInitialized" : addLayer
  15.         });
  16.         //初始化标记图层类
  17.         markers = new SuperMap.Layer.Markers("Markers");
  18.  
  19.         layer.events.on({
  20.             "layerInitialized" : addMarker
  21.         });
  22.  
  23.         getBoundary();
  24.  
  25.     });

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

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

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

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

完整代码参考

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

使用superMap实现点标注和区域着色的更多相关文章

  1. C#窗口矩形区域着色

    C#写的一个GUI窗口,有几百个矩形区域.每个矩形区域的颜色随时都可能改变,并且多次改变. 我放弃使用label绘制矩形,因为效果不好.拖控件的界面使用power packs中的rectanglesh ...

  2. 为 10000+ 业务系统提供数据可视化能力的 AntV 又进化了

    小蚂蚁说: 2018 年 AntV 品牌日以知新.知心为主题,旨在让产品一直「知新」,与用户一直「知心」.AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数 ...

  3. 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

  4. SSISDB4：Execution

    Execution是Package或Project的Execution Instance,每次执行都会生成一个唯一的ExecutionID,并记录Execution 执行的结果.在每次Executio ...

  5. android 性能分析案例

    本章以实际案例分析在android开发中,性能方面的优化和处理.设计到知识点有弱引用,memory monitor,Allocation Tracker和leakcanary插件. 1.测试demo ...

  6. PDF的信息表达原理及特点分析

    一.PDF概述 PDF(Portable Document Format)是一种结构化的文档格式.它由美国著名排版与图像处理软件Adobe公司于1993年首次发布(1．0版),并于同年推出了其相应的支 ...

  7. Python模块：PIL

    PIL:是Python Image Library的缩写,图像处理的模块.Image,ImageFont,ImageDraw,ImageFilter Image模块: 常用方法: open() #打开 ...

  8. 【20160924】GOCVHelper 图像处理部分（1）

    增强后的图像需要通过图像处理获得定量的值.在实际程序设计过程中,轮廓很多时候都是重要的分析变量.参考Halcon的相关函数,我增强了Opencv在这块的相关功能.      //寻找最大的轮廓     ...

  9. php实现验证码

      验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码.好吧,其实是没有事情干,但是又不想浪费时间,所以学习了下php实现验证码.正所谓,技多不压身.而且 ...

随机推荐

  1. Memcached统计命令

    1. Memcached stats命令: Memcached stats 命令用于返回统计信息例如 PID(进程号).版本号.连接数等. 语法: stats 输出信息说明: pid: memcach ...

  2. iOS之 Category 属性 的理解

    在 Objective-C 中可以通过 Category 给一个现有的类添加属性,但是却不能添加实例变量 反正读第一遍的时候我是有点晕的,可以添加“属性”,然后又说“添加实例变量”,第一感觉就好像 有 ...

  3. 【每天半小时学框架】——React.js的模板语法与组件概念

           [重点提前说:组件化与虚拟DOM是React.js的核心理念!]        先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...

  4. AngularJS学习篇（四）

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. <!DOCTYPE html& ...

  5. javascript中的变量、作用域和内存问题

    1.变量 变量的值的类型:基本类型值和引用类型值两种. 基本类型:Undefined.Null.Boolean.String.Number,这五类基本数据类型的值在内存中占有固定大小的空间,因此保存在 ...

  6. ASP.NET MVC中URL末尾斜杠的实现

    在网站的SEO优化中,通常都会涉及到URL结尾斜杠的问题. http://blog.sina.com.cn/s/blog_828e7ce40100srj1.html http://www.dengyo ...

  7. 07.十分钟学会tomcat数据源

    一.数据源的作用及操作原理 1,  首先先看下传统JDBC的操作 在tomcat中使用数据库连接池操作数据库 2,JNDI属于命名及目录查找接口,在javaee的javax.naming包中 这套AP ...

  8. DbContext 中的 Explicit interface implementation

    疑惑 前段时间一直再用Entity Framework 6,写了一些公用的方法,在这个过程中发现了DbContext实现的接口IObjectContextAdapter,可以通过这个接口访问到更底层的 ...

  9. oracle数据库表实现主键自增功能

    有关oracle中自增序列sequence+触发器trigger:实现数据表TABDATA_LIVE_CYCLE中的主键id的自增. CREATE SEQUENCE TABDATA_LIVE_CYCL ...

  10. C#中??和？分别是什么意思？

    在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; 是正确的,int i=null ...