利用百度地图JSAPI生成h7n9禽流感分布图实现代码,百度地图js小结
分类:面向对象

var bdary = new BMap.Boundary(); bdary.get("重庆", function (rs) { var count = rs.boundaries.length; //行政区域的点有多少个 for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000", fillColor: "" }); //建立多边形覆盖物 map.addOverlay(ply); } });

下图为使用百度地图JSAPI生成的H7N9感染分布图示例,其中的数据来自新华网(4.8号),截图如下:
图片 1
使用的功能列表如下:
1.自定义版权控件功能,即(1)对应的数据来源部分,代码如下:

1、获取javascript API 服务方法,首先申请密钥(ak),才可成功加载APIJS文件。

#一、UIBezierPath

要说明的是默认除了边框颜色,填充颜色还是一个半透明的白色,要彻底干掉填充颜色,就得指定 fillColor 为 "",不能指定 fillColor 为 transparent,这样虽然不会报 JavaScript 错误,但不会起到半透明效果,后面的百度接口代码还很可能跑不起来。

复制代码 代码如下:

使用方法如下:

几种图形英文名称:rectangle(长方形)、oval(椭圆)、arc(弧形)、curve(曲线)

var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});
map.addControl(cr); //添加版权控件
var bs = map.getBounds();
cr.addCopyright({id: 1, content: "<a href='' style='fontFamily:微软雅黑;font-size:18px;background:white'>H7N9数据来源</a>", bounds: bs});

<script type="text/javascript" src=";

##1.初始化

2.获取行政边界功能,即(2)对应的四个省市边界,代码如下:

如果需要限制区域,那么需要引入下面的js

+ (instancetype)bezierPath;

复制代码 代码如下:

<script type="text/javascript" src=";

+ (instancetype)bezierPathWithRect:(CGRect)rect;//返回一个长方形

var bdary = new BMap.Boundary();//行政边界服务
var length=data.length;
for (var index=0;index<length ;index++ )
{
(function(index){ //闭包用法
bdary.get(data[index].city, function(rs){ //获取行政区域
var count = rs.boundaries.length; //行政区域有几部分多边形组成
var bounds;
var center;
for(var i = 0; i < count; i++){
ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: data[index].color,fillColor: data[index].color,fillOpacity:0.8 }); //建立多边形覆盖物
if (!bounds)//取行政区域第一组成部分的中心点
{
center=ply.getBounds().getCenter();
}
map.addOverlay(ply); //添加行政边界
}
});
})(index);
}

2、设置样式,冲满全屏,弹出窗口的样式

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;//返回一个椭圆

  1. 添加marker点和label,即(3,4)显示表示人的图片及感染人数的label:

body, html,#l-map{width: 100%;height: 100%;overflow: hidden;margin:0;}

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; //返回一个圆角长方形

复制代码 代码如下:

3、调用百度地图

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;//返回一个圆角长方形

var myIcon = new BMap.Icon("infection.png", new BMap.Size(27,60));
var marker1 = new BMap.Marker(center,{icon:myIcon}); // marker
map.addOverlay(marker1);
var label = new BMap.Label("人数"+data[index].infect,{offset:new BMap.Size(-10,0)});//显示label
marker1.setLabel(label);

var map = new BMap.Map("l-map"); // 创建地图实例

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;//返回圆上一段弧

完整代码如下:

var point = new BMap.Point(111.818239, 41.386087); // 创建点坐标

+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

复制代码 代码如下:

map.centerAndZoom(point, 5); // 初始化地图,设置中心点坐标和地图级别

##2.创建图形方法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src=";
<title>H7N9分布图</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.enableScrollWheelZoom();
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});
map.addControl(cr); //添加版权控件
var bs = map.getBounds();
cr.addCopyright({id: 1, content: "<a href='' style='fontFamily:微软雅黑;font-size:18px;background:white'>H7N9数据来源</a>", bounds: bs});
map.setViewport(new BMap.Bounds(new BMap.Point(114.603589,26.853244),new BMap.Point(122.863975,35.288772))); //调整视野
var data=[{city:'上海市',infect:10,color:'#FF0000'},{city:'江苏省',infect:6,color:'#EE3B3B'},{city:'安徽省',infect:2,color:'#FFAEB9'},{city:'浙江省',infect:3,color:'#EE3B3B'}];
//上海(10例,死亡4例)、江苏(6例)、安徽(2例)、浙江(3例,死亡2例) 4.8号数据
var bdary = new BMap.Boundary();
var length=data.length;
for (var index=0;index<length ;index++ )
{
(function(index){ //闭包用法
bdary.get(data[index].city, function(rs){ //获取行政区域
var count = rs.boundaries.length; //行政区域有几部分多边形组成
var bounds;
var center;
for(var i = 0; i < count; i++){
ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: data[index].color,fillColor: data[index].color,fillOpacity:0.8 }); //建立多边形覆盖物
if (!bounds)//取行政区域第一组成部分的中心点
{
center=ply.getBounds().getCenter();
}
map.addOverlay(ply); //添加覆盖物
}

map.enableScrollWheelZoom();

- (void)moveToPoint:(CGPoint)point;

var myIcon = new BMap.Icon("infection.png", new BMap.Size(27,60));
var marker1 = new BMap.Marker(center,{icon:myIcon}); // marker
map.addOverlay(marker1);
var label = new BMap.Label("人数"+data[index].infect,{offset:new BMap.Size(-10,0)});//显示label
marker1.setLabel(label);
});
})(index);
}
</script>

map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件

- (void)addLineToPoint:(CGPoint)point;//画一条直线

Done!

4、添加缩放平移控件

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;//弧线,两个控制点

使用的功能列表如下: 1.自定义版权控件...

map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;//弧线,一个控制点

map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角,仅包含平移和缩放按钮

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise://取自指定圆上的一段弧线

map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN})); //左下角,仅包含平移按钮

- (void)closePath;

map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角,仅包含缩放按钮

- (void)removeAllPoints;

map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用

- (void)appendPath:(UIBezierPath *)bezierPath;

map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用

- (UIBezierPath *)bezierPathByReversingPath;//翻转绘图,没发现有什么用

5、区域限制必须引入上面的区域限制js

- (void)applyTransform:(CGAffineTransform)transform;

区域限制例子是只显示北京市

##3.结合CAShapeLayer在视图上绘制路线

var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),

>

new BMap.Point(116.832025, 40.126349));

//创建一个UIBezierPath对象

try {

UIBezierPath *aPath = [UIBezierPath bezierPath];

BMapLib.AreaRestriction.setBounds(map, b);

//设置路径

} catch (e) {

int ratio = 5;

alert(e);

for (int i = 0; i < XArray.count; i++) {

}

if (i == 0) {

6、添加覆盖物,计时器调用覆盖物

[aPath moveToPoint:CGPointMake(([XArray[i] floatValue] - 0) * ratio - 360,([YArray[i] floatValue] - 0) * ratio)];

//添加覆盖物

}else{

function getBoundary(){

[aPath addLineToPoint:CGPointMake(([XArray[i] floatValue] - 0) * ratio - 360,([YArray[i] floatValue] - 0) * ratio)];

var bdary = new BMap.Boundary();

}

bdary.get("内蒙古", function(rs){ //获取行政区域

}

var count = rs.boundaries.length; //行政区域的点有多少个

//创建一个CAShapeLayer对象

for(var i = 0; i < count; i++){

CAShapeLayer *shapelayer = [CAShapeLayer layer];

var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#0000ff" ,fillColor: ""}); //建立多边形覆盖物 fillColor 字体显示出来

shapelayer.strokeColor = [[UIColor redColor]CGColor];//线条颜色

map.addOverlay(ply); //添加覆盖物

shapelayer.fillColor = [[UIColor blueColor]CGColor];//填充色

map.setViewport(ply.getPath()); //调整视野

shapelayer.lineWidth = 0.1;//线条宽度

}

shapelayer.path = aPath.CGPath;//设置路径

});

[mMapView.layer addSublayer:shapelayer];

}

图片 2

//计时器调用添加覆盖物

这里我的数据源XArray来自于本地文件,从百度地图获取到全国各省市边界坐标,获取方法参照:

setTimeout(function(){

##4.问题

//清除地图覆盖物

a.百度获取到的坐标的坐标系跟手机是相反的,直接使用绘制出来的图形是头朝下的。需要翻转。

map.clearOverlays();

>mMapView.transform = CGAffineTransformScale(mMapView.transform, 1, -1);

map.centerAndZoom(111.818239, 41.386087, 6); // 设置地图坐标,级别

b.UIscrollView缩放过程中,mScrollView.frame.origin是无规律变化的,因为捏合手势放大时,mScrollView.contentSize上下左右向外扩张,不容易找到规律。所以设置subViews的frame变化时以mScrollView.contentSize为基准比较靠谱。

//添加行政区域覆盖

>mMapView.center = CGPointMake( mScroll.contentSize.width/2,mScroll.contentSize.height/2);

getBoundary();

c.点击各省市区域,利用UIBezierPath containsPoint:可以轻松判断出当前点击的是哪一个区域。如果这样我可能需要把每个省的mPath对象存到本地一个个去匹配,不知道效率怎么样。

}, 1000);

d.有许多省查出来的坐标不止一个闭合曲线,我的做法是在每一个闭合曲线的坐标后加shaokan当做分隔符,然后拆分来画。关键JS代码:

7、添加标注

>

//point经纬度,txtinfo提示信息,type图片类型

function getBoundary(){

function addMarker(point, txtInfo, type) {

var bdary = new BMap.Boundary();

var infoWindow = "";

var name = document.getElementById("districtName").value;

var marker = new BMap.Marker(point, { icon: mapIcon(type) });

bdary.get(name, function(rs){      //获取行政区域

marker.addEventListener("click", function() {

var fileName = "";

infoWindow = new BMap.InfoWindow(txtInfo);

//var newFileObject = fso.CreateTextFile(folderName + "\" + name + ".txt", true);

this.openInfoWindow(infoWindow);

map.clearOverlays();        //清除地图覆盖物

});

var count = rs.boundaries.length; //行政区域的点有多少个

map.addOverlay(marker); //添加标注

for(var i = 0; i < count; i++){

}

var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物

//创建ICON

map.addOverlay(ply);  //添加覆盖物

function mapIcon(type) {

map.setViewport(ply.getPath());    //调整视野

var mappng;

document.getElementById("info").innerHTML += rs.boundaries[i] + "shaokan";

switch (parseInt(type)) {

}

case 1:

//newFileObject.write(rs.boundaries[0]);

mappng = "${pageContext.request.contextPath}/images/triangle.png";

//newFileObject.Close();

break;

});

case 2:

}

mappng = "${pageContext.request.contextPath}/images/ban.png";

f.百度地图中查不到台湾省的闭合曲线

break;

}

var mapIcon = new BMap.Icon(mappng,

new BMap.Size(24, 24), {

offset: new BMap.Size(0, -5),

imageOffset: new BMap.Size(0, 0)

});

return mapIcon;

}

8、移除标注

map.removeOverlay(marker); //移除标注点

9、输入地址获取经纬度

public static final String KEY_1 = "您的密钥(ak)";

/**
* 返回输入地址的经纬度坐标
* key lng(经度),lat(纬度)
*/
public static Map getGeocoderLatitude(String address){
BufferedReader in = null;
try {
//将地址转换成utf-8的16进制
address = URLEncoder.encode(address, "UTF-8");
// 如果有代理,要设置代理,没代理可注释
// System.setProperty("http.proxyHost","192.168.1.188");
// System.setProperty("http.proxyPort","3128");
URL tirc = new URL(" address +"&output=json&key="+ KEY_1);

in = new BufferedReader(new InputStreamReader(tirc.openStream(),"UTF-8"));
String res;
StringBuilder sb = new StringBuilder("");
while((res = in.readLine())!=null){
sb.append(res.trim());
}
String str = sb.toString();
Map map = null;
if(StringUtils.isNotEmpty(str)){
int lngStart = str.indexOf("lng":");
int lngEnd = str.indexOf(","lat");
int latEnd = str.indexOf("},"precise");
if(lngStart > 0 && lngEnd > 0 && latEnd > 0){
String lng = str.substring(lngStart+5, lngEnd);
String lat = str.substring(lngEnd+7, latEnd);
map = new HashMap();
map.put("lng", lng);
map.put("lat", lat);
return map;
}
}
}catch (Exception e) {
e.printStackTrace();
}finally{
try {
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return null;
}
public static void main(String args[]){
Map json = MapAction.getGeocoderLatitude("北京市");
System.out.println("lng : "+json.get("lng"));
System.out.println("lat : "+json.get("lat"));
}

API 服务方法,首先申请密钥(ak),才可成功加载APIJS文件。 使用方法如下: script type="text/javascript" src="....

本文由10bet手机官网发布于面向对象,转载请注明出处:利用百度地图JSAPI生成h7n9禽流感分布图实现代码,百度地图js小结

上一篇:如何更改来源,抓取网页遇到 下一篇:没有了
猜你喜欢
热门排行
精彩图文