【高德地图进阶】--- 3d城市版块之prism

在【高德地图入门】—通过geoJson绘制点，线，面一章中，我们学会了如何绘制城市版块的平面。但为了凸显某个城市，一般情况下都会将该城市的版块抬高实现3d效果。现在我们就来学学如何抬高地图版块

整理思路

想把整个版块抬高，首先我们得知道整个版块边界线的坐标，在之前的课程我们使用过GeoJson和DistrictSearch 获取到城市版块信息。同样我们基于这两种进行版块的抬高开发。
既然知道了边界坐标，那我们该如何将版块提高呢？
这里我们就要引入高德地图的另一个api — AMap.Object3D.Prism

prism 属性

path: path是一个AMap.LngLat的数组
height: 高度
color: 颜色

GeoJson 结合 prism 绘制3d版块

<!DOCTYPE html>
<html><head><metaname="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>map</title><style>body,html,#container {margin: 0;width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script>window._AMapSecurityConfig = {securityJsCode: "xxxx",};</script><scriptlanguage="javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"></script><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script><script language="javascript">const map = (window.map = new AMap.Map("container", {center: [118.035441, 36.323541],viewMode: "3D",zoom: 7,pitch: 50,showLabel: false,}));let object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer);var colors = ["#ffffcc", "#a1dab4", "#41b6c4", "#225ea8"];var idx = 0;//发送请求 获取GeoJson数据ajax("https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",function (err, geoJSON) {if (!err) {//将获取到的GeoJson数据进行解析var geojson = new AMap.GeoJSON({geoJSON: geoJSON,getPolygon: function (geojson, lnglats) {if (lnglats[0]) {//将坐标数据封装到LngLat对象中const bounds = lnglats[0].map((e) => new AMap.LngLat(e[0], e[1]));//将解析出来的面 进行绘制var prism = new AMap.Object3D.Prism({path: bounds,height: 10000,color: colors[idx++ % colors.length],});object3Dlayer.add(prism);}},});}});</script>
</html>

DistrictSearch 结合 prism 绘制3d版块

<!DOCTYPE html>
<html><head><metaname="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>map</title><style>body,html,#container {margin: 0;width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script>window._AMapSecurityConfig = {securityJsCode: "xxxx",};</script><scriptlanguage="javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=AMap.DistrictSearch"></script><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script><script language="javascript">const map = (window.map = new AMap.Map("container", {center: [118.035441, 36.323541],viewMode: "3D",zoom: 7,pitch: 50,showLabel: false,}));let object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer);const opts = {subdistrict: 1,extensions: "all",level: "province",};const district = new AMap.DistrictSearch(opts);district.search("山东省", function (status, result) {const bounds = result.districtList[0].boundaries;var prism = new AMap.Object3D.Prism({path: bounds,height: 100000,color: '#a1dab4',});object3Dlayer.add(prism);});</script>
</html>

到这里就完成了3d版块的绘制，具体的样式可以根据业务来改变，但是遗憾的是prism只能修改颜色，而无法设置纹理
DistrictSearch也可以如GeoJson那样，绘制市级的3d版块，具体方法请参照【高德地图进阶】— 使用DistrictSearch 绘制城市版块

【高德地图进阶】--- 3d城市版块之prism相关推荐

【高德地图进阶】--- 3d城市版块之wall
在之前的文章描述了如何通过prism绘制3d城市版块,这篇文章将采用另外的方式来实现3d版块的制作 AMap.Object3D.Wall wall 见名知意,这个api就是绘制墙的, 也可以看做是有高 ...
【高德地图进阶】--- 添加城市版块纹理
在之前的[高德地图进阶]- 自定义地图中,有了解过如果给地图添加纹理. 但是该功能是收费的,这就劝退了不少人. 通常的业务都是将城市版块抬高,这部分之前的文章也讲述过.都是在地图上添加覆盖物在高德的 ...
高德地图某一城市地铁路线高亮解决方案
高德地图某一城市地铁路线高亮解决方案项目刚好有一个需求,在地图上按需高亮全部或者某一条地铁线路.找了蛮久没找到什么好的解决方案(也可能是自己菜),那就只能自己投机取巧咯.不多说上代码. <!- ...
react高德地图定位--显示城市名字
react函数组件高德地图定位–显示城市名字一.注册账号并申请Key 1.首先,注册开发者账号,成为高德开放平台开发者 2. 登陆之后,在进入「应用管理」页面「创建新应用」 3. 为应用添加 Ke ...
Python爬虫高德地图全国各个城市POI并导出表格（PyCharm ）结尾含源码地址
声明:本文仅做技术交流,请勿用于商业用途! 可爬取高德地图上各个城市公司.餐饮.医院.商家等信息并导出Excel,效果如图 1.前期准备 1.1 下载安装python并配置环境这里推荐篇博客很详细: ...
【高德地图进阶】--- 使用DistrictSearch 绘制城市版块
在[高德地图入门]-通过geoJson绘制点,线,面一章中,我们学会了如何使用GeoJson绘制城市版块.今天我们使用高德自己的api来绘制城市版块 DistrictSearch DistrictS ...
高德地图实现3D建筑多楼层模型相关代码
前言: 因在哔哩哔哩发布过相关视频,收到小伙伴的留言.所以在此讲解,希望能帮到大家首先附上效果图: 开发文档: 绘制步骤-3D立体图形-教程-地图 JS API | 高德地图API (amap.co ...
高德地图使用——定位城市
前言:在使用Chrome进行开发时,发现该功能无法实现,即使高德地图官网也无法实现打开网页时定位当前城市,而是定位至北京.因为,高德实现定位城市是通过浏览器本身发起定位,但是Chrome在中国无法使用 ...
高德地图上绘制城市名字和带涟漪的点标记
接上一篇"vue中基于echarts和基于高德地图的两种地图下钻与上浮方式" import noEmerIcon from "./img/emerManagement/n ...

【高德地图进阶】--- 3d城市版块之prism

整理思路

prism 属性

GeoJson 结合 prism 绘制3d版块

DistrictSearch 结合 prism 绘制3d版块

【高德地图进阶】--- 3d城市版块之prism相关推荐

最新文章

热门文章