使用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"%>