使用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实现验证码.正所谓,技多不压身.而且 ...
随机推荐
- du和df显示磁盘空间使用差异大的几种情况
接触客户多了,发现经常有客户遇到du看到系统只使用了一部分磁盘空间,但df看时磁盘空间已经满了,或者差异较大,我遇到过三次不一样的原因,下面做一下总结,恶补一下!也希望对大家有点帮助! 现象:有客户 ...
- 1_ROS学习
1_搭建树莓派环境 树莓派是一个嵌入式计算机,专门用来做嵌入式开发的.我们组上用的树莓派是raspberry pi 3 mode B,5V供电,最大电流不超过2A: 我们需要在树莓派上安装上操作系统. ...
- rwx对于文件和目录的意义
1.对于文件 r:可读. w:可以编辑,可以修改. x:可以执行.在windows中,可执行指的是.exe,.bat等这些后缀结尾的文件,在linux没有这种限制. 2.对于目录 r:表示可以用ls命 ...
- Pie
Problem Description My birthday is coming up and traditionally I'm serving pie. Not just one pie, no ...
- Codeforces 376A. Night at the Museum
A. Night at the Museum time limit per test 1 second memory limit per test 256 megabytes input standa ...
- Android 开发笔记___滚动视图__scroll view
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- empty()和remove()的区别
这两个都是删除元素,但是两者还是有区别的. remove()这个方法呢是删除被选元素的所有文本和子元素,当然包括被选元素自己. 而empty()呢,被选元素自己是不会被删除的. 比如: <div ...
- js实现前端下载文件
在前端下载文本格式的文件时,可采用下面的方式: (1)创建基于文件内容的Blob对象: (2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址. (3 ...
- mac android apk反编译
在mac os系统上反编译android apk,首先需要准备好以下3个文件: 1.apktool:https://ibotpeaches.github.io/Apktool/install/ 2.d ...
- SpringAop源码情操陶冶-JdkDynamicAopProxy
承接前文SpringAop源码情操陶冶-AspectJAwareAdvisorAutoProxyCreator,本文在前文的基础上稍微简单的分析默认情况下的AOP代理,即JDK静态代理 JdkDyna ...