zoukankan      html  css  js  c++  java
  • 高德地图如何绘制3D边界效果的省市区域图 ?

    实现3D边界效果的省市区域图 ,我们可以按照高德地图提供的3D绘图方式来进行实现,大致分为如下几个步骤:

    1、绘制地图底图。

    2、设置光照

    3、设置平行光源

    4、添加Object3DLayer 专门承载 Object3D对象的图层

    5、搜索行政区域获取行政边界。

    6、正式绘制3D图形。

    具体可参考官方网站:  https://lbs.amap.com/demo/javascript-api/example/mesh/prism

    /*
     * @Description:
     * @Autor: George Zhang
     * @Date: 2021-10-11 11:46:55
     * @LastEditTime: 2021-10-27 16:46:05
     */
    // 绘制地图及省份
    let zoom = 7.7;
    var map = new AMap.Map("map", {
      zoom: zoom,
      center: [118.027115, 35.718297],
      pitch: 60,
      viewMode: "3D",
    });
    map.setFeatures(["bg", "road"]);
    
    // 2d视图,可以按照如下信息绘制省市的边界区域
    // var disProvince = new AMap.DistrictLayer.Province({
    //   zIndex: 12,
    //   adcode: ["370000"],
    //   depth: 1,
    //   styles: {
    //     fill: function (properties) {
    //       return "#AAAAAA";
    //       // return "#B3B3B3";
    //     },
    //     "city-stroke": "white", //中国地级市边界
    //     "province-stroke": "#646D7D", //中国区县边界
    //   },
    // });
    // disProvince.setMap(map);
    // 设置光照
    map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
    // 设置平行光源
    map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);
    
    // 添加Object3DLayer 专门承载 Object3D对象的图层
    var object3Dlayer = new AMap.Object3DLayer();
    map.add(object3Dlayer);
    
    // 搜索行政区域
    new AMap.DistrictSearch({
      subdistrict: 0, //返回下一级行政区
      extensions: "all", //返回行政区边界坐标组等具体信息
      level: "city", //查询行政级别为 市
    }).search("山东省", function (status, result) {
      var bounds = result.districtList[0].boundaries;
      var height = 50000; //3d侧边的高度
      var color = "#0088ffcc"; // rgba
      var prism = new AMap.Object3D.Prism({
        path: bounds,
        height: height,
        color: color,
      });
      // 开启透明度支持
      prism.transparent = true;
      object3Dlayer.add(prism);
    });
  • 相关阅读:
    withDefaultPasswordEncoder() 过时弃用问题
    @Value不能给静态变量直接赋值问题
    java编程思想之垃圾收集
    阅读java编程思想之一切都是对象
    阅读java编程思想的总结(一)
    Idea连接服务器docker并部署代码到docker实现一键启动
    后端设置Cookie前端跨域获取丢失问题(基于springboot实现)
    win10安装docker并结合Idea2018.1部署springboot项目
    Idea用maven给springboot打jar包
    css纯数字或字母换行
  • 原文地址:https://www.cnblogs.com/teamemory/p/15471582.html
Copyright © 2011-2022 走看看