使用superMap实现点标注和区域着色

2023-08-24 12:41:40

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

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

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

码农公寓

相关文章