使用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、定义不同区域的不同样式

var style = {
        strokeColor : "#CAFF70",
        fillColor : "#FF4500",
        strokeWidth : 2,
        fillOpacity : 0.2,
        label : "西方\nWestern",
        labelXOffset : 30,
        labelYOffset : 20,
        fontColor : "#FFFF6F"
    };
    var style1 = {
        strokeColor : "#CAFF70",
        fillColor : "#8A2BE2",
        strokeWidth : 2,
        fillOpacity : 0.2,
        label : "西方\nWestern",
        labelXOffset : 30,
        labelYOffset : 20,
        fontColor : "#FFFF6F"
    };
    var style2 = {
        strokeColor : "#CAFF70",
        fillColor : "#FFD700",
        strokeWidth : 2,
        fillOpacity : 0.3,
        label : "西方\nWestern",
        labelXOffset : 30,
        labelYOffset : 20,
        fontColor : "#FFFF6F"
    };

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

var map, layer, marker, marker1, marker2, markers, vectorLayer;
url = "http://localhost:8090/iserver/services/map-china400/rest/maps/China";

$(function() {
        //初始化地图
        map = new SuperMap.Map("container", {
            controls : [ new SuperMap.Control.Navigation(),
                    new SuperMap.Control.PanZoomBar() ]
        });
        map.addControl(new SuperMap.Control.MousePosition());
        //初始化图层
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, {
            maxResolution : "auto"
        });
        //监听图层信息加载完成事件
        layer.events.on({
            "layerInitialized" : addLayer
        });
        //初始化标记图层类
        markers = new SuperMap.Layer.Markers("Markers");

        layer.events.on({
            "layerInitialized" : addMarker
        });

        getBoundary();

    });

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

function getBoundary() {

        var queryParam = new SuperMap.REST.FilterParameter({
            name : "China_Province_R@China400",
            attributeFilter : "name like '%市%'",
            fields : [ "NAME", "SmID" ]
        });
        var queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
            queryParams : [ queryParam ]
        });
        var myQueryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
            eventListeners : {
                "processCompleted" : queryCompleted,
                "processFailed" : queryError
            }
        });
        myQueryBySQLService.processAsync(queryBySQLParams);

    }

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

function queryCompleted(QueryEventArgs) {
        //声明一个矢量图层 vectorLayer，在 vectorLayer 上进行要素选择
        vectorLayer = new SuperMap.Layer.Vector("Vector Layer", {
            renderers : [ "Canvas2" ]
        });
        //将获取到的所有feature循环遍历，标注在地图上
        var features = QueryEventArgs.result.recordsets[0].features;

        var pointFeature;

        for (var i = 0; i < features.length; i++) {

            if (i % 3 == 0) {
                pointFeature = new SuperMap.Feature.Vector(
                        features[i].geometry, null, style);
            } else if (i % 3 == 1) {
                pointFeature = new SuperMap.Feature.Vector(
                        features[i].geometry, null, style1);
            } else {
                pointFeature = new SuperMap.Feature.Vector(
                        features[i].geometry, null, style2);

            }
            vectorLayer.addFeatures(pointFeature);
            //provinces.set('Adam', 67);
            console.log('省会城市的坐标信息：'
                    + QueryEventArgs.result.recordsets[0].features[i].id);
            console.log('省会城市的坐标信息：'
                    + QueryEventArgs.result.recordsets[0].features[i].fid);
            console
                    .log('省会城市的坐标信息：'
                            + QueryEventArgs.result.recordsets[0].features[i].data.NAME);
        }

        map.addLayer(vectorLayer);
        var selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {
            onSelect : onFeatureSelect,
            onUnselect : onUnFeatureSelect,
            repeat : true
        });
        //map上添加控件
        map.addControl(selectFeature);
        //激活控件
        selectFeature.activate();

    };

完整代码参考

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<link href='${_ctxPath }/statics/css/superMap/bootstrap.min.css'
    rel='stylesheet' />
<link
    href='${_ctxPath }/statics/css/superMap/bootstrap-responsive.min.css'
    rel='stylesheet' />
<link type="text/css" rel="stylesheet"
    href="${_ctxPath }/statics/css/style.css" />
<link type="text/css" rel="stylesheet"
    href="${_ctxPath }/statics/css/global.css" />
<link type="text/css" rel="stylesheet"
    href="${_ctxPath }/statics/js/jqueryeasyui/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet"
    href="${_ctxPath }/statics/js/jqueryeasyui/themes/icon.css" />
<%@ include file="/WEB-INF/front_pages/jsp/default/includes/top.jsp"%>
<script src='${_ctxPath }/statics/js/superMap/SuperMap.Include.js'></script>
<script type="text/javascript"
    src="http://api.map.baidu.com/api?v=1.5&ak=95a21d20cfe4df8d03f267282e62d8ae"></script>
<script type="text/javascript"
    src="${_ctxPath }/statics/js/superMap/iConnectorBaidu.js"></script>
<script type="text/javascript"
    src="${_js }/baidumap/MarkerClusterer_min.js"></script>
<script type="text/javascript"
    src="${_js }/baidumap/TextIconOverlay_min.js"></script>
<script type="text/javascript"
    src="${_ctxPath }/statics/js/jqueryeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="${_ctxPath }/statics/js/easyui-lang-zh_CN.js"></script>
<style type="text/css">
body, html, #container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}
</style>

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

<div id="mainInfo" style="margin-top: 10px;"></div>
<div class="fixedBox" id="fixedBox" style="margin-top: 20px">
    <UL class="fixedBoxList">
        <LI style="display: block;" id="cartboxs" class="fixeBoxLi cart_bd">
            <SPAN class="fixeBoxSpan"></SPAN><STRONG>高级查询</STRONG>
            <div class="cartBox" id="createBox"
                style="display: none; min-height: 150px; margin-top: -5px; margin-left: 270px; width: 605px; overflow: hidden; padding: 15px;">
                <div class="bjfff"></div>
                <div class="ylistr">
                    <form id="serrchCondition">
                        <div class=" pull-left eleTtitle"
                            style="line-height: 25px; width: 570px !important;">养老机构高级查询</div>
                        <div class="pull-left">
                            <label class="pull-left"
                                style="color: #666; font-size: 16px; margin-top: 5px;">关键字：</label>
                            <input type="text" name="name" class="pull-left form-controller"
                                style="line-height: 25px; width: 400px; height: 30px;">
                            <div class="pull-left">
                                <button style="margin-left: 15px;"
                                    onclick="search();removeHover();return false;"
                                    class="YImmediatelyininstallment">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </li>
    </ul>
    </LI>
    </UL>
</div>
</body>
<script type="text/javascript">
    var style = {
        strokeColor : "#CAFF70",
        fillColor : "#FF4500",
        strokeWidth : 2,
        fillOpacity : 0.2,
        label : "西方\nWestern",
        labelXOffset : 30,
        labelYOffset : 20,
        fontColor : "#FFFF6F"
    };
    var style1 = {
        strokeColor : "#CAFF70",
        fillColor : "#8A2BE2",
        strokeWidth : 2,
        fillOpacity : 0.2,
        label : "西方\nWestern",
        labelXOffset : 30,
        labelYOffset : 20,
        fontColor : "#FFFF6F"
    };
    var style2 = {
        strokeColor : "#CAFF70",
        fillColor : "#FFD700",
        strokeWidth : 2,
        fillOpacity : 0.3,
        label : "西方\nWestern",
        labelXOffset : 30,
        labelYOffset : 20,
        fontColor : "#FFFF6F"
    };

    //var provinces = new Map();

    //初始化百度地图
    var map, layer, marker, marker1, marker2, markers, vectorLayer;
    //host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host,
    url = "http://localhost:8090/iserver/services/map-china400/rest/maps/China";
    //url = "http://localhost:8090/iserver/services/map-ChinaProvinces/rest/maps/ChinaProvinces";
    $(function() {
        //初始化地图
        map = new SuperMap.Map("container", {
            controls : [ new SuperMap.Control.Navigation(),
                    new SuperMap.Control.PanZoomBar() ]
        });
        map.addControl(new SuperMap.Control.MousePosition());
        //初始化图层
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, {
            maxResolution : "auto"
        });
        //监听图层信息加载完成事件
        layer.events.on({
            "layerInitialized" : addLayer
        });
        //初始化标记图层类
        markers = new SuperMap.Layer.Markers("Markers");

        layer.events.on({
            "layerInitialized" : addMarker
        });

        getBoundary();

    });

    //要素被选中时调用此函数,需要传入当前选中要素参数feature
    function onFeatureSelect(feature) {
        //TODO
        var id = feature.id;

        alert("被选中的是：" + feature.id);
    }

    //要素被选中时调用此函数,需要传入当前选中要素参数feature
    function onUnFeatureSelect(feature) {
        //TODO
    }

    var infowin = null;
    //定义mouseClickHandler函数，触发click事件会调用此函数
    function mouseClickHandler(event) {
        closeInfoWin();
        //初始化popup类
        popup = new SuperMap.Popup("chicken", marker.getLonLat(),
                new SuperMap.Size(220, 140), '打开详情窗口！！！<br>我被点击了！！！', true, null);

        infowin = popup;
        //添加弹窗到map图层
        map.addPopup(popup);
    }

    function closeInfoWin() {
        if (infowin) {
            try {
                infowin.hide();
                infowin.destroy();
            } catch (e) {
            }
        }
    }

    //定义addLayer函数，触发 layerInitialized事件会调用此函数
    function addLayer() {
        //map上添加分块动态REST图层和标记图层
        map.addLayers([ layer, markers ]);
        map.setCenter(new SuperMap.LonLat(11878237, 3067685), 6);
        //map.setCenter(new SuperMap.LonLat(114.98015042696258,36.06015621945102), 4);

    }

    //定义addMarker函数，触发layerInitialized事件会调用此函数
    function addMarker() {
        size = new SuperMap.Size(21, 25);
        offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
        icon = new SuperMap.Icon('/statics/js/theme/images/marker-gold.png',
                size, offset);

        for (i = 1; i < 5; i++) {
            //初始化标记覆盖物类
            marker = new SuperMap.Marker(
                    new SuperMap.LonLat(11878237 + i * 8000 * Math.random(),
                            3067685 + i * 8000 * Math.random()), icon);
            //marker = new SuperMap.Marker(new SuperMap.LonLat(118+i*2*Math.random(), 30.67685+i*2*Math.random()),icon);
            //添加覆盖物到标记图层
            markers.addMarker(marker);
            //注册 click 事件,触发 mouseClickHandler()方法
            marker.events.on({
                "click" : mouseClickHandler,
                "touchstart" : mouseClickHandler
            //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
            });
        }

    }

    function getBoundary() {

        var queryParam = new SuperMap.REST.FilterParameter({
            name : "China_Province_R@China400",
            attributeFilter : "name like '%市%'",
            fields : [ "NAME", "SmID" ]
        });
        var queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
            queryParams : [ queryParam ]
        });
        var myQueryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
            eventListeners : {
                "processCompleted" : queryCompleted,
                "processFailed" : queryError
            }
        });
        myQueryBySQLService.processAsync(queryBySQLParams);

    }

    function queryCompleted(QueryEventArgs) {
        //声明一个矢量图层 vectorLayer，在 vectorLayer 上进行要素选择
        vectorLayer = new SuperMap.Layer.Vector("Vector Layer", {
            renderers : [ "Canvas2" ]
        });
        //将获取到的所有feature循环遍历，标注在地图上
        var features = QueryEventArgs.result.recordsets[0].features;

        var pointFeature;

        for (var i = 0; i < features.length; i++) {

            if (i % 3 == 0) {
                pointFeature = new SuperMap.Feature.Vector(
                        features[i].geometry, null, style);
            } else if (i % 3 == 1) {
                pointFeature = new SuperMap.Feature.Vector(
                        features[i].geometry, null, style1);
            } else {
                pointFeature = new SuperMap.Feature.Vector(
                        features[i].geometry, null, style2);

            }
            vectorLayer.addFeatures(pointFeature);
            //provinces.set('Adam', 67);
            console.log('省会城市的坐标信息：'
                    + QueryEventArgs.result.recordsets[0].features[i].id);
            console.log('省会城市的坐标信息：'
                    + QueryEventArgs.result.recordsets[0].features[i].fid);
            console
                    .log('省会城市的坐标信息：'
                            + QueryEventArgs.result.recordsets[0].features[i].data.NAME);
        }

        map.addLayer(vectorLayer);
        var selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {
            onSelect : onFeatureSelect,
            onUnselect : onUnFeatureSelect,
            repeat : true
        });
        //map上添加控件
        map.addControl(selectFeature);
        //激活控件
        selectFeature.activate();

    };
    function queryError(QueryEventArgs) {
        //todo
        alert('查询区域失败：' + SuperMap.REST.QueryResult);
    };

    $(".header-nav").css({
        display : 'none'
    });
</script>

<jsp:include
    page="/WEB-INF/front_pages/jsp/fuse/orgMapShows/global/commonModal.jsp"></jsp:include>
<%@ include file="/WEB-INF/front_pages/jsp/default/includes/bottom.jsp"%>