//地圖加載
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;
}

openlayers-热地图加载(完整版及代码)的更多相关文章

  1. js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  2. js 实现对象的混合与克隆效果,带完整版解析代码[helpers.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 对象混合 ...

  3. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  4. js 实现淘宝放大镜功能,可更改配置参数 带完整版解析代码[magnifier.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...

  5. js 实现文字滚动功能,可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  6. Openlayers+Geoserver(一):项目介绍以及地图加载

           项目验收完,趁着事情不是很多,对这个项目进行梳理.我主要负责地图模块,网站其他模块主要有两个,一个是报表,主要是100多张报表,技术没有难度,主要是工作量的问题.另一个是数据的校验,就是 ...

  7. 免费的Lucene 原理与代码分析完整版下载

    Lucene是一个基于Java的高效的全文检索库.那么什么是全文检索,为什么需要全文检索?目前人们生活中出现的数据总的来说分为两类:结构化数据和非结构化数据.很容易理解,结构化数据是有固定格式和结构的 ...

  8. pyspider 示例二 升级完整版绕过懒加载,直接读取图片

    pyspider 示例二 升级完整版绕过懒加载,直接读取图片,见[升级写法处] #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on ...

  9. 页面加载完之后在执行js代码

    把代码写在 window.onload = function () { //js代码 //此处js代码是页面完全加载完之后执行 } 即可. 例: <script type="text/ ...

随机推荐

  1. 【网络通讯】Nat知识了解

    一.Nat的含义 NAT(Network Address Translation,网络地址转换)是1994年提出的.当在专用网内部的一些主机本来已经分配到了本地IP地址(即仅在本专用网内使用的专用地址 ...

  2. Why my setting does not work?

    lab            mypc      server7000    ->  5900 1080    ->  10800            10800 -> inter ...

  3. shell教程-002:常见的Shell种类

    Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说有多少种Sh ...

  4. Linux Home目录硬盘空间缩减

    Linux Home目录硬盘空间缩减 操作   基于centos6.5 x86_64, runlevel 3,命令行模式,测试成功. 1.首先查看磁盘使用情况 [root@localhost ~]# ...

  5. phper必知必会(一)

    1.http返回状态 200:成功,服务器已经成功处理了请求,并正常返回了提供请求的网页 301:永久移动,服务器会将请求转移到新的服务器地址 302:临时移动 401:未授权请求,请求需要身份移动 ...

  6. Linux下Oracle中SqlPlus时上下左右键乱码问题的解决办法

    window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在Linux下,会出现各种乱码,非常不方便,如下图所示,每次打错一个字符就需要重新打一遍. 解决办法:rlwrap ...

  7. bootstrap+font-awesome表单

    bootstrap+font-awesome表单 <form action="" class="form-horizontal col-sm-offset-4&qu ...

  8. HDFS高级开发培训课程之HDFS开发实例课件

    前言: 刚刚完成的HDFS高级开发培训课程课件中的一个章节,不知道PPT,如何导出HTML格式,只好批量导出图片,贴图了. 连接管理:建立连接.断开连接.设置连接参数 文件操作:浏览文件.上传文件.下 ...

  9. BASIC-29_蓝桥杯_高精度加法

    题目: 问题描述 输入两个整数a和b,输出这两个整数的和.a和b都不超过100位. 算法描述 由于a和b都比较大,所以不能直接使用语言中的标准数据类型来存储.对于这种问题,一般使用数组来处理. 定义一 ...

  10. BASIC-6_蓝桥杯_杨辉三角形

    示例代码: #include <stdio.h>#include <stdlib.h> int main(void){ int n = 0 ; int i = 0 , j = ...