新春快乐，牛年大吉！

最新推荐文章于 2021-06-09 19:38:53 发布

Nora Taki

最新推荐文章于 2021-06-09 19:38:53 发布

阅读量229

点赞数 1

分类专栏： CreateJs 前端开发文章标签： js canvas 百度

本文链接：https://blog.csdn.net/u011974819/article/details/113796604

版权

前端开发同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

CreateJs

6 篇文章 1 订阅

订阅专栏

地图来源百度地图开放平台 API文档
※ 代码中使用的百度开放平台的 ak 来自百度MapV的demo
想要了解和下载更多关于标准地图的内容，欢迎访问中国地图出版集团官网和中国地图出版集团官方微博

效果展示

mapover

代码分释

整体思路
利用百度地图的JavaScript API GL，设置底层地图层。封装Text.js，直接在地图层之上生成新的canvas，并使用createjs对其进行绘制和控制。

0 百度地图api层

let map = new BMapGL.Map('map_container', {
            restrictCenter: false,
            style: { styleJson: purpleStyle }
        })
let point = new BMapGL.Point(100.59465018721109, 32.45322588943924)

map.centerAndZoom(point, 6)
map.setTilt(45)
map.setHeading(-15)

设置了地图中心经纬度、地图比例、视角和样式等数据

1 构建 createjs 的 canvas层

// Text.js
(function () {

    let text, stage, angle

    let canvas = document.createElement('canvas')
    canvas.id = 'examCanvas'
    canvas.style.position = 'absolute'
    canvas.style.zIndex = 10

    canvas.style.pointerEvents = 'none'

    function init() {
        angle = 0
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight

        window.onresize = function () {
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight

            text.set({ x: canvas.width / 2, y: canvas.height / 2 - text.getMeasuredLineHeight() })

            stage.update()
        }

        document.querySelector('#map_container')
            .insertBefore(canvas, document.querySelector('canvas'))

        stage = new createjs.Stage(canvas);

        text = new createjs.Text('新春快乐，🐂年大吉！', '48px 微软雅黑', '#d83516')
        text.x = canvas.width / 2
        text.y = canvas.height / 2 - text.getMeasuredLineHeight()
        text.textAlign = 'center'
        text.shadow = new createjs.Shadow('#8e562e', 5, 5, 5)

        stage.addChild(text)

        stage.update()

        createjs.Ticker.timingMode = createjs.Ticker.RAF
        createjs.Ticker.addEventListener('tick', tick)
    }

    function tick(event) {
        angle += 0.01
        let value = Math.sin(angle) * 360

        text.rotation = value
        text.scale = value / 360
        stage.update(event)
    }


    window.text = init
})()

设置了 text 元素，并设定有随着时间的缩放旋转动画效果。同时通过 window.onresize 方法，设定当窗体发生变化时，同时调整 canvas 的宽度，以及text 元素所在位置

全部代码

Github - OverMap

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OverMap</title>
    <link rel="stylesheet" href="../_assets/css/shared.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        canvas {
            background-color: transparent;
        }
    </style>

    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script src="../lib/easeljs-NEXT.js"></script>
    <script src="Text.js"></script>
</head>

<body>
    <header class="Nora7aki" style="position: absolute; z-index: 100;">
        <h1>封装Createjs的canvas</h1>

        <p>
            利用百度地图的<code>JavaScript API GL</code>，设置底层地图层。封装<code>Text.js</code>，直接在地图层之上生成新的<code>canvas</code>，并使用<code>createjs</code>对其进行绘制和控制。
        </p>
    </header>

    <div id="map_container"></div>

    <script>
        let purpleStyle = [{...}]
        let map = new BMapGL.Map('map_container', {
            restrictCenter: false,
            style: { styleJson: purpleStyle }
        })
        let point = new BMapGL.Point(100.59465018721109, 32.45322588943924)

        map.centerAndZoom(point, 6)
        map.setTilt(45)
        map.setHeading(-15)

        text()
    </script>
</body>

</html>