高德地图1.4.15楼层处理

news2024/11/17 5:50:12

前因:

接入了高德1.4.15JS API的项目中使用了mapStyle: ‘amap://styles/grey’,在这个模式下楼层几近透明,方案一是升级到2.0然后加wallColor (表示建筑物墙面的颜色)和roofColor (表示建筑物屋顶的颜色),但是升级到2.0之后问题很多。方案二是通过AMap.Buildings来设置楼层颜色

官方文档

高德图层
高德Demo

官方工具

1、鼠标工具绘制多边形示例
2、geohub 创建自定义地图 自定义地图调用

我的demo

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D地图</title>
<style>
body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
.container{
  height: 100%
}
</style>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的ak&plugin=AMap.ControlBar,AMap.ToolBar, AMap.Buildings"></script>
</head>
<body >
<div id="container" style="width:100%; height:100%;resize:both;"></div>
<script language="javascript">
var map;
function mapInit(){
  var buildingLayer = new AMap.Buildings({zIndex:130,heightFactor: 5,merge:false,sort:false,zooms:[17,20]});
     var options = 
     {
          hideWithoutStyle:true,//是否隐藏设定区域外的楼块
          areas:[{ //围栏1
                visible:true,//是否可见
                rejectTexture:true,//是否屏蔽自定义地图的纹理
                color1: 'ffffff00',//楼顶颜色
                color2: 'ffffcc00',//楼面颜色
                // path: [[112.93,23.76],[114.95,23.75],[112.93,21.74],[114.96,21.74]]
                path:[[113.917124,22.730673],[113.923304,22.731069],[113.92708,22.724894],[113.919441,22.723944]]
        },{ //围栏1
                visible:true,//是否可见
                rejectTexture:true,//是否屏蔽自定义地图的纹理
                color1: 'ff99ff00',//楼顶颜色
                color2: 'ff99ff00',//楼面颜色
                // path: [[112.93,23.76],[114.95,23.75],[112.93,21.74],[114.96,21.74]]
                path:[[113.919256,22.723792], [113.926999,22.724525], [113.928236,22.718062], [113.919403,22.716432]]
        }]
    };
    buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle
  map = new AMap.Map('container', {
    rotateEnable:true,
    pitchEnable:true,
    zoom: 17,
    pitch: 50,
    rotation: -15,
    viewMode:'3D', //开启3D视图,默认为关闭
    zooms:[2,20],
    // center:[113.332226,22.997245],
    center:[113.917124,22.730673],
    mapStyle: 'amap://styles/grey',
    // roofColor: '#2c2c2c',
    // wallColor: '#161616',
    layers: [
            // 高德默认标准图层
            new AMap.TileLayer(),
            buildingLayer
        ],
        features:['bg','point','road'],
  });
  new AMap.Polygon({
        bubble:true,
        fillOpacity:0.4,
        strokeWeight:1,
        path:options.areas[0].path,
        map:map
    })
    new AMap.Polygon({
        bubble:true,
        fillColor:'green',
        fillOpacity:0.4,
        strokeWeight:1,
        path:options.areas[1].path,
        map:map
    })
  // 添加建筑物
  // const building = new AMap.Buildings({
  //     zooms: [0,20],
  //     merge: true,
  //     alpha: 1
  //   })
  //   var options = 
  //    {
  //         hideWithoutStyle:false,//是否隐藏设定区域外的楼块
  //         areas:[{ //围栏1
  //               //visible:false,//是否可见
  //               rejectTexture:true,//是否屏蔽自定义地图的纹理
  //               color1: 'ffffff00',//楼顶颜色
  //               color2: 'ffffcc00',//楼面颜色
  //               path: [[113.473606,22.995997],[113.473005,22.995482],[113.472442,22.994971],[113.472267,22.994801],[113.471307,22.995442],[113.471242,22.995446],[113.471133,22.995403],[113.4703,22.994622],[113.469916,22.994315],[113.469194,22.993719],[113.469032,22.993863],[113.468815,22.994108],[113.468625,22.994355],[113.468471,22.99466],[113.468421,22.994811],[113.468366,22.995156],[113.468306,22.996157],[113.468308,22.996557],[113.468483,22.996884],[113.468834,22.997188],[113.469481,22.997764],[113.470511,22.998708],[113.471404,22.999517],[113.471553,22.999568],[113.471713,22.999563],[113.471929,22.999463],[113.473228,22.998584],[113.474008,22.998046],[113.474541,22.997674],[113.474541,22.997576],[113.474604,22.997049],[113.474586,22.996895],[113.474179,22.996516],[113.473585,22.995997],[113.473606,22.995997]]
  //       }, { //围栏2
  //               color1: 'ff99ff00',
  //               color2: 'ff999900',
  //               path: [[113.474609,22.993478],[113.474489,22.993495],[113.473693,22.994009],[113.472898,22.994546],[113.472837,22.9946],[113.4728,22.994653],[113.472779,22.994745],[113.47282,22.994815],[113.47491,22.99655],[113.475041,22.996607],[113.47525,22.996643],[113.475715,22.996686],[113.475947,22.996688],[113.476103,22.996658],[113.477228,22.995932],[113.477261,22.995833],[113.477264,22.995729],[113.477205,22.995625],[113.47642,22.994899],[113.474854,22.993558],[113.47469,22.99348],[113.474609,22.993478]]
  //       }]
  //   };
  //   building.setStyle(options); //此配色优先级高于自定义mapStyle
    // building.setMap(map)
  // var controlBar = new AMap.ControlBar({
  //   position:{
  //     right:'10px',
  //     top:'10px'
  //   }
  // });
  // controlBar.setMap(map);
  
  // var toolBar = new AMap.ToolBar({
  //   position:{
  //     right:'40px',
  //     top:'110px'
  //   }
  // });
  // toolBar.setMap(map);
}
mapInit()
</script>
</body>
</html>

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/888920.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习与模型识别1:SVM(支持向量机)

一、简介 SVM是一种二类分类模型&#xff0c;在特征空间中寻找间隔最大的分离超平面&#xff0c;使得数据得到高效的二分类。 二、SVM损失函数 SVM 的三种损失函数衡量模型的性能。 1. 0-1 损失&#xff1a; 当正例样本落在 y0 下方则损失为 0&#xff0c;否则损失为…

uniapp小程序实现上传图片功能,并显示上传进度

效果图&#xff1a; 实现方法&#xff1a; 一、通过uni.chooseMedia(OBJECT)方法&#xff0c;拍摄或从手机相册中选择图片或视频。 官方文档链接: https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia uni.chooseMedia({count: 9,mediaType: [image,video],so…

如何最大利用WhatsApp高效拓客引流?

对话式商务盛行&#xff0c;WhatsApp是许多国家最受欢迎的聊天应用程序&#xff0c;包括巴西、德国、印尼、泰国、新加坡等。用户渗透率超过80%&#xff0c;作为一个无敌社交APP&#xff0c;自然也是跨境业务的首选。 以下是使用 WhatsApp 进行电子商务时需要记住的一些策略。…

做好需求管理的四个最佳实践

改进您的需求管理过程可以对你的开发过程产生重大影响&#xff0c;所带来的益处包括&#xff1a;提高效率、缩短上市时间&#xff0c;以及节省宝贵的预算和资源。需求是最能向工程师说明要构建什么&#xff0c;以及向测试人员说明要测试什么的信息。 需求具有三个主要功能&…

数据结构——栈(C语言)

需求&#xff1a;无 栈的概念&#xff1a; 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端为栈底。栈中的数据元素遵守后进先出&#xff08;LIFO&#xff09;原则。压栈&…

FPGA应用学习笔记-----布线布局优化

优化约束&#xff1a; 设置到最坏情况下会过多 布局和布线之间的关系&#xff1a; 最重要的是与处理器努力的&#xff0c;挂钩允许设计者调整处理器努力的程度 逻辑复制&#xff1a; 不能放置多个负载&#xff0c;只使用在关键路径钟 减少布线延时&#xff0c;但会增加面积&a…

大规模SFT微调指令数据的生成

前言 想要微调一个大模型&#xff0c;前提是得有一份高质量的SFT数据&#xff0c;可以这么说其多么高质量都不过分&#xff0c;关于其重要性已经有很多工作得以验证&#xff0c;感兴趣的小伙伴可以穿梭笔者之前的一篇文章&#xff1a; 《大模型时代下数据的重要性》&#xff…

【AI】百度AI助力开发,测试一下百度搜索的AI能力如何

百度搜索页面有个AI对话&#xff0c;点击进去看看&#xff1a; 是不是文心一言&#xff1f;它说不是。 测试一下辅助写代码功能&#xff1a; 1、写个爬虫&#xff1a; 代码&#xff1a; import requests from bs4 import BeautifulSoup# 目标网站的URL url "http:/…

Ubuntu虚拟机网络无法连接的几种解决方法

虚拟机网络无法连接的几种解决方法 问题状况描述可能的解决方案 问题状况描述 Ubuntu虚拟机没有网络&#xff0c;无法ping通互联网&#xff0c;左上角网络连接图标消失等情况可能的解决方案 1.重启虚拟机网络编辑器 2.重启虚拟机网络适配器 3.重启虚拟机网络服务器1.重启网络…

优思学院|五大工具:APQP、FMEA、MSA、SPC、PPAP

在现代制造业中&#xff0c;质量是企业成功的关键之一。为了确保产品和过程的质量&#xff0c;需要采用一系列有效的工具和方法。APQP、FMEA、MSA、SPC和PPAP被认定为质量管理体系的五大核心工具&#xff0c;这些工具不仅在汽车行业中得到广泛应用&#xff0c;还被其他制造领域…

生信豆芽菜-分组比较的表格

网址&#xff1a;http://www.sxdyc.com/visualsCliTableCompare 1、数据准备 两列的数据&#xff0c;最后比较这两组的样本分布 2、选择两个分组的颜色&#xff0c;有几个就选几个颜色&#xff0c;表头颜色&#xff0c;图片的宽度和高度&#xff0c;提交等待运行成功 3、结…

PHP入门基础教程 - 专栏导读

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…

148. 排序链表

题目描述 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5]示例 3&#…

【仿写tomcat】四、解析http请求信息,响应给前端,HttpServletRequest、HttpServletResponse的简单实现

思考 在解析请求之前我们要思考一个问题&#xff0c;我们解析的是其中的哪些内容&#xff1f; 对于最基本的实现&#xff0c;当然是请求类型&#xff0c;请求的url以及请求参数&#xff0c;我们可以根据请求的类型作出对应的处理&#xff0c;通过url在我们的mapstore中找到se…

计算机控制技术|17/8|11:32

目录 1. 学习计算控制系统需要的相关知识有哪些&#xff1f; 2. 计算机控制系统是什么&#xff1f; 3. 计算机控制系统的主要研究内容是什么&#xff1f; 4. 计算机控制系统的主要特点是什么&#xff1f; 5. 计算机控制系统的性能指标主要有哪些&#xff1f; 6. 计算机控…

学生宿舍管理系统(前端java+后端Vue)源码

完整资料下载链接 界面介绍 登录 宿舍管理 菜单管理 角色管理 ###班级管理

Nginx常见的三个漏洞

目录 $uri导致的CRLF注入漏洞 两种常见场景 表示uri的三个变量 案例 目录穿越漏洞 案例 Http Header被覆盖的问题 案例 $uri导致的CRLF注入漏洞 两种常见场景 用户访问http://example.com/aabbcc&#xff0c;自动跳转到https://example.com/aabbcc 用户访问http://exa…

Java中的枚举类型

一&#xff0c;什么是枚举 在Java中&#xff0c;枚举&#xff08;Enumeration&#xff09;是一种特殊的数据类型&#xff0c;它允许我们定义一个固定数量的常量集合。枚举类型在Java中是通过关键字enum来定义的。每个枚举常量都是枚举类型的实例&#xff0c;它们在枚举类型中以…

【RP2040】香瓜树莓派RP2040之自定义的短按、双击、长按按键

本文最后修改时间&#xff1a;2022年09月15日 11:02 一、本节简介 本节介绍如何编写一个可以自己选择引脚的短按、双击、长按三种方式的按键驱动。 二、实验平台 1、硬件平台 1&#xff09;树莓派pico开发板 ①树莓派pico开发板*2 ②micro usb数据线*2 2&#xff09;电脑…

【数据结构】 List与顺序表及接口的实现

文章目录 什么是List常见接口介绍线性表顺序表顺序表接口的实现add在末尾新增元素在 pos 位置新增元素判定是否包含某个元素查找某个元素对应的位置获取 pos 位置的元素给 pos 位置的元素设为 value删除第一次出现的关键字key获取顺序表的长度清空顺序表 顺序表的优缺点优点&am…