使用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实现验证码.正所谓,技多不压身.而且 ...
随机推荐
- 初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- 修改Jupyter notebook的启动目录
修改Jupyter notebook的启动目录 1. 在控制台输入以下命令,检查Jupyter notebook的安装目录 jupyter notebook --generate-config 如 ...
- ASP.NET Core的身份认证框架IdentityServer4（4）- 支持的规范
IdentityServer实现以下规范: OpenID Connect OpenID Connect Core 1.0 (spec) OpenID Connect Discovery 1.0 (sp ...
- java读写锁ReadWriteLock
package com.java.concurrent; import java.util.concurrent.locks.ReadWriteLock; import java.util.concu ...
- 4年java开发，该何去何从！
以前都是一直看,今天楼主第一次发博,还望各位不吝赐教. 今天也没别的要说的,就是吐槽一下楼主这几天的面试遭遇,感觉都有点怀疑人生了. 先说说楼主的情况吧,13年毕业本科计算机专业,到现在一直做java ...
- oracle精简客户端安装配置及常见问题
有关Instant client 安装步骤 1.首先在官网下载两个安装包instant/sqlplus,对相关文件进行解压缩,存放本地路径 官网地址:http://www.oracle.com/tec ...
- 基于Cef内核的多店铺登录器(含源码)
公司是做电商的,在速卖通平台上开了若干店铺,每天都需要登录店铺打理,如:发货提交.获取运单号等.多个店铺的情况下,同时使用浏览器就会非常繁琐,如:要记住帐户名和密码,还要在不同店铺间切换.如果能够制作 ...
- 数据库中float类型字段，转化到前端显示，统一保留两位小数
客户的一个需求,mybatis查询到的数据库的数据进行转换,采用TypeHandler<T>的方式.float保留两位精度可以采用DecimalFormat 直接贴上最终的解决代码(事情没 ...
- ARM1
CPU有取指周期,译码周期,执行周期包括的器件有程序计数器(CP),指令cache,数据总线,指令寄存器(IR),数据地址寄存器(AR),指令译码器,时序发生器操作控制器,控制总线,数据缓冲寄存器(D ...
- [转载] Hibernate与 MyBatis的比较
转载自http://blog.csdn.net/firejuly/article/details/8190229 最近做了一个Hibernate与MyBatis的对比总结,希望大家指出不对之处. 第一 ...