景区自定义手绘地图叠加

最新推荐文章于 2023-05-11 17:16:53 发布
VIP文章 最新推荐文章于 2023-05-11 17:16:53 发布
阅读量2.5k 收藏 5
点赞数
分类专栏： 地图定位 文章标签： javascript 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221334/article/details/106014397
版权

地图上嵌套手绘地图--实现效果：

这里用到了地图的图层

 

简单一个完整Demo代码

<!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>自定义栅格图层</title>
</head>
<script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        pa
最低0.47元/天 解锁文章
就像风1样
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
android自定义地图手绘地图景区导航
11-11
基于mAppwidget实现的手绘地图demo，可使用不同的图片作为地图，支持缩放，pinch缩放，双击缩放，pop弹窗，语音导游，用户定位等功能，展示demo。
高德地图 Web JS API示例学习笔记（7）——图层（三方标准图层、自由数据图层）
hequhecong10857的博客
12-24 1918
三方标准图层 卫星图+掩模 组合使用简易行政区图-世界、卫星图、以及掩模功能，实现了只显示每个区域的地形图的效果。 district = new AMap.DistrictSearch(opts); district.search('中国', function (status, result) { var bounds = result.districtList[0].boun...
powerbi导入地图_送你一个Power BI手绘风图表
weixin_35349247的博客
01-11 528
​周末分享一个很有个性的自定义图表。提到手绘，大家想到的可能是这样的。好像完全和数据图表扯不上关系啊。其实真的有人手绘图表，像这样简单的，再来看一个更高级的，这是历史上最早期的条形图，出自数据可视化祖师爷WilliamPlayfair之手，这种精细程度，很难想象纯手工画出来的。在前Excel时代，图表都是手绘的，我在知乎上看到有人对那个年代的描述：“我刚来华尔街上班那会儿，公司的大桌子上全是堆积如...
Web3D地图来了！腾讯位置服务JavaScript API GL正式版发布
开发者技术前线-DevolperFront
03-30 2135
点击“开发者技术前线”，选择“星标????”在看|星标|留言, 真爱腾讯位置服务在半年前推出JavaScriptAPIGLbeta版，这期间很多...
2022.03.30华为前端、后端算法第二题
Annie_0321的博客
03-30 738
题目描述 有一张m*n的地图，地图描述了起点和终点的位置，也描述了两点间分布的高山湖泊，高山湖泊挡住去路，需要绕道行走，请问从起点到终点的最短路径有几条，距离时多少？ 注意：走动路线只能上下左右，不能斜着走。 输入 假设是5*5的地图，那么四个角的坐标表示为(0, 0), (0, 4), (4, 4), (4, 0)； 起点是(0, 1)，终点是(3, 3) 高山湖泊的个数：1 高山湖泊的位置(2, 2) 输入表示： 5 5——图的大小是5 5 0 1——起点坐标 3 3——终点坐标 1——湖泊个数 2 3
利用MapTiler工具进行地图瓦片切图，适合用于在h5中显示手绘地图场景
清雨小竹
12-10 5603
1.利用工具下载卫星图层，我用的是“BIGEMAP地图下载器”，官网地址：http://www.bigemap.com/ 选择好要切图的区域，记录下经纬度范围并选择导出的等级。 完成导出后在目录文件夹找到一个tif文件，就是地图图片文件。 地图图片下载好后，可以让美工在地图图片上进行手绘。 2.利用MapTiler工具进行瓦片切图 官网：https://www...
记录vue amap实现地图加手绘图，描点
weixin_50867375的博客
05-11 299
【代码】记录vue amap实现地图加手绘图，描点。
tmap | 制作地图动画、放大局部区域
R语言学堂
10-03 943
专注系列化、高质量的R语言教程tmap是R语言中比较专业的地理绘图工具包。前面已经有一期推文介绍了它的基础功能，详见tmap | R语言中专门绘制地图的工具包。本篇再来介绍两个功能：制作地图动画和放大局部区域（二者没有必然联系，只是内容较少放在同一篇推文中）。1 制作地图动画本部分主要参考的是《Geocomputation with R》9.3节[1]的内容。示例数据是来自spData工具包中的u...
微信小程序--放入个性化手绘地图具体步骤（腾讯地图）
heavenz19的博客
07-12 8208
1.首先需要一个腾讯地图的账号（微信登录即可），然后选择个性化地图进入（https://lbs.qq.com/customMap/添加链接描述），随后选择开启个性化图层按钮进入图层设计。 2.一般来说会有专业的UI设计来完成地图的绘画，之后会给到前端一张图片，这个时候前端可以点击‘切片创建图层’的按钮进行创建图层。 3.开始进行图片和地图坐标合并，点击新建，进入设计页面。搜索需要绘图的具体位置，进行图片的上传，通过一定的拉伸等操作使图片的坐标和地图的坐标尽量重合。设置适当的层级即可点击生成瓦片的按钮。
制作手绘地图并准确覆盖到地图的超简单流程
追
07-21 4342
如果要制作比较准确匹配到地图特定区域的手绘地图，首先要取得这部分区域的地图作为绘图的底图。可以用bigemap地图下载器，下载这部分区域的地图保存为后缀为 tif 的文件，保存时，四个角的坐标保存在文件名后缀为 kml 文件中。画好后，如果需要透明图，那么保存为png文件（以下称为源图）。角标志1_经度1_纬度1_角标志2_经度2_纬度2.文件名后缀。第二步，以下载的tif文件为底图，大小可以缩放，画好手绘图。右下角：right bottom 的缩写：rb。左上角：left top 的缩写：lt。
自定义手绘地图控件MapView
04-09
一款支持平移，缩放，点击事件的自定义地图控件，根据地图坐标点进行比例缩放，实现真实定位场景
android自定义View-手绘地图
05-15
android自定义View实现手绘地图，包括自定义view与自定义ViewGroup两种实现方式
android 景区语音导航 自定义地图
02-11
基于mappwidget实现的手绘地图，可使用不同的图片作为地图，支持缩放，pinch缩放，双击缩放，pop弹窗，语音导游，用户定位等功能，展示demo。 qq群：200742788 欢迎大家进群交流。
高德地图定位获取当前地址城市街道等详细信息（全部代码）
热门推荐
boy火巨的博客
11-12 4万+
自动定位后弹窗信息，包含省市县镇区路门牌号（效果图如下） 代码↓↓↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3....
地图经纬度1度与实际1米换算公式
boy火巨的博客
08-07 1万+
地图经纬度1度与实际1米换算过程 地球半径：6371000M 地球周长：2 * 6371000M  * π = 40030173 纬度38°地球周长：40030173 * cos38 = 31544206M 任意地球经度周长：40030173M 经度（东西方向）1M实际度：360°/31544206M=1.141255544679108e-5=0.00001141 纬度（南北方向）1M实际度：3...
vue引入echarts中国地图
boy火巨的博客
07-11 1万+
需求：显示各省名字，滑过标记地显示接入数量，点击标记地显示系统数量已接入及能跳转对应页面信息的入口； 配置： 1.安装依赖 npm install echarts -S 2.全局引入main.js // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在需要地图的...
高德地图API - 根据经纬度获取周边建筑地标
boy火巨的博客
11-13 2138
根据当前的定位获取附近的地标 // 高德地图查询周边 function aMapSearchNearBy(centerPoint, city) { AMap.service(["AMap.PlaceSearch"], function() { var placeSearch = new AMap.PlaceSearch({ pageSize: 1...
高德地图H5定位，搜索列表-完整代码
boy火巨的博客
11-09 1599
 换了两家公司都提上需求要做这个定位的地图，今天整理了下把整页的源代码贴出来供大家参考下！其中的不足还请大家见谅，指出改正！ &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content=&q
vue 高德地图叠加手绘图
最新发布
06-06
要在 Vue 中叠加手绘图到高德地图中，可以使用高德地图 JavaScript API 中的 Overlay 类来实现。具体步骤如下： 1. 在 Vue 项目中引入高德地图 JavaScript API 的 SDK 文件，可以通过 npm 安装或者使用 script 标签引入。 2. 在 Vue 组件的 mounted 钩子函数中，创建一个地图实例并初始化。 3. 创建一个自定义 Overlay 类，继承自 AMap.Overlay 类。在该类中实现 draw 方法来绘制手绘图。 4. 在地图的 add 方法中添加自定义 Overlay 实例，即可将手绘图叠加到地图中。 下面是一个简单的示例代码： ``` <template> <div id="map" style="height: 500px;"></div> </template> <script> import AMapLoader from '@amap/amap-jsapi-loader' export default { name: 'AmapDemo', data() { return { map: null, } }, mounted() { AMapLoader.load({ key: 'your amap api key', version: '2.0', plugins: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'], }).then((AMap) => { this.map = new AMap.Map('map', { zoom: 12, center: [116.397428, 39.90923], }) const MyOverlay = function () { this.draw = function () { const context = this.getContext('2d') context.beginPath() context.moveTo(100, 100) context.lineTo(200, 200) context.stroke() } } MyOverlay.prototype = new AMap.Overlay() MyOverlay.prototype.constructor = MyOverlay MyOverlay.prototype.onAdd = function () { const canvas = document.createElement('canvas') canvas.width = this.getMap().getSize().getWidth() canvas.height = this.getMap().getSize().getHeight() this.setCanvas(canvas) const panes = this.getPanes() panes.overlayLayer.appendChild(canvas) } MyOverlay.prototype.onRemove = function () { this.getCanvas().parentNode.removeChild(this.getCanvas()) } const myOverlay = new MyOverlay() this.map.add(myOverlay) }) }, } </script> ``` 在上面的示例中，我们首先引入了 AMapLoader 库来加载高德地图的 SDK 文件。在 mounted 钩子函数中，我们创建了一个地图实例，并使用自定义 Overlay 类 MyOverlay 来绘制手绘图。在 MyOverlay 类的 draw 方法中，我们使用 Canvas API 来绘制一条从 (100, 100) 到 (200, 200) 的直线。最后，在地图的 add 方法中添加 MyOverlay 实例，即可将手绘图叠加到地图中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值