使用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"%>
使用superMap实现点标注和区域着色的更多相关文章
- C#窗口矩形区域着色
C#写的一个GUI窗口,有几百个矩形区域.每个矩形区域的颜色随时都可能改变,并且多次改变. 我放弃使用label绘制矩形,因为效果不好.拖控件的界面使用power packs中的rectanglesh ...
- 为 10000+ 业务系统提供数据可视化能力的 AntV 又进化了
小蚂蚁说: 2018 年 AntV 品牌日以知新.知心为主题,旨在让产品一直「知新」,与用户一直「知心」.AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数 ...
- 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- SSISDB4：Execution
Execution是Package或Project的Execution Instance,每次执行都会生成一个唯一的ExecutionID,并记录Execution 执行的结果.在每次Executio ...
- android 性能分析案例
本章以实际案例分析在android开发中,性能方面的优化和处理.设计到知识点有弱引用,memory monitor,Allocation Tracker和leakcanary插件. 1.测试demo ...
- PDF的信息表达原理及特点分析
一.PDF概述 PDF(Portable Document Format)是一种结构化的文档格式.它由美国著名排版与图像处理软件Adobe公司于1993年首次发布(1．0版),并于同年推出了其相应的支 ...
- Python模块：PIL
PIL:是Python Image Library的缩写,图像处理的模块.Image,ImageFont,ImageDraw,ImageFilter Image模块: 常用方法: open() #打开 ...
- 【20160924】GOCVHelper 图像处理部分（1）
增强后的图像需要通过图像处理获得定量的值.在实际程序设计过程中,轮廓很多时候都是重要的分析变量.参考Halcon的相关函数,我增强了Opencv在这块的相关功能. //寻找最大的轮廓 ...
- php实现验证码
验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码.好吧,其实是没有事情干,但是又不想浪费时间,所以学习了下php实现验证码.正所谓,技多不压身.而且 ...
随机推荐
- 测试服务搭建之centos7下安装java
一 安装Java 1 创建普通用户 useradd wujian passwd wujian 提示输入密码:[输入wujian的密码] user:wujian group:root passwd:12 ...
- Java企业微信开发_Exception_02_java.security.InvalidKeyException: Illegal key size
今天换了重新装了一个jdk,然后运行昨天还好好的企业微信工程,结果启动的时候就给我报了这么个错: java.security.InvalidKeyException: Illegal key size ...
- css3+div画大风车
今天已经礼拜三了,周天小颖家的佩佩就要结婚啦,小颖要去当伴娘了,哈哈哈哈哈哈,想想都觉得乐开了花,不过之前她给我说让我当她伴娘时,我说我要减肥,不然她那么瘦弱,我站旁边就感觉像一个圆滚滚的小皮球,小颖 ...
- mvc4 实现自己的权限验证 仿Authorize与AllowAnonymous原理
参考文章 :http://www.cosdiv.com/page/M0/S878/878978.html 实现的效果:在控制器上(Controller)验证权限,在动作(Action)上不验证. 用M ...
- Special Fish
Special Fish Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 关于01背包求第k优解
引用:http://szy961124.blog.163.com/blog/static/132346674201092775320970/ 求次优解.第K优解 对于求次优解.第K优解类的问题,如果相 ...
- HDU 4118 Holiday's Accommodation(树形DP)
Holiday's Accommodation Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 200000/200000 K (Jav ...
- 5.volatile的应用
volatile是轻量级的synchronized,它在多处理器开发中保证了共享变量的"可见性".可见性的意思是当一个线程修改一个共享变量时,另外一个线程能读到这个修改的值.如果v ...
- wordpress搬家到 linode 步骤简析
1. 购买并安装系统 购买就不说了哈,英文不好的自己搜教程. 然后是安装系统 linode 系统安装: 购买完成后登录,进入找到购买的vps ,点击 Dashboard (控制面板) 进入后点击 面板 ...
- mysql 读写分离
常见的读写分离方案:1)Amoeba读写分离2)MySQL-Proxy读写分离3)基于程序读写分离(效率很高,实施难度大,开发改代码) 2)原理 web 访问数据库,通过proxy4040端口作为转发 ...