openlayers/// Puppeteer.js

1.定位;https://viglino.github.io/ol3-ext/examples/map.interaction.geolocationdraw.html

2 .添加Overlay  div遮住鼠标事件处理

var point_div = document.createElement('div');
point_div.className = "css_animationBui mapEleClass";
point_div.style.background = "rgba(0,250,154,1)"; // "";

var point_overlay = new ol.Overlay({
element: point_div,
positioning: 'center-center',
stopEvent:false//设置为false 说明鼠标在overlay上也起作用
});
map.addOverlay(point_overlay);
point_overlay.setPosition(cor);

 

3.线闪烁的问题

 

beyondSource = new ol.source.Vector({
wrapX : false
});

beyondvector = new ol.layer.Vector({
source : beyondSource
});

beyondvector.setZIndex(20)
map.addLayer(beyondvector);

思路：将要闪烁的线放到单独的vector上 设置定时器 让整个vector 设置是否可用

 

function beyondvectorInterFun(){
var thisVisible=beyondvector.getVisible()
if(thisVisible){
beyondvector.setVisible(false)
$('#map').find('.css_animationBui').hide()
}else{
beyondvector.setVisible(true)
$('#map').find('.css_animationBui').show()
}
}

 

4.地理查询

 openstreetmap 

5.中国地理数据

http://download.geofabrik.de/asia.html

5.  获取当前视野的范围

var bounds = map.getView().calculateExtent(map.getSize());
bounds = ol.extent.applyTransform(bounds, ol.proj.getTransform("EPSG:3857", "EPSG:4326"));

var polygon = [];
polygon.push(ol.extent.getBottomLeft(bounds))
polygon.push(ol.extent.getBottomRight(bounds))
polygon.push(ol.extent.getTopRight(bounds))
polygon.push(ol.extent.getTopLeft(bounds))
polygon.push(ol.extent.getBottomLeft(bounds))
console.log(JSON.stringify(polygon))

6.鼠标右键

https://github.com/jonataswalker/ol3-contextmenu

7.计算长度

var TtheGeom = "119.96538162231444,36.24911862849349;120.09464263916017,36.24911862849349;120.09464263916017,36.28136778049705;119.96538162231444,36.28136778049705;119.96538162231444,36.24911862849349"

//var TtheGeom = "120.1826,35.9349;120.1855,35.9326;120.1812,35.9286;120.1763,35.9318;120.1794,35.9347;120.1826,35.9349";
var coordinates = TtheGeom.split(";");
var pts = [];
for(var m = 0; m < coordinates.length; m++) {
if(coordinates[m] == "") {
break;
}
var cor = ol.proj.transform([Number(coordinates[m].split(",")[0]), Number(coordinates[m].split(",")[1])], 'EPSG:4326', 'EPSG:3857');

pts.push(cor);

if(pts && $.isArray(pts) && pts.length > 1) {

var feature = new ol.Feature(new ol.geom.LineString(pts));
//var length = feature.getGeometry().getLength(); //计算长度【注意直接使用geom的getLength方法获取长度，openlayers默认的长度单位是m。所有如果长度大于1000，需要转换成km。】

//、、、、、、、、、、、、、、、、、、、、、、
var sphere = new ol.Sphere(6378137);
var lonLatLine = feature.getGeometry().transform('EPSG:3857', 'EPSG:4326');
var lineCoordinates = lonLatLine.getCoordinates();
var length = 0;
for(var i = 0; i < lineCoordinates.length - 1; i += 1) {
length += sphere.haversineDistance(lineCoordinates[i], lineCoordinates[i + 1]);
}

 if (length > 1000) {
                            length = length / 1000;
                            unit = 'km';
                        } else {
                            unit = 'm';
                        }　　

console.log(length)

});
}

注：openlayers默认的长度单位是m。所有如果长度大于1000，需要转换成km。

 

7.1计算管线长度

function calculationPipelineLength(thisPts){//坐标
var thiSfeature = new ol.Feature(new ol.geom.LineString(thisPts));//thisPts 3857坐标
var sphere = new ol.Sphere(6378137);
var lonLatLine = thiSfeature.getGeometry().transform('EPSG:3857','EPSG:4326');
var lineCoordinates = lonLatLine.getCoordinates();
var length = 0;
for(var i = 0; i < lineCoordinates.length - 1; i += 1) {
length += sphere.haversineDistance(lineCoordinates[i], lineCoordinates[i + 1]);
}
return length = (length / 1000).toFixed(4);
}

8、poenlayers集合echarts 

https://freegis.github.io/examples/ol3-echarts.html

 

9。根据ol.layer.vecor 的name获取 

var layers = map.getLayers().getArray();
$.each(layers, function(idx, obj) {
console.log(obj.get('names'))
if(obj.get('names') == 'source') {
obj.setVisible(false)//设置层是否可用
}
});

10.流动效果  http://iclient.supermapol.com/examples/openlayers/editor.html#mapvPolylineTime

 

11.地图 gif

map.on('precompose', function(event) {
doAnimation();
});
map.on('postcompose', function(event) {
doAnimation();
});
map.on('postrender', function(event) {
doAnimation();
});

 

var pradius=1;
function doAnimation() {
var aa = onlinePSource.getFeatures();
// 增大半径，最大20
pradius += 0.2;
if(pradius > 13) {
pradius = 1;
}
var src = "../static/images/mapLayerImg/xjImg/" + parseInt(pradius) + ".png";
for(var i = 0; i < aa.length; i++) {
aa[i].setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 50],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
offset: [0, 0], // 位置设定
scale:0.8, // 图标缩放比例
opacity: 1, // 透明度
src: src // 图标的url
}),

text: new ol.style.Text({
textAlign: 'center', // 位置center
textBaseline: 'middle', // 基准线
font: '800 14px 微软雅黑', // 文字样式
text: aa[i].get("name"),
scale:1,
fill: new ol.style.Fill({
color: '#008B8B'
}), // 文本填充样式（即文字颜色）
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})

}));
}

}

 

12.柱状图

http://www.cnblogs.com/shitao/p/3376495.html

 

13.圈选 矩形

var geometryFunction = ol.interaction.Draw.createBox();
var aaa = source.getFeatures();
if(draw) {
map.removeInteraction(draw);
}
var geometryFunction, maxPoints;
draw = new ol.interaction.Draw({
source: source,
type: "Circle", // Point 点；LineString">线；Polygon">多边形<Circle 圆
geometryFunction: geometryFunction
});

map.addInteraction(draw);
draw.on('drawstart', function(evt) {
source.clear();
}, this);
draw.on('drawend', function(evt) {

var pts = evt.feature.getGeometry().getExtent() //圆的点
console.log(circleCoordinatesLonlat(pts))

//圆的坐标 转为经纬度坐标
map.removeInteraction(draw);
}, this);

 

14.加载底图

http://blog.csdn.net/u014529917/article/details/52241389

15.

//地图服务
//1 http://mt3.google.cn/vt/lyrs=t@131,r@216000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Gal //谷歌地形图
//2 http://www.google.cn/maps/vt/lyrs=s@142&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil 【管网】
//3 http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G 谷歌混合图
//谷歌交通图
//4 http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0

 

16 判断一个点是否在一个闭合的多边形内

var aa = ol.proj.transform([120.031, 36.26], 'EPSG:4326', 'EPSG:3857');
console.log(aa);
var thisFeature = source.getFeatureById("1111");
var geo = thisFeature.getGeometry(); //feture是几何元素
var isIn = geo.intersectsCoordinate(aa);
if(isIn) {
console.log("该mark点在当前几何元素里。");
} else {
console.log("该mark点bu在当前几何元素里。");
}

 

17.获取extent 

var bounds = map.getView().calculateExtent(map.getSize());
console.log(bounds)