使用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"%>
上一篇:Bata冲刺 第一天


下一篇:【转】苹果App Store审核指南中文翻译(更新)