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

最新推荐文章于 2022-12-13 11:42:02 发布

鲸渔

最新推荐文章于 2022-12-13 11:42:02 发布

阅读量1k

点赞数 1

分类专栏：【地图开发】文章标签： 3d 几何学前端 javascript

本文链接：https://blog.csdn.net/qq_39078783/article/details/122107253

版权

【地图开发】专栏收录该内容

16 篇文章 11 订阅

订阅专栏

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

整理思路

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

prism 属性

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

GeoJson 结合 prism 绘制3d版块

<!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>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>
  <script
    language="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>
    <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>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>
  <script
    language="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 绘制城市版块

鲸渔

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
【高德地图进阶】--- 3d城市版块之prism

在【高德地图入门】—通过geoJson绘制点，线，面一章中，我们学会了如何绘制城市版块的平面。但为了凸显某个城市，一般情况下都会将该城市的版块抬高实现3d效果。现在我们就来学学如何抬高地图版块整理思路想把整个版块抬高，首先我们得知道整个版块边界线的坐标，在之前的课程我们使用过GeoJson和DistrictSearch 获取到城市版块信息。同样我们基于这两种进行版块的抬高开发。既然知道了边界坐标，那我们该如何将版块提高呢？这里我们既要引入高德地图的另一个api — AMap.Object3D.
复制链接

扫一扫