openlayers-热地图加载(完整版及代码)
//地圖加載
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-热地图加载(完整版及代码)的更多相关文章
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- js 实现对象的混合与克隆效果,带完整版解析代码[helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 对象混合 ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- js 实现淘宝放大镜功能,可更改配置参数 带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...
- js 实现文字滚动功能,可更改配置参数 带完整版解析代码。
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...
- Openlayers+Geoserver(一):项目介绍以及地图加载
项目验收完,趁着事情不是很多,对这个项目进行梳理.我主要负责地图模块,网站其他模块主要有两个,一个是报表,主要是100多张报表,技术没有难度,主要是工作量的问题.另一个是数据的校验,就是 ...
- 免费的Lucene 原理与代码分析完整版下载
Lucene是一个基于Java的高效的全文检索库.那么什么是全文检索,为什么需要全文检索?目前人们生活中出现的数据总的来说分为两类:结构化数据和非结构化数据.很容易理解,结构化数据是有固定格式和结构的 ...
- pyspider 示例二 升级完整版绕过懒加载,直接读取图片
pyspider 示例二 升级完整版绕过懒加载,直接读取图片,见[升级写法处] #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on ...
- 页面加载完之后在执行js代码
把代码写在 window.onload = function () { //js代码 //此处js代码是页面完全加载完之后执行 } 即可. 例: <script type="text/ ...
随机推荐
- 【vue】vue-cli 脚手架项目简介(一) - package.json
vue-cli是用来生成 vue项目的命令行工具,它的使用方法是这样的: vue init <template-name> <project-name>第二个参数 templa ...
- jsp页面九大内置对象
资源转载自网上,不可用于商用,学习可以.内置对象又叫隐式对象/隐含对象是由WEB容器加载的一组类的实例,不需要预先声明就可以在脚本代码和表达式中随意使用的对象. 这九大隐式对象可以按照期作用分类为: ...
- test20190320 全连(fc)
题意 全连(fc) [题目背景] 还记得若干年前那段互相比较<克罗地亚狂想曲>的分数的日子吗? [题目描述] E.Space 喜欢打音游. 但是他技术不好,总是拿不到全连(Full Com ...
- 初学者必读原生AJAX-异步的javaScript和XML
1.前台页面 <form action="#" method="post"> 姓名<input type="text" n ...
- java打jar包的几种方式详解
经常会头疼于一个jar包是如何制作的,包括maven的打包方式,springboot的打jar包的原理,jar包稍稍有错误就会完全无法运行.在网上折腾了很久终于有些思路和步骤,在这里做个笔记 本文目录 ...
- ASP.NET Core 2.0 使用支付宝PC网站支付实现代码(转)
最近在使用ASP.NET Core来进行开发,刚好有个接入支付宝支付的需求,百度了一下没找到相关的资料,看了官方的SDK以及Demo都还是.NET Framework的,所以就先根据官方SDK的源码, ...
- POJ1631 LIS模板
题目:http://poj.org/problem?id=1631 两种nlogn的方法. 1.树状数组优化暴力.有种扫描线的感觉,以时间保证位置,把值作为数组脚标. 2.记录长为...的上升子序列末 ...
- JFrame 与 Frame
JFrame是Frame的子类 Frame is part of java.awt package and exists since JDK1.0. JFrame is part of javax.s ...
- 转 Fiddler导出jmeter脚本
前提条件: 1.下载安装抓包工具Fiddler 2.下载Fiddler插件,参考下载地址:http://download.csdn.net/ ...
- asp.net 网站 发布时 去掉.cs文件
VS2013在WIN8下扁平的UI和我今天锈垢的大脑,让找这个设置找了好半天!!! OK,言归正传. 在要发布的网站上右键,选择"发布网站". 在发布窗口中,会让你选择 ...