【 转】百度地图Canvas实现十万CAD数据秒级加载
Github上看到：
https://github.com/lcosmos/map-canvas
这个实现台风轨迹，这个数据量非常庞大，当时打开时，看到这么多数据加载很快，感到有点震惊，然后自己研究了一番，发现作者采用的是Canvas作为百度的自定义覆盖层。
<!DOCTYPE html>
<html>
<head>
<title>百度地图Canvas海量折线</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=nuWah68S1WieW2AEwiT8T3Ro&s=1"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
<script type="text/javascript" src="XXXX/extra/pointLine.js"></script>
<script type="text/javascript">
var styleJson=[{
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ff0000"
}
}];
var map = new BMap.Map('map', {
minZoom: 5
});
map.centerAndZoom(new BMap.Point(112.954699, 27.851256), 13);
map.enableScrollWheelZoom(true);
map.setMapStyle({
styleJson: styleJson
});
$.getJSON('XXXX/extra/line.json', function (result) {
var pointLine = new PointLine(map, {
//线条宽度
lineWidth: 2,
//线条颜色
lineStyle: '#F9815C',
//数据源
data: result,
//事件
methods: {
click: function (e, name) {
console.log('你当前点击的是' + name);
},
mousemove: function (e, name) {
console.log('你当前点击的是' + name);
}
}
});
})
</script>
</body>
</html>
数据源渲染pointLine.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.PointLine = factory());
}(this, (function () {
'use strict';
function CanvasLayer(options) {
this.options = options || {};
this.paneName = this.options.paneName || 'labelPane';
this.zIndex = this.options.zIndex || 0;
this._map = options.map;
this._lastDrawTime = null;
this.show();
}
CanvasLayer.prototype = new BMap.Overlay();
CanvasLayer.prototype.initialize = function (map) {
this._map = map;
var canvas = this.canvas = document.createElement('canvas');
var ctx = this.ctx = this.canvas.getContext('2d');
canvas.style.cssText = 'position:absolute;' + 'left:0;' + 'top:0;' + 'z-index:' + this.zIndex + ';';
this.adjustSize();
this.adjustRatio(ctx);
map.getPanes()[this.paneName].appendChild(canvas);
var that = this;
map.addEventListener('resize', function () {
that.adjustSize();
that._draw();
});
return this.canvas;
};
CanvasLayer.prototype.adjustSize = function () {
var size = this._map.getSize();
var canvas = this.canvas;
canvas.width = size.width;
canvas.height = size.height;
canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';
};
CanvasLayer.prototype.adjustRatio = function (ctx) {
var backingStore = ctx.backingStorePixelRatio || ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
var pixelRatio = (window.devicePixelRatio || 1) / backingStore;
var canvasWidth = ctx.canvas.width;
var canvasHeight = ctx.canvas.height;
ctx.canvas.width = canvasWidth * pixelRatio;
ctx.canvas.height = canvasHeight * pixelRatio;
ctx.canvas.style.width = canvasWidth + 'px';
ctx.canvas.style.height = canvasHeight + 'px';
// console.log(ctx.canvas.height, canvasHeight);
ctx.scale(pixelRatio, pixelRatio);
};
CanvasLayer.prototype.draw = function () {
var self = this;
var args = arguments;
clearTimeout(self.timeoutID);
self.timeoutID = setTimeout(function () {
self._draw();
}, 15);
};
CanvasLayer.prototype._draw = function () {
var map = this._map;
var size = map.getSize();
var center = map.getCenter();
if (center) {
var pixel = map.pointToOverlayPixel(center);
this.canvas.style.left = pixel.x - size.width / 2 + 'px';
this.canvas.style.top = pixel.y - size.height / 2 + 'px';
this.dispatchEvent('draw');
this.options.update && this.options.update.call(this);
}
};
CanvasLayer.prototype.getContainer = function () {
return this.canvas;
};
CanvasLayer.prototype.show = function () {
if (!this.canvas) {
this._map.addOverlay(this);
}
this.canvas.style.display = 'block';
};
CanvasLayer.prototype.hide = function () {
this.canvas.style.display = 'none';
//this._map.removeOverlay(this);
};
CanvasLayer.prototype.setZIndex = function (zIndex) {
this.canvas.style.zIndex = zIndex;
};
CanvasLayer.prototype.getZIndex = function () {
return this.zIndex;
};
var tool = {
merge: function merge(settings, defaults) {
Object.keys(settings).forEach(function (key) {
defaults[key] = settings[key];
});
},
//计算两点间距离
getDistance: function getDistance(p1, p2) {
return Math.sqrt((p1[0] - p2[0]) * (p1[0] - p2[0]) + (p1[1] - p2[1]) * (p1[1] - p2[1]));
},
//判断点是否在线段上
containStroke: function containStroke(x0, y0, x1, y1, lineWidth, x, y) {
if (lineWidth === 0) {
return false;
}
var _l = lineWidth;
var _a = 0;
var _b = x0;
// Quick reject
if (y > y0 + _l && y > y1 + _l || y < y0 - _l && y < y1 - _l || x > x0 + _l && x > x1 + _l || x < x0 - _l && x < x1 - _l) {
return false;
}
if (x0 !== x1) {
_a = (y0 - y1) / (x0 - x1);
_b = (x0 * y1 - x1 * y0) / (x0 - x1);
} else {
return Math.abs(x - x0) <= _l / 2;
}
var tmp = _a * x - y + _b;
var _s = tmp * tmp / (_a * _a + 1);
return _s <= _l / 2 * _l / 2;
}
};
var PointLine = function PointLine(map, userOptions) {
var self = this;
self.map = map;
self.lines = [];
self.pixelList = [];
//默认参数
var options = {
//线条宽度
lineWidth: 1,
//线条颜色
lineStyle: '#F9815C'
};
//全局变量
var baseLayer = null,
width = map.getSize().width,
height = map.getSize().height;
function Line(opts) {
this.name = opts.name;
this.path = opts.path;
}
Line.prototype.getPointList = function () {
var points = [],
path = this.path;
if (path && path.length > 0) {
path.forEach(function (p) {
points.push({
name: p.name,
pixel: map.pointToPixel(p.location)
});
});
}
return points;
};
Line.prototype.draw = function (context) {
var pointList = this.pixelList || this.getPointList();
context.save();
context.beginPath();
context.lineWidth = options.lineWidth;
context.strokeStyle = options.lineStyle;
context.moveTo(pointList[0].pixel.x, pointList[0].pixel.y);
for (var i = 0, len = pointList.length; i < len; i++) {
context.lineTo(pointList[i].pixel.x, pointList[i].pixel.y);
}
context.stroke();
context.closePath();
context.restore();
};
//底层canvas渲染，标注，线条
var brush = function brush() {
var baseCtx = baseLayer.canvas.getContext('2d');
if (!baseCtx) {
return;
}
addLine();
baseCtx.clearRect(0, 0, width, height);
self.pixelList = [];
self.lines.forEach(function (line) {
self.pixelList.push({
name: line.name,
data: line.getPointList()
});
line.draw(baseCtx);
});
};
var addLine = function addLine() {
if (self.lines && self.lines.length > 0) return;
var dataset = options.data;
dataset.forEach(function (l, i) {
var line = new Line({
name: l.name,
path: []
});
l.data.forEach(function (p, j) {
line.path.push({
name: p.name,
location: new BMap.Point(p.Longitude, p.Latitude)
});
});
self.lines.push(line);
});
};
self.init(userOptions, options);
baseLayer = new CanvasLayer({
map: map,
update: brush
});
this.clickEvent = this.clickEvent.bind(this);
this.bindEvent();
};
PointLine.prototype.init = function (settings, defaults) {
//合并参数
tool.merge(settings, defaults);
this.options = defaults;
};
PointLine.prototype.bindEvent = function (e) {
var map = this.map;
if (this.options.methods) {
if (this.options.methods.click) {
map.setDefaultCursor("default");
map.addEventListener('click', this.clickEvent);
}
if (this.options.methods.mousemove) {
map.setDefaultCursor("default");
map.addEventListener('mousemove', this.clickEvent);
}
}
};
PointLine.prototype.clickEvent = function (e) {
var self = this,
lines = self.pixelList;
if (lines.length > 0) {
lines.forEach(function (line, i) {
for (var j = 0; j < line.data.length; j++) {
var beginPt = line.data[j].pixel;
if (line.data[j + 1] == undefined) {
return;
}
var endPt = line.data[j + 1].pixel;
var curPt = e.pixel;
var isOnLine = tool.containStroke(beginPt.x, beginPt.y, endPt.x, endPt.y, self.options.lineWidth, curPt.x, curPt.y);
if (isOnLine) {
self.options.methods.click(e, line.name);
return;
}
}
});
}
};
return PointLine;
})));
数据源：line.json
效果图片：
【 转】百度地图Canvas实现十万CAD数据秒级加载的更多相关文章
- 百度地图Canvas实现十万CAD数据秒级加载
背景 前段时间工作室接到一个与地图相关的项目,我作为项目组成员主要负责地图方面的设计和开发.由于地图部分主要涉及的是前端页面的显示,作为一名Java后端的小白,第一次写了这么多HTML和JavaScr ...
- C#的百度地图开发(二)转换JSON数据为相应的类
原文:C#的百度地图开发(二)转换JSON数据为相应的类 在<C#的百度地图开发(一)发起HTTP请求>一文中我们向百度提供的API的URL发起请求,并得到了返回的结果,结果是一串JSON ...
- DataTable 删除数据后重新加载
DataTable 删除数据后重新加载 一.总结 一句话总结: 判断datatable是否被datatable初始化或者是否执行了datatable销毁函数,如果没有,就销毁它 if ($('#dat ...
- 【EF学习笔记08】----------加载关联表的数据 显式加载
显式加载 讲解之前,先来看一下我们的数据库结构:班级表 学生表 加载从表集合类型 //显示加载 Console.WriteLine("=========查询集合===========&quo ...
- vue 中监测滚动条加载数据（懒加载数据）
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- OGG初始化之将数据从文件加载到Replicat
要使用Replicat建立目标数据,可以使用初始加载Extract从源表中提取源记录,并将它们以规范格式写入提取文件.从该文件中,初始加载Replicat使用数据库接口加载数据.在加载过程中,更改同步 ...
- hibernate框架学习之数据抓取(加载)策略
Hibernate获取数据方式 lHibernate提供了多种方式获取数据 •load方法获取数据 •get方法获取数据 •Query/ Criteria对象获取数据 lHibernate获取的数据分 ...
- 不想分页怎么办？？-->页面数据的滚动加载
在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...
- SQL Server大量数据秒级插入/新增/删除
原文:SQL Server大量数据秒级插入/新增/删除 1.快速保存,该方法有四个参数,第一个参数为数据库连接,第二个参数为需要保存的DataTable,该参数的TableName属性需要设置为数据库 ...
随机推荐
- IDEA插件记录
IDEA个性化设置 1. 开发工具 Free MyBatis plugin 作用:可以快速的在mybatis 的mapper 文件和xml文件中快速切换 Lombok 作用:为POJO类添加@Data ...
- redis搭建实录
#!/bin/bash####redis版本为4.2.0,需要php5.6以上才支持,可先将安装包上传到/tools目录. yum -y install wgetyum -y install unzi ...
- vue脚手架3.0的安装与使用
一.安装 1.先检查是否有安装vue (vue-cli3需要node大于等于8.9版本) //vue -V 2.如果没安装跳过.安装有3.0以下的版本就的先卸载掉以前的版本 npm uninstal ...
- MySQL浮点数和定点数
MySQL 分为两种方式:浮点数和定点数.浮点数包括 float(单精度)和 double(双精度),而定点数则只有 decimal 一种表示.定点数在 MySQL 内部以字符串形式存放,比浮点数更精 ...
- [ubuntu][mysql 5.7]安装后没有密码？如何登录
环境:(2020-04-21) WSL ubuntu LTS 18.04.1 mysql Ver 14.14 Distrib 5.7.29, for Linux (x86_64) 找到随机密码 # 显 ...
- 二刷Redux笔记
关于react的一些思考 所有的数据全部先要发送给容器,然后容器负责接受数据单后再分发数据给他下面的组件,通过props来传递,一个页面就可以相当于一个容器,容器之中就会有很多子组件,一般组件只负责接 ...
- leetcode350之实现求解两数组交集（包含重复元素）
给定两个数组,编写一个函数来计算它们的交集. 说明: 输出结果中每个元素出现的次数,应与元素在两个数组中出现的次数一致. 我们可以不考虑输出结果的顺序 def binarySearch(nums, t ...
- [Objective-C] 005_Category（类别）
Category的实际作用就是为已有的类来添加方法.为现有的类添加的方法可以先不用实现,在需要的时候再实现也是可以的.在我们的实际代码中如何来实现Category的呢?我们上篇的Person 类为例. ...
- BZOJ1001 狼抓兔子 题解
裸的最小割,转化成最大流即可. #include <bits/stdc++.h> int n,m; int S,T; int mincost; int head[6001000],tot= ...
- JavaScript几种继承方式的总结
1.原型链继承 直接将子类型的原型指向父类型的实例,即"子类型.prototype = new 父类型();",实现方法如下: //父类构造函数 function father(n ...