用高德地图api实现一个点亮城市效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：用高德地图api实现一个点亮城市效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <title>地图炫酷点闪烁</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=c75741b6f2144f1c55dddbb864d76b4b"></script>
    <style type="text/css">
        body,
        html,
        #map {
            height: 100%;
            margin: 0px;
            font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
        }
    </style>
</head>

<body>
    <div id="map" tabindex="0"></div>
    <script type="text/javascript" >
        
        (function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.FlashMarker = factory());
}(this, (function () { 'use strict';



function CanvasLayer(options) {
    this.options = options || {};
    this.zIndex = this.options.zIndex || 0;
    this._map = options.map;
    this.show();
}

CanvasLayer.prototype.initialize = function () {
    var map = this._map;
    var canvas = this.canvas = document.createElement('canvas');
    canvas.id = 'myCanvas';
    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);
    this.layer = new AMap.CustomLayer(canvas, {
        canvas: canvas,
        bounds: map.getBounds(),
        zooms: [0, 22]
    });
    this.layer.setMap(map);
    var that = this;
    map.on('mapmove', function () {
        that.adjustSize();
    });
    map.on('zoomchange', function () {
        that.adjustSize();
    });
    // var bounds = map.getBounds();
    // this.layer.setBounds(bounds);
    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';
    ctx.scale(pixelRatio, pixelRatio);
};

CanvasLayer.prototype.show = function () {
    this.initialize();
    if (!this.canvas) {
        this.initialize();
    }
    this.canvas.style.display = 'block';
};

var global = typeof window === 'undefined' ? {} : window;

var requestAnimationFrame = global.requestAnimationFrame || global.mozRequestAnimationFrame || global.webkitRequestAnimationFrame || global.msRequestAnimationFrame || function (callback) {
    return global.setTimeout(callback, 1000 / 60);
};

function Marker(opts) {
    this.city = opts.name;
    this.location = new AMap.LngLat(opts.lng, opts.lat);
    this.color = opts.color;
    this.type = opts.type || 'circle';
    this.speed = opts.speed || 0.5;
    this.size = 0;
    this.max = opts.max || 20;
}

Marker.prototype.draw = function (context) {
    context.save();
    context.beginPath();
    switch (this.type) {
        case 'circle':
            this._drawCircle(context);
            break;
        case 'ellipse':
            this._drawEllipse(context);
            break;
        default:
            break;
    }
    context.closePath();
    context.restore();

    this.size += this.speed;
    if (this.size > this.max) {
        this.size = 0;
    }
};

Marker.prototype._drawCircle = function (context) {
    var pixel = this.pixel || map.lngLatToContainer(this.location);
    context.strokeStyle = this.color;
    context.moveTo(pixel.x + pixel.size, pixel.y);
    context.arc(pixel.x, pixel.y, this.size, 0, Math.PI * 2);
    context.stroke();
};

Marker.prototype._drawEllipse = function (context) {
    var pixel = this.pixel || map.lngLatToContainer(this.location);
    var x = pixel.x,
        y = pixel.y,
        w = t.........完整代码请登录后点击上方下载按钮下载查看