openlayers-热地图加载（完整版及代码）

Posted 2021-01-23 benmumu

//地圖加載
function mapInit(data){
//底图
// var raster = new ol.layer.Tile({
// source: new ol.source.Stamen({
// layer: ‘toner‘
// })
// });
var projection = new ol.proj.Projection({
code: ‘EPSG:4326‘,// ||mapdata.code,
extent: [data.map.minX, data.map.minY, data.map.maxX, data.map.maxY],
});
var view = new ol.View({
center: [data.map.cx, data.map.cy],
projection: projection,
zoom: data.map.zoom,
maxZoom:data.map.maxZoom,
minZoom:data.map.minZoom,
zoomFactor:1.2
});
var opts = {
doubleClickZoom:false,
DragRotateAndZoom:false
};
var map = new ol.Map({
target: ‘map‘,
view:view,
interactions: ol.interaction.defaults(opts)
});
//热力图数据 GeoJSON默认参考坐标系为 EPSG:4326.，根据实际需要进行更改
var heatData = [
{
type: "FeatureCollection",
features: [
{ type: "Point", "coordinates": [117.363228, 32.939667], count: 80 },
{ type: "Point", "coordinates": [117.359623, 32.941612], count: 60 },
{ type: "Point", "coordinates": [117.365631, 32.94651], count: 90 },
{ type: "Point", "coordinates": [117.36443, 32.928789], count: 80 },
{ type: "Point", "coordinates": [117.351212, 32.95328], count: 60 },
{ type: "Point", "coordinates": [117.363228, 32.936281], count: 90 },
{ type: "Point", "coordinates": [117.385029, 32.948383], count: 60 },
{ type: "Point", "coordinates": [117.370781, 32.920144], count: 80 },
{ type: "Point", "coordinates": [117.393097, 32.936137], count: 80 },
{ type: "Point", "coordinates": [117.373528, 32.919856], count: 80 },
{ type: "Point", "coordinates": [117.353443, 32.916541], count: 80 },
{ type: "Point", "coordinates": [117.397217, 32.913803], count: 80 },
{ type: "Point", "coordinates": [117.35207, 32.904148], count: 80 }
]
}];
//矢量图层 获取geojson数据
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(heatData[0], {
dataProjection: ‘EPSG:4326‘,
featureProjection: ‘EPSG:4326‘
})
});
// Heatmap热力图
var vector = new ol.layer.Heatmap({
source: vectorSource,
opacity: [0, 0.8],//透明度
shadow: 250,//阴影像素大小，默认250
//矢量图层的渲染模式：
//‘image‘：矢量图层呈现为图像。性能出色，但点符号和文本始终随视图一起旋转，像素在缩放动画期间缩放。
//‘vector‘：矢量图层呈现为矢量。即使在动画期间也能获得最准确的渲染，但性能会降低。
renderMode: ‘vector‘
});
windowMapChe = map;
map.addLayer(vector);

if(data.map.mapType == 3){//底图格式为DXF
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
projection: view.getProjection(),
url: getBaseURL()+"module/uploads/"+data.map.mapUrl,
format: new ol.format.GeoJSON()
})
});
}else{
var layer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: getBaseURL()+"module/uploads/"+data.map.mapUrl,
projection: view.getProjection(),
imageExtent: [data.map.minX,data.map.minY,data.map.maxX,data.map.maxY]
})
});
}
layer.setZIndex(0);
map.addLayer(layer);
$(‘.ol-attribution‘).hide()

//聚焦地圖指定位置
loc =[data.map.cx,data.map.cy];
// 聚焦地图指定位置 按指定缩放比例
focusTo(loc,-1);
// 添加地图左侧工具
initTools()
}
/**
* 聚焦地图指定位置 按指定缩放比例
*/
function focusTo(location,zoomTo){
var zoom = zoomTo||(windowMapChe.get("suitzoom")*1);
var duration = 500;
var pan = ol.animation.pan({
duration: duration,
source: /** @type {ol.Coordinate} */ (windowMapChe.getView().getCenter()),
});
var zooma = ol.animation.zoom({
duration: duration,
resolution: 1 * windowMapChe.getView().getResolution()
});
if(-1==zoom){
zoom =windowMapChe.get("suitzoom")*1;
windowMapChe.beforeRender(pan);
}else{
windowMapChe.beforeRender(zooma,pan);
}
windowMapChe.getView().setCenter(location);
windowMapChe.getView().setZoom(zoom);
//初始化設置中心位置
var params = {
zoom:zoom,
center:windowMapChe.getView().setCenter(location)
};
windowMapChe.setProperties({"suitzoom":params.zoom||1});
windowMapChe.setProperties({"recenter":params.center||location});
}
function initTools(){
// 添加自定义业务操作工具栏
var btns =[
// 工具条显示隐藏控制钮
{id:"toolbar-tool",tagName:‘li‘,className:‘arrow_down ctl‘, title:"工具栏",trigger:‘click‘,callback:toolToggle },
// 地图放大按钮
{id:"toolbar-zoomin",className:‘zoomin tool‘,title:‘放大‘,trigger:‘click‘,callback:toolMapZoomIn},
// 地图缩小按钮
{id:"toolbar-zoomout",className:‘zoomout tool‘,title:‘缩小‘,trigger:‘click‘,callback:toolMapZoomOut},
// 地图还原位置和缩放比例
{id:"toobar-refresh",className:‘refresh tool‘,title:‘还原‘,trigger:‘click‘,callback:toolRefresh}
];
for(var i in btns){
addBusinessTool({btns:btns[i]});// btns:btns
}

$(".maptool>button").each(function(){
if(!$(this).hasClass("zoomin")
&&!$(this).hasClass("zoomout")
&&!$(this).hasClass("layout")
&&!$(this).hasClass("refresh")){
$(this).on(‘click‘,function(){
if($(this).hasClass("active")){
$(this).removeClass("active");
}else{
$(this).addClass("active");
}
});
}
});
$(".maptool.tool").each(function(e){
$(this).hide();
});
$(".ol-zoom, .ol-zoomslider").remove();
// 添加地图元素事件
// addMapElementEvent(); 鼠标移动及点击事件

}
//工具条显示隐藏按钮
function toolToggle(){
if($(this).hasClass("arrow_up")){
$(this).removeClass("arrow_up");
$(this).addClass("arrow_down");
$(".ol-control, .maptool, .tool").each(function(e){
if(!$(this).hasClass("arrow_down") && !$(this).hasClass("person") && !$(this).hasClass("area") && !$(this).hasClass("device") && !$(this).hasClass("building")){
$(this).addClass("hide");
}
});
}else{
$(this).removeClass("arrow_down");
$(this).addClass("arrow_up");
$(".ol-control, .maptool, .tool").each(function(e){
$(this).show().removeClass("hide");
});
$(‘.ol-logo-only‘).hide()//地图右侧小图标
}
}
//地图放大按钮事件
function toolMapZoomIn(){
var view = windowMapChe.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
}
// 地图缩小按钮事件
function toolMapZoomOut(){
var view = windowMapChe.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
}
//还原地图位置和缩放比例
function toolRefresh(){
var center = windowMapChe.get("recenter");
var zoom = windowMapChe.get("suitzoom");
var duration = 1500;
var start = +new Date();
var pan = ol.animation.pan({
duration: duration,
source: /** @type {ol.Coordinate} */ (windowMapChe.getView().getCenter()),
start: start
});
var bounce = ol.animation.bounce({
duration: duration,
resolution: 1.1 * windowMapChe.getView().getResolution(),
start: start
});
var zooma = ol.animation.zoom({
duration: duration,
resolution: 1 * windowMapChe.getView().getResolution(),
start: start
});
windowMapChe.beforeRender(bounce,pan,zooma);
windowMapChe.getView().setCenter(center);
windowMapChe.getView().setZoom(zoom);
}
/**
* 添加地图业务工具栏
*/
function addBusinessTool(opt){
businessTool = function(opt_options) {
var options = opt_options || {};
var element = document.createElement(‘div‘);
element.className=‘maptool ol-unselectable ol-control ‘+opt_options.btns.className;
var button =createToolbarBtn(options.btns);
element.appendChild(button);
ol.control.Control.call(this, {
element: element,
target: options.target
});

};
ol.inherits(businessTool, ol.control.Control);
windowMapChe.addControl(new businessTool(opt));
}
function createToolbarBtn(data){
var ele = document.createElement("button");
ele.className=data.className;
ele.id=data.id;
ele.title=data.title;
$(ele).on(data.trigger,data.callback);
return ele;
}