因为是个新手,没接触过这些,研究了一整天,在同事的帮助下终于实现了这个功能
展现在了腾讯地图上,首先在腾讯地图上画了一条线。
画线代码如下,写在了JSP中:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>telnet</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OBKBZ-TQR6P-UF6DH-LZNDS-RFACZ-5RFX6"></script>
<%--<script src="../../webpage/layouts/turf.min.js" type="text/javascript"></script>--%>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var starttime = new Date().getTime()
console.log(starttime)
var map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(40.387171, 116.664496),
zoom: 20
});
// var path = [
// new qq.maps.LatLng(40.387068075016515 ,116.66346413167936 ),
// new qq.maps.LatLng(40.387247924983484 ,116.66346186832062 ),
// new qq.maps.LatLng(40.38726092498349 ,116.66449486832063 ),
// new qq.maps.LatLng(40.38708107501652 ,116.66449713167937 ),
// new qq.maps.LatLng(40.387068075016515 ,116.66346413167936 ),
//
//
// ];
var path1 = [
new qq.maps.LatLng(40.387171, 116.664496),
new qq.maps.LatLng(40.387158, 116.663463),
];
// 通道
// var polygon = new qq.maps.Polygon({
// map: map,
// path: path,
// strokeColor: new qq.maps.Color(0, 0, 0, 0.8),
// fillColor: qq.maps.Color.fromHex("#FFFFFF", 0.5)
// });
//通道
var polygon = new qq.maps.Polygon({
map: map,
path: path1,
strokeColor: new qq.maps.Color(0, 0, 0, 0.8),
fillColor: qq.maps.Color.fromHex("#FFFFFF", 0.5)
});
var endtime = new Date().getTime()
console.log(endtime - starttime)
</script>
</body>
</html>
注释掉的部分是后面的java代码生成的缓冲区坐标组,后面会贴出显示结果,
java部分代码:
package com.jeeplus.modules.zzbdapp.web.patrol;
import com.vividsolutions.jts.geom.Coordinate;
import com.vividsolutions.jts.geom.Geometry;
import com.vividsolutions.jts.geom.GeometryFactory;
import com.vividsolutions.jts.operation.buffer.BufferOp;
import com.vividsolutions.jts.algorithm.PointLocator;
/**
* @Author: ys
* @Date: 2019-03-27 9:51
*/
public class GeoTest {
public static void main(String[] args) {
//创建一条直线
Coordinate[] coordinates4 = new Coordinate[] {
new Coordinate(116.664496,40.387171),
new Coordinate(116.663463,40.387158),
};
GeometryFactory gf=new GeometryFactory();
Geometry gfLineString = gf.createLineString(coordinates4);
double degree = 10 / (2*Math.PI*6371004)*360;
//缓冲区建立
BufferOp bufOp = new BufferOp(gfLineString);
bufOp.setEndCapStyle(BufferOp.CAP_BUTT);
Geometry bg = bufOp.getResultGeometry(degree);
System.out.println("缓冲区---"+bg);
//点是否在多边形内判断
Coordinate point = new Coordinate(116.663609,40.387187);
PointLocator a=new PointLocator();
boolean p1=a.intersects(point, bg);
if(p1)
System.out.println("point1:"+"该点在多边形内"+p1);
else
System.out.println("point1:"+"该点不在多边形内"+p1);
}
}
打印输出的结果:
将结果的缓冲区坐标填充jsp即可。
需要注意的是:bufOp.setEndCapStyle(BufferOp.CAP_BUTT);是生成的缓冲区样式类型。一共分三种:
double degree = 10 / (2*Math.PI*6371004)*360;是将度换算成米,公式为:degree = meter / (2 * Math.PI * 6371004) * 360
因为使用Geometry bg = bufOp.getResultGeometry(参数)里面的参数不是距离单位,而是一个度数单位,具体我也不清楚了。这里是同事帮忙解决的。
最终结果如下:
新接触的框架,网上的资料不是很多,为了自己记录 也算是为了方便别人吧。