baidu 地图 3d版自定义地图样式

最新推荐文章于 2024-03-28 19:01:20 发布

QQ2856639881

最新推荐文章于 2024-03-28 19:01:20 发布

阅读量1.8k

点赞数 1

分类专栏： map 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/QQ2856639881/article/details/121434482

版权

map 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

各个版本介绍
JavaScript API v2.0和v3.0：采用2D和卫星地图两种混用模式（标准版）
JavaScript API GL v1.0：使用WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图
JavaScript APL Lite：专门针对移动端H5页面的使用场景，代码体积小，性能更好

<!-- 3d 地图 使用 BMapGL.-->
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=。。。"></script>  
<!-- 2d 地图 使用 BMap.-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=。。。"></script>

配置地址： https://lbsyun.baidu.com/apiconsole/custommap

api: jspopularGL | 百度地图API SDK

demo: open | 百度地图API SDK

1、在我的地图，点击编辑

2、选用一个模板，然后再详细调整

选完模板也可改变配色

3、详细调整，把不想显示的关闭、或改变颜色等等

4、发布或下载json

代码中使用：

 map.setMapStyleV2({ styleJson: styleJson });

或 (注意：发布的styleID需要与ak为同一个用户)

    map.setMapStyleV2({
        styleId: '84c416095a02e0f36c50ad5815222215'
    });

效果：

5、全部代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=VNjdaxl22nxviwFCkddSTbA3DkxoCIO6"></script>
    <title>3D棱柱</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(118.40184, 35.08729);
    map.centerAndZoom(point, 10);
    map.setTilt(50);
    map.enableScrollWheelZoom();
    var bd = new BMapGL.Boundary();
    bd.get('临沂市', function (rs) {
        var count = rs.boundaries.length; //行政区域的点有多少个
        var pointArray = [];
        for (var i = 0; i < count; i++) {
            var path = [];
            str = rs.boundaries[i].replace(' ', '');
            points = str.split(';');
            for (var j = 0; j < points.length; j++) {
                var lng = points[j].split(',')[0];
                var lat = points[j].split(',')[1];
                path.push(new BMapGL.Point(lng, lat));
            }
            var prism = new BMapGL.Prism(path, 5000, {
                topFillColor: '#5679ea',
                topFillOpacity: 0.5,
                sideFillColor: '#5679ea',
                sideFillOpacity: 0.9
            });
            map.addOverlay(prism);
        }
    });

    map.setMapStyleV2({
        styleId: '84c416095a02e0f36c50ad5815222215'
    });
    // 1）获取市内各区县名称以及中心点坐标， 注意如果多个地方有重名，需要加上一级地址，如"临沂市河东区"
    var dataArr = [
        { "name": "兰山区", "cp": [118.33, 35.07] }
        , { "name": "罗庄区", "cp": [118.28, 34.98] }
        , { "name": "临沂市河东区", "cp": [118.411848, 35.081971] }
        , { "name": "沂南县", "cp": [118.47, 35.55] }
        , { "name": "郯城县", "cp": [118.35, 34.62] }
        , { "name": "沂水县", "cp": [118.62, 35.78] }
        , { "name": "兰陵县", "cp": [118.05, 34.85] }
        , { "name": "费县", "cp": [117.97, 35.27] }
        , { "name": "平邑县", "cp": [117.63, 35.5] }
        , { "name": "莒南县", "cp": [118.83, 35.18] }
        , { "name": "蒙阴县", "cp": [117.93, 35.72] }
        , { "name": "临沭县", "cp": [118.65, 34.92] }

    ];
    // 2）绘制各个区县轮廓
    function getRegion() {
        dataArr.forEach(element => {
            var bdary = new BMapGL.Boundary();
            bdary.get(element['name'], rs => {
                var count = rs.boundaries.length;
                for (let i = 0; i < count; i++) {
                    var ply = new BMapGL.Polygon(rs.boundaries[i], {
                        strokeWeight: 1.5, strokeColor: '#fff', fillOpacity: 0.8, fillColor: '#a9dbf7'
                    });
                    this.map.addOverlay(ply);
                }
            });

            setLab(element['name'], element['cp'])
        });
    }
    // 城市中心点坐标显示label 
    function setLab(name, xy) {
        var pt = new BMapGL.Point(xy[0], xy[1]);

        var opts = {
            position: pt, // 指定文本标注所在的地理位置
            offset: new BMapGL.Size(10, -30) // 设置文本偏移量
        };
        // 创建文本标注对象
        var label = new BMapGL.Label(name, opts);
        // 自定义文本标注样式
        // label.setStyle({
        //     color: 'blue',
        //     borderRadius: '5px',
        //     borderColor: '#ccc',
        //     padding: '2px',
        //     fontSize: '16px',
        //     height: '24px',
        //     lineHeight: '24px',
        //     fontFamily: '微软雅黑'
        // });
        label.setStyle({
            border: 'none',
            background: 'transparent',
            'font-size': '0.25rem',
            color: '#fff',
        });
        map.addOverlay(label);

        // 创建小车图标
        var myIcon = new BMapGL.Icon("https://lbsyun.baidu.com/jsdemo/img/car.png", new BMapGL.Size(52, 26));
        // var marker = new BMapGL.Marker(pt, { icon: myIcon  });
        var marker = new BMapGL.Marker(pt);
        // 将标注添加到地图
        map.addOverlay(marker);


        // 创建信息窗口  
        var opts = {
            width: 200,
            height: 100,
            // offset: { height: h, width: w },
            title: name + '信息'
        };
        // var infoWindow = new BMapGL.InfoWindow('地址：' + name, opts);

        // 创建图文信息窗口
        var sContent = `<h4 style='margin:0 0 5px 0;'>info</h4>
    <img style='float:right;margin:0 4px 22px' id='imgDemo' src='https://lbsyun.baidu.com/jsdemo/img/tianAnMen.jpg' width='139' height='104'/>
    <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
    ....
    </p></div>`;
        var infoWindow = new BMapGL.InfoWindow(sContent, opts);

        // 点标记添加点击事件
        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, pt); // 开启信息窗口
        });
    }

    getRegion();
</script>

QQ2856639881

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
baidu 地图 3d版自定义地图样式

如果您的产品通过地图SDK加载个性化地图，请在使用前仔细阅读地图SDK各版本对元素样式的支持情况，以保证您在编辑器中创建的样式与最终的应用效果完全一致。注意：图表中，版本支持中对应的版本号，是指该版本及以上版本支持左侧元素中打“✔️”样式的修改；如表格第二行至第四行，表示地图SDK版本V4.2.0及以上支持对陆地、水系、绿地、人造区域中打“✔️”样式进行修改；V5.2.0版本及之前，请使用旧版编辑器地图元素元素代码形状边框颜色形状填充颜色 ...
复制链接

扫一扫