通过地图图片生成可交互的地图

最新推荐文章于 2023-07-29 13:48:08 发布
最新推荐文章于 2023-07-29 13:48:08 发布
阅读量798 收藏 4
点赞数
文章标签： 前端 javascript ViewUI
原文链接：https://segmentfault.com/a/1190000012149991
版权

想起之前帮人做的一个地图功能，没有任何地理坐标数据，需要生成可互动的区县地图

之前echarts可以在线生成地图数据，但是现在因为某些原因，echarts已经不提供这项福利了

图片描述

以我仅有的一点经验，只能通过canvas读取图片数据生成坐标数据了

试了一下，没想到成功了，记录一下整个过程

1、首先百度，找一张需要生成区县地图的地图图片

图片描述

2、稍做处理

图片描述

非常简单的处理，用windows自带的画板工具就能完成，这里就不多说了

3、用canvas获取图片数据

getImageData获取到的图片数据是一个数组，数组的内容是从坐上角第一个像素开始，从左向右，从上到下，所有像素的rgba值，所以数组的总长度应该是图片长度乘以图片宽度乘以4

直接上代码吧

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body,
        canvas {
            padding: 0;
            margin: 0;
            display: block;
        }

        #mapimage {
            display: none;
        }
    </style>
</head>

<body>
    <canvas id="cvs"></canvas>
    <script>
        var mapimage, width, height
        var canvas = document.querySelector('#cvs')
        var ctx = canvas.getContext('2d')
        var data
        var imageData //getImageData获得的数据
        var beginPos
        var inpath = []

        var rgbr = 250
        var rgbg = 23
        var rgbb = 23


        var clearr = 255
        var clearg = 255
        var clearb = 255

        //点位顺序如下图
        //  0  1  2
        //  7  a  3
        //  6  5  4
        var checklist = [
            [-1, -1],
            [0, -1],
            [1, -1],
            [1, 0],
            [1, 1],
            [0, 1],
            [-1, 1],
            [-1, 0],
        ]

        //主程序，将在图片加载完成后被调用
        function main() {
            setCanvas()
            setimageData()
            var paths = getAllPaths()
            drawPath(paths)
            addEvent(paths)
        }
        // 加载图片
        // 加载完成后调用main
        function loadImage(cb) {
            mapimage = new Image()
            mapimage.src = './1.jpg'
            mapimage.onload = function () {
                width = this.width
                height = this.height
                main()
            }
        }

        function addEvent(paths) {
            canvas.addEventListener('mousemove', function (e) {
                var path = paths[0]
                var x = e.offsetX
                var y = e.offsetY

                ctx.beginPath()
                for (var i = 0, l = path.length; i < l; i++) {
                    ctx.lineTo(path[i][0], path[i][1])
                }

                if (ctx.isPointInPath(x, y)) {
                    console.log(1212)
                    for (var i = 1, l = paths.length; i < l; i++) {
                        path = paths[i]
                        ctx.beginPath()
                        for (var j = 0, lj = path.length; j < lj; j++) {
                            ctx.lineTo(path[j][0], path[j][1])
                        }
                        if (ctx.isPointInPath(x, y)) {
                            ctx.fillStyle = 'red'
                        } else {
                            ctx.fillStyle = 'blue'
                        }
                        ctx.fill()
                    }
                }
            })
        }
        // 设置canvas
        function setCanvas() {
            canvas.height = mapimage.height
            canvas.width = mapimage.width
            canvas.style.height = height + 'px'
            canvas.style.width = width + 'px'
        }

        function checkcolor(index, r, g, b) {
            return data[index * 4] === r &&
                data[index * 4 + 1] === g &&
                data[index * 4 + 2] === b
        }
        // 处理通过canvas获取的数据
        function setimageData() {
            ctx.drawImage(mapimage, 0, 0)
            imageData = ctx.getImageData(0, 0, width, height)
            ctx.clearRect(0, 0, width, height)
            data = imageData.data
            // 描边，将边线设置为纯黑 rgba(0, 0, 0, 255)
            // canvas获取的rgba数据 a通道值的范围是0~255
            for (var i = 0, l = data.length / 4; i < l; i++) {
                var gray = Math.floor((data[i * 4] + data[i * 4 + 1] + data[i * 4 + 2]) / 3)
                if (gray < 170) {
                    data[i * 4] = 0
                    data[i * 4 + 1] = 0
                    data[i * 4 + 2] = 0
                } else {
                    if (checkcolor(i, rgbr, rgbg, rgbb)) {
                        data[i * 4] = rgbr + 1
                        data[i * 4 + 1] = rgbg + 1
                        data[i * 4 + 2] = rgbb + 1
                    }
                }
                data[i * 4 + 3] = 255
            }
            // 将边线即纯黑色像素周围的所有点设置为制定颜色（rgbr, rgbg, rgbb）
            // 路径将通过检测制定颜色读取
            // 所以上一次遍历需要将制定颜色的点设为其他颜色
            for (var i = 0, l = data.length / 4; i < l; i++) {
                if (checkcolor(i, 0, 0, 0)) {
                    for (var j = 0, jl = checklist.length; j < jl; j++) {
                        var checkp = i + checklist[j][0] + checklist[j][1] * width
                        if (!checkcolor(checkp, 0, 0, 0)) {
                            data[checkp * 4] = rgbr
                            data[checkp * 4 + 1] = rgbg
                            data[checkp * 4 + 2] = rgbb
                        }
                    }
                }
            }
        }
        // 遍历所有像素
        // 获取路径的起始点
        function getBegin() {
            for (var i = 0, l = data.length / 4; i < l; i++) {
                if (data[i * 4] === rgbr && data[i * 4 + 1] === rgbg && data[i * 4 + 2] === rgbb) {
                    return i
                }
            }
        }
        // 绘制获取到的路径
        // 转换坐标
        function drawPath(paths) {
            for (var j = 0, lj = paths.length; j < lj; j++) {
                var path = paths[j]
                ctx.beginPath()
                for (var i = 0, l = path.length; i < l; i++) {
                    path[i] = [path[i][0] % width, Math.floor(path[i][0] / width)]
                    ctx.lineTo(path[i][0], path[i][1])
                }

                if (j !== 0) {
                    ctx.fillStyle = 'blue'
                    ctx.fill()
                }
            }
        }
        // 获取路径，直到所有路径获取完毕
        function getAllPaths() {
            var path
            var paths = []
            do {
                path = getOnePath()
                if (path) {
                    paths.push(path)
                }
            } while (path)
            return paths
        }
        // 获取下一个点
        // 按照checklist的顺序查看点周围的8个点，以‘上一个点’的‘下一个点’为起点，不检查上一个点
        // 没有指定颜色的点，则返回false
        function getClose(index) {
            //这里图片上没有靠近边缘的点，所以不做边界检查了
            if (index.length === 1) {
                //第一个点没有上一个点，需要检查所有相邻点
                //(i + 4) % 8  点相对遍历到的点的位置
                for (var i = 0, l = checklist.length; i < l; i++) {
                    var checkp = index[0] + checklist[i][0] + checklist[i][1] * width
                    if (checkcolor(checkp, rgbr, rgbg, rgbb)) {
                        return [checkp, (i + 4) % 8]
                    }
                }
            } else {
                //已经获取的路径设置成其他颜色
                //从上个点的位置开始，顺时针遍历所有点，不包括上个点
                for (var i = index[1] + 1; i < index[1] + 1 + 7; i++) {
                    var checkp = index[0] + checklist[i % 8][0] + checklist[i % 8][1] * width
                    if (checkcolor(checkp, rgbr, rgbg, rgbb)) {
                        return [checkp, (i + 4) % 8]
                    }
                }
            }
            return false
        }
        // 获取一条路径
        // 遍历所有元素，遍历到的第一个指定颜色的点作为路径的起始点
        // 按顺时针方向查看该点周围的点是否是制定颜色
        // 查看到的第一个制定颜色的点作为下一个点
        // 重复检查，直到返回false则clear这条路径 重新遍历
        // 或返回的下一个点与起始点相同，则这条路径是有效的
        // 将检查过的的路径上的点的颜色设置为clear color
        // 防止重复检查
        function getOnePath() {
            var fail = true
            var begin
            var last
            var path
            do {
                try {
                    begin = getBegin()
                    if (begin === undefined) {
                        return false
                    }
                    last = [begin]
                    path = [last]
                    do {
                        last = getClose(last)
                        if (!last) {
                            throw new Error(1212)
                        }
                        path.push(last)
                    } while (last && last[0] !== begin)
                    fail = false
                } catch (e) {
                    clearPath(path)
                }
            } while (fail)
            clearPath(path)
            return path
        }
        //清楚遍历到的路径
        function clearPath(path) {
            for (var i = 0, l = path.length; i < l; i++) {
                var index = path[i][0]
                data[index * 4] = clearr
                data[index * 4 + 1] = clearg
                data[index * 4 + 2] = clearb
            }
        }


        loadImage()
    </script>
</body>

</html>
b10l07
关注
交互式室内3D地图的设计与实现_金永来
11-09
交互式室内3D地图的设计与实现_金永来交互式室内3D地图的设计与实现_金永来交互式室内3D地图的设计与实现_金永来
如何在页面插入一个跟随页面移动的盒子_如何用PPT制作交互地图？
weixin_39931923的博客
12-05 394
在这个大数据时代，我们常常需要以更直观的大数据面板向观众展现纷繁的数据。而交互式地图是大数据面板中，很常见的一种表现数据形式——用户可以通过悬停鼠标查看地图上各个不同位置的相关详细数据，达到折叠复杂信息，针对性展示信息的效果。一般我们认为制作这种交互式地图是需要利用复杂编程制作软件实现的——实际不然，我们利用在PPT里，也可以轻松实现这种交互效果。今天的小妙招我们就来教你用PPT实现交互效果。1、...
Echarts省市交互例子
07-26
Echarts 省市交互小例子，便于大家参考
如何在WordPress中创建一个交互式图像地图
Bluehost_China的博客
09-01 374
我们将在下面提到免费和高级WP Draw Attention计划之间的区别，但我们必须告诉您免费插件的这一神奇功能......您在每个网站上只能得到一张互动图，但不可抗拒的因素是您可以在该图上添加任何数量的细节区域。那将是高亮区域的颜色，因为它出现在基础的图片上。电子商务商店的图片放大功能以一种优雅的方式处理这个问题，但安装WooCommerce商店并不是那些需要为他们的照片提供额外 "动力 "的企业的方案。然后，在媒体库中添加照片的链接(或一个外部的URL)，当有人点击您的图像地图时，将会弹出这个链接。.
前端图像处理指南
京庐空间
01-11 588
计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指**不借助任何后端服务**纯前端实现的图像处理。本文会介绍canvas位图处理，SVG矢量图和CSS3图像处理，重点是canvas，并且最后会附上一个小应用。 图像滤镜处理 现在的朋友圈发个图都要用滤镜美一下，复古清
百度地图生成基站图层工具V3.1.rar
12-16
【百度地图生成基站图层工具V3.1】是一款专为IT从业者和地理信息系统（GIS）爱好者设计的应用程序，主要用于在百度地图上自定义显示基站信息。通过此工具，用户可以方便地将基站数据导入，生成可视化基站图层，从而...
Fantasy-Map-Generator：Web应用程序，生成交互式和高度可定制的地图
02-05
Azgaar的Fantasy Map Generator是一个免费的客户端Web应用程序，它基于voronoi图生成交互式且高度可定制的svg地图。 该项目正在开发中，当前版本可在。 请参阅以获取指导。 我的旧博客涵盖了一些细节，以，您也...
echarts地图生成工具
04-06
在你提供的压缩包"echarts地图生成工具_1617638418"中，包含的可能是一个独立运行的地图生成工具。双击"index.html"文件，应该可以在浏览器中启动这个工具。这个工具可能具有以下功能： 1. **地图数据导入**：用户...
echarts图表各省市县地图生成工具(可生成js,json).zip
02-07
"echarts图表各省市县地图生成工具(可生成js,json).zip"这个压缩包文件，显然是为了帮助开发者更便捷地生成ECharts可用的省市县地图数据。 首先，我们要理解地图在ECharts中的工作原理。ECharts中的地图数据通常是...
根据数据生成地图并着色
m0_69649734的博客
07-29 272
我们有时会拿到一些数据与国家或者地区密切相关，故在地图上将其可视化会更为直观，同时也会提高数据分析的效率。
【python】绘制地图：使用Html2Image生成png图片
黎明总是如期而至
12-20 3531
我讲一下我这个需求的来源，做的项目是一个地理空间查询和使用的系统，通过在前端调用高德地图api创建了一个查询区域，获取区域内的地理数据(数据库)。具体的需求就是，将查询区域和地理数据制作成一个覆盖率分析报告，报告中的其他内容都已完成，但报告中需要展示高德地图、查询区域、地理数据的完整图片这个功能卡了2个星期，主要原因是我对地理空间数据不熟悉，很多python相关库也不清楚，在构建图形的过程中走了很多弯路。
2 入门Leaflet—开源、移动端友好的交互式地图 JS库
weixin_47255129的博客
07-03 445
需要的基础知识：html、css、js。参考leaflet中文文档。学习时基于原生html。该文档讲的已经很清楚了。
百度地图做成图片
一切都不太晚
09-26 2277
百度地图生成图片，很简单的
将地图导出为图片或PDF文件
GIS工具
03-12 6133
简介 地图是以QGIS工程作为基础，提供一种工具可以方便将QGIS配置好的地图工程导出为图片或PDF文件。效果如下： 下载QQ群：610712943,1156555959（自动加群，仅供软件下载，不聊天），群文件中获取软件。 特别提醒：程序下载无需安装即可运行，但请将程序放置到D,E,F盘根目录下运行（就是目录结构尽量简单，尽量避免放置到系统目录），避免由于目录结构过于复杂或WINDOWS系统保护而造成程序的不能运行！！！！ 咨询请联QQ:315022850,2705217296 使用方式.
canvas绘制视频 getImageData putImageData
丰的博客
09-02 1321
绘制视频 canvas.getContext("2d").drawImage(myvideo, x, y, w, h); 1.ctx.getImageData(sx, sy, sw, sh)：其中sx、sy分别是起点的横纵坐标，sw和sh分别为将要提取的数据对应的矩形图像的宽度和高度；其返回值是一个imageData对象，包含宽度、高度、data（Uint8ClampedArray类型的数组...
Global Mapper将图片转成带地理信息的tif文件（osgearth可用）
ljjjjjjjjjjj的博客
09-18 3611
如果自己要制作一张tif地图，在osgearth里通过gdal加载并显示，如果单纯把图片转成tif格式，gdal驱动是无法读取该文件的，因为该文件不包含地理信息，此时需要使用Global Mapper软件，在地图上加入地理坐标信息，然后导出tif文件才能使用。
百度地图API详解之自定义地图类型
weixin_30271335的博客
10-08 840
个人博客原文地址：http://www.jiazhengblog.com/blog/2011/10/08/422/ 今天的文章主要介绍如何利用地图API实现自定义地图。 百度地图API目前默认支持两种地图类型（map type）：普通图和三维图，它们分别通过常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP来表示，在1.2版本中这两个常量实际上是MapType对象...
前端图片地图在线生成器
前端小白菜
09-11 7046
这个网址可以很方便通过在图片上画图的方式获取相应的区域map：imagemap-generator
echarts 可交互地图
最新发布
03-25
它提供了丰富的图表类型和灵活的配置选项，可以帮助开发者快速创建各种各样的图表，包括可交互地图。 ECharts 的可交互地图功能可以用于展示地理数据，并支持用户与地图进行交互操作。通过 ECharts，你可以在地图上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值