• 高德地图如何绘制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);
    });
  • 相关阅读:
    解决Extjs分页工具条Ext.PagingToolbar无法换页问题 子曰
    使用“动软代码生成器”需要注意的问题 子曰
    格式化extjs DateField 的值 子曰
    构造extjs两级联动comBox 子曰
    SQLServer数据库设计表和字段(转) 子曰
    extjs 中取值的方式 子曰
    extjs中的控件无法正常显示 子曰
    extjs表单中的下拉框(comobobox)手动添加空选项 子曰
    C++基础学习笔记
    dhl:弹出div层,可关闭可移动
  • 原文地址:https://www.cnblogs.com/teamemory/p/15471582.html
Copyright © 2020-2023  润新知