Openlayers常用代码
//加载json数据
http://openlayers.org/en/latest/examples/select-features.html?q=geojson
var vector = new VectorLayer({
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON()
})
});
//图层清除
Layer.getSource().clear();
//获取要素属性
var name = feature.get("name");
//设置样式
feature.setStyle(polygonStyle);
//添加要素
Layer.getSource().addFeature(feature);
//设置中心与级别zoom
map.getView().setCenter([108.6371, 27.9089]);
map.getView().setZoom(12);
//设置合适范围
var ploygon = feature.getGeometry();map.getView().fit(ploygon, map.getSize());
//新建样式Style
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0,' + opacity + ')'
})
});
//设置样式Style
var markerStyle = new ol.style.Style({
image: new ol.style.Icon({
src: "../css/img/diy/animal.png", //obj.data[i].MAINICON
scale:2
}),
text: new ol.style.Text({
text: obj.data[i].NAME,
fill: new ol.style.Fill({
color: '#fff'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0,0,0,0.6)',
width: 3
}),
offsetY: -20,
offsetX: +40,
scale: 1.1
})
});
//获得要素
Layer.getSource().getFeatures()[i];
//移除要素
Layer.getSource().removeFeature(clearFeature);
//新建Point要素
var Point= new ol.geom.Point(LON,LAT]);
var feature = new ol.Feature({
geometry: Point
});
//获取当前点击处要素，判断当前单击处是否有要素
map.on('click', function (evt) {
var pixel = map.getEventPixel(evt.originalEvent);
var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
}）;
//鼠标移动事件
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
if (hit) {
document.querySelector("#map").style.cursor = "pointer";
} else {
document.querySelector("#map").style.cursor = '';
}
});
//平移动画
map.getView().setCenter([108.66, 27.91]);
view.animate({
center: [LON, LAT],
duration: 1000
});
//飞行动画
flyTo([Number(lon), Number(lat)], function () { });
function flyTo(location, done) {
var duration = 1000;
var zoom = view.getZoom();
var parts = 2;
var called = false;
function callback(complete) {
--parts;
if (called) {
return;
}
if (parts === 0 || !complete) {
called = true;
done(complete);
}
}
view.animate({
center: location,
duration: duration
}, callback);
view.animate({
zoom: zoom - 1,
duration: duration / 2
}, {
zoom: zoom,
duration: duration / 2
}, callback);
}
//根据属性值不同进行不同的符号化http://openlayers.org/en/latest/examples/synthetic-points.html?q=style
//禁用鼠标滑轮事件
var map = new ol.Map({
interactions: ol.interaction.defaults({mouseWheelZoom: false}).extend([
new ol.interaction.mousewheel({
attribution1:true;
attribution2:false;
})
//加载json数据并读取要素
$.getJSON("json/xianju.json", "", function(data) {
var array = new Array();
var feature = new ol.Feature({});
if (data != "error") {
array = data.features;
var type = array[i].geometry.type);
feature = array[i];
feature.setStyle(style);
}
});
//创建Polygon面要素坐标转换
var polygon = new ol.geom.Polygon([[[110, 39], [116, 39], [116, 33], [110, 33], [110, 39]]]);
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
//创建面符号
var style = new ol.style.Style({
fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
color: 'rgba(255, 255, 255, 0.6)'
}),
text: new ol.style.Text({ //文本样式
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3
})
})
});
//创建边界符号
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FF0000',
width: 5
})
});
//新建交互interaction draw
draw = new ol.interaction.Draw({
source: sqlGeoLayer.getSource(),
type: ("Polygon")，
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
})
});
map.addInteraction(draw);
map.removeInteraction(draw);
//鼠标移动事件
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(6),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
//创建地图
var map = new ol.Map({
interactions: ol.interaction.defaults({
doubleClickZoom: false
}),
controls: ol.control.defaults({
attribution: false,
rotate: false,
zoom: false
}).extend([mousePositionControl]),
layers: layers,
logo: false,
view: view,
target: 'map'
});
//获取坐标
vectorLayer.getSource().getFeatures()[0].getGeometry().getCoordinates()
//全图显示
function fullMap() {
var extent = [108.49735216773631, 27.672426409945608, 108.87788020131285, 28.11989614751149];
map.getView().fit(extent, map.getSize());
};
//清除交互
map.addInteraction(dragZoom);
dragZoom.setActive(false);
var dragzoomActive = false;
function endInteraction() {
map.removeInteraction(draw);
map.removeOverlay(helpTooltip);
}
var dragZoom = new ol.interaction.DragZoom({
condition: ol.events.condition.always,
out: false
});
//放大
function zoomIn() {
endInteraction()
dragZoom.G = false;
dragZoom.setActive(true);
dragzoomActive = true;
document.querySelector("#map").style.cursor = "crosshair";
}
//缩小
function zoomOut() {
endInteraction()
dragZoom.G = true;
dragZoom.setActive(true);
dragzoomActive = true;
document.querySelector("#map").style.cursor = "crosshair";
}
//平移
function pan() {
endInteraction();
map.removeInteraction(draw);
dragZoom.setActive(false);
document.querySelector("#map").style.cursor = "pointer";
}
//唯一值符号化
var vector = new ol.layer.Vector({
source: vectorSource,
style: function(feature) {
var classify = feature.get('activeprod');
return styleCache[classify];
}
});
var styleCache = {
'ABANDONED': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(225, 225, 225, 255)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 255)',
width: 0.4
})
}),
'GAS': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 255)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0.4
})
}),
'OIL': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(56, 168, 0, 255)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0
})
}),
'OILGAS': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(168, 112, 0, 255)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0.4
})
})
};