初衷

在利用高德地图API做项目的过程中遇到需只显示一个区域的地图，并且具有立体效果，经过百度，谷歌等等搜索加实践了一番之后，虽然能实现，但是有一个弊端，就是只能在2D模式下进行显示，3D模式下就不能产生掩膜的效果，遂去高德地图API官网寻觅了一波，故产生了这篇博客。

区域掩膜

高德地图 JS API中提供了区域掩膜的示例，通过mask属性为地图对象设定区域掩膜，只显示区域内的图层和覆盖物，可实现在地图中只展示某个区域的地图的效果。官网示例效果如下图所示：

垂面Wall

在高德地图API中，有个立体Mesh中有一个垂面Wall的示例，利用AMap.Object3D.Wall可以用经纬度来创建一组垂直于地面的墙面，官网示例效果如下图所示：

区域掩膜与垂面Wall相结合，构建区域立体效果

通过融合上述的区域掩膜和垂面Wall两个示例，并调节地图样式，最终得到区域立体展示效果图如下：

上述效果的代码如下：

<!-- created by qiaozi 20201112 --><!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>区域掩模</title>
<style>
body,html,#container{ margin:0;width: 100%;height: 100%}
</style>
</head>
<body>
<div id="container"></div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.DistrictSearch"></script>
<script language="javascript">var opts = {subdistrict: 0,extensions: 'all',level: 'city'};//利用行政区查询获取边界构建mask路径//也可以直接通过经纬度构建mask路径var district = new AMap.DistrictSearch(opts);district.search('北京市', function(status, result) {var bounds = result.districtList[0].boundaries;var mask = []for(var i =0;i<bounds.length;i+=1){mask.push([bounds[i]])}var map = new AMap.Map('container', {mask:mask,center:[116.472804,39.995725],disableSocket:true,viewMode:'3D',showLabel:true,labelzIndex:130,pitch:40,zoom:9,mapStyle: 'amap://styles/grey',});var maskerIn = new AMap.Marker({position:[116.501415,39.926055],map:map})var maskerOut = new AMap.Marker({//区域外的不会显示position:[117.001415,39.926055],map:map})//添加高度面var object3Dlayer = new AMap.Object3DLayer({zIndex:1});map.add(object3Dlayer)var height = 30000;var color = '#0088ffcc';//rgbavar wall = new AMap.Object3D.Wall({path:bounds,height:height,color:color});wall.transparent = truewall.backOrFront = 'both';object3Dlayer.add(wall)//添加描边for(var i =0;i<bounds.length;i+=1){new AMap.Polyline({path:bounds[i],strokeColor:'#99ffff',strokeWeight:4,map:map})}});</script>
</body>
</html>

最后

自己写博客比较随意，就是记录自己平时遇到的问题，希望可以帮到有需要的小伙伴。

高德地图API实现区域立体效果相关推荐

android 地图选房效果,概述-Android 室内地图SDK | 高德地图API
Android 室内地图 SDK 简介说明: 室内地图数据对新用户暂停开放,建议您使用 Android地图SDK 可实现室内外一体化效果. 高德地图 Android 室内地图SDK 是一套室内地图开 ...
高德地图API武汉某区域的步行路径规划
高德地图API的武汉某区域的步行路径规划利用python的requests函数,基于高德地图网页服务API 使用地理编码化.步行路径规划等开发方法以武汉武昌.青山交界处以区域为例做已有出行点至 ...
高德地图API入门-marker标注以及区域色块着色
1.vue高德地图api安装 npm i @amap/amap-jsapi-loader --save 2.地图初始化,加载卫星titlemap initMap(){// window._AMapSe ...
java高德地图Api根据城市名称查该城市所有区域
y今天下来一个新需求,根据城市名称查该城市的所有区,在网上看到关于高德地图api讲解的很少,本人在写代码的时候也遇到了很多的问题,借此机会记录一下. 一.注册成为高德地图开发者 (高德地图开发者网址: ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
Android 高德地图API（详细步骤+源码）
高德地图API使用详解前言正文一.创建应用 ① 获取PackageName ② 获取调试版安全码SHA1 ③ 获取发布版安全码SHA1 二.配置Android Studio工程 ① 导入SDK ...
项目 - Web地图开发【高德地图API】(二)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...

高德地图API实现区域立体效果

高德地图API实现区域立体效果

初衷

区域掩膜

垂面Wall

区域掩膜与垂面Wall相结合，构建区域立体效果

最后

高德地图API实现区域立体效果相关推荐

最新文章

热门文章