openlayers-⽅向标注openlayers-⽅向标注
需求
给LineString 标注⽅向
效果图
设计思路
1. 设计⼀个⽅向箭头图标
2. 计算线段⽅向（LineString 可以放很多坐标⽽线段⽅向是两点之间）
1. （0，1）（1，2）（2，3）…⽅式计算每⼀段的⽅向⾓度
3. ⽅向点安放坐标
1. let array_coor = CoordinateAt(i *1.0/ res);
主要函数
单⼀线段计算⾓度
function calcD(start, end){
let dx = end[0]- start[0];
let dy = end[1]- start[1];
let rotation = Math.atan2(dy, dx);
console.log("⾓度"+ rotation);
return rotation;
}
从坐标组中计算线段以及每⼀段的⽅向⾓
// 计算线段⾓度
function calcLineStringD(coordis){
let n = coordis.length;
let vs =[];
for(let i =0; i < n; i++){
if(i +1< n){
vs.push({
"line":[coordis[i], coordis[i +1]],
"d":calcD(coordis[i], coordis[i +1])
})
}
}
return vs;
}
设置样式
new ol.style.Style({
geometry:Point(array_coor),
image:new ol.style.Icon({
src:'localhost:9999/titles/fx.png',
anchor:[0.75,0.5],
rotateWithView:true,
rotation:-rat
})
})
完整demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<title>⽅向箭头</title>
<script src="/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
<link rel="stylesheet"href="/ajax/libs/openlayers/4.6.5/ol.css"
everydayintegrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw="crossorigin="anonymous"/> <script src="/ajax/libs/openlayers/4.6.5/ol.js"
integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
crossorigin="anonymous"></script>
<script src="/rbush@2.0.1/rbush.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var wkt ='LineString( 120 30 , 121 31 ,121 32 ,122 33 )';
麦克杰克逊的歌
var format =new ol.format.WKT();
var feature = adFeature(wkt,{});
// 将⽅向标注放在线段中间
function direction_labeling_02(res, lineStringForl, coordis, vs, styles){ for(let i =0; i < vs.length; i++){
let line = vs[i]['line'];
let start =line[0];
let end = line[1];
let array_coor =[
(start[0]+end[0])/2,(start[1]+end[1])/2stitch
];
let d = vs[i]['d'];
styles.push(new ol.style.Style({
geometry:Point(array_coor),
image:new ol.style.Icon({
src:'localhost:9999/titles/fx.png',
anchor:[0.75,0.5],
rotateWithView:true,
rotation:-d
})
}))
}
}
function direction_labeling_01(res, lineStringForl, coordis, vs, styles){ // 这个地⽅可以修改成你要的箭头数量
let arrow_count = res *1.0*40;
for(let i =0; i < arrow_count; i++){
// 求坐标
let array_coor = CoordinateAt(i *1.0/ res);proficiency
// // array_coor 在 coordis 不显⽰
if(inc(coordis, array_coor)){
console.log("相同"+ i);
continue;
}
let rat =calcLinePointD(vs, array_coor);
// 根据 array_coor 在那⼀条线段上设置旋转⾓度
styles.push(new ol.style.Style({
geometry:Point(array_coor),
image:new ol.style.Icon({
src:'localhost:9999/titles/fx.png',
anchor:[0.75,0.5],
rotateWithView:true,
rotation:-rat
})beijing time
}));
}
}
/**
*
* @param feature feature
* @param res 总共多少个箭头
* @returns {ol.style.Style[]}
*/
function styleFunction(feature, res){
var lineStringForl = Geometry();
var coordis = Coordinates();
var styles =[
食甚
new ol.style.Style({
stroke:new ol.style.Stroke({
stroke:new ol.style.Stroke({
color:'#23218b',
width:10
})
})
];
// 计算线段⾓度
let vs =calcLineStringD(coordis);
// direction_labeling_01(res, lineStringForl, coordis, vs, styles);
direction_labeling_02(res, lineStringForl, coordis, vs, styles);
return styles;
}
// 计算点是否在线上
function pointInLine(line,Q){
let pi = line[0];
let pj = line[1];
if((Q[0]- pi[0])*(pj[1]- pi[1])==(pj[0]- pi[0])*(Q[1]- pi[1])&& Math.min(pi[0], pj[0])
<=Q[0]&&Q[0]<= Math.max(pi[0], pj[0])&& Math.min(pi[1], pj[1])<=Q[1]&&Q[1]<= Math.max(pi[1], pj[1])){
console.log("再线段上");
return true;
}el{
console.log("不再线段上");
return fal;
}
}
// 返回点所在线段的具体⾓度
function calcLinePointD(vs, point){
for(let i =0; i < vs.length; i++){
let line = vs[i]['line'];
let d = vs[i]['d'];
if(pointInLine(line, point)==true){
return d;
}
}
}
// 计算线段⾓度
function calcLineStringD(coordis){
let n = coordis.length;
let vs =[];
for(let i =0; i < n; i++){
if(i +1< n){
vs.push({
"line":[coordis[i], coordis[i +1]],
"d":calcD(coordis[i], coordis[i +1])
})
}
}
return vs;
}
xamen// 计算线段⾓度
function calcD(start, end){
let dx = end[0]- start[0];
let dy = end[1]- start[1];
let rotation = Math.atan2(dy, dx);
console.log("⾓度"+ rotation);
return rotation;
}
/**
* 判断坐标组合cood中是否有atc,
* 不会判断强写万事如意英文
* @param cood 坐标组合
* @param atc 坐标
* @returns {boolean}
*/
function inc(cood, atc){
for(c in cood){
if(cood[c][0]== atc[0]&& cood[c][1]== atc[1]){
return true;
}
}
}
return fal;
}
var vector =new ol.layer.Vector({
source:new ol.source.Vector({
features:[feature]
}),
style:styleFunction(feature,100)
美丽的回忆});
var gaodeMapLayer =new ol.layer.Tile({
source:new ol.source.XYZ({
url:'wprd0{1-4}./appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' })
});
var map =new ol.Map({
layers:[gaodeMapLayer, vector],
view:new ol.View({
center:[120,30],
projection:'EPSG:4326',
zoom:5
}),
亚瑟圣诞
target:'map'
});
</script>
</body>
</html>
