山东大学项目实训5

顾小桐

已于 2022-06-07 17:22:12 修改

阅读量96

点赞数

分类专栏：智慧环保：城市空气质量预测系统专栏文章标签：前端

于 2022-06-07 15:18:46 首次发布

本文链接：https://blog.csdn.net/weixin_51523159/article/details/125165793

版权

智慧环保：城市空气质量预测系统专栏专栏收录该内容

12 篇文章 0 订阅

订阅专栏

界面设计

1、导航栏设计

 <li><a onclick="change_center('济南市')"  style="display: inline-block;">济南</a></li> 
          <li><a onclick="change_center('青岛市')"  style="display: inline-block;">青岛</a></li>  
          <li><a onclick="change_center('淄博市')"  style="display: inline-block;">淄博</a></li>
          <li><a onclick="change_center('枣庄市')"  style="display: inline-block;">枣庄</a></li>
          <li><a onclick="change_center('东营市')"  style="display: inline-block;">东营</a></li> 
          <li><a onclick="change_center('烟台市')"  style="display: inline-block;">烟台</a></li>

点击导航栏调用如下方法通过改变中心点的坐标，切换为对应地点的地图

//改变中心点
function change_center(place) {
    alert(place);
    map.centerAndZoom(place, 13);
}

2、功能栏绘制

主要代码如下：

   <div class="tool">
        <span>透明度：</span>
        <span>
            <select id="selectOpacity">
                <option value="0.1">10%</option>
                <option value="0.2">20%</option>
                <option value="0.3">30%</option>
                <option value="0.4">40%</option>
                <option value="0.5">50%</option>
                <option value="0.6">60%</option>
                <option value="0.7" selected="selected">70%</option>
                <option value="0.8">80%</option>
                <option value="0.9">90%</option>
                <option value="1">100%</option>
            </select>
        </span>
        <span style="padding-left:10px;">画图模式：</span>
        <span>
            <select id="selectDrawMode">
                <option value="all" >全图模式</option>
                <option value="tiles">瓦片模式</option>
            </select>
        </span>
        <span style="padding-left:10px;">颜色模式：</span>
        <span>
            <select id="selectColorMode">
                <option value="gradient">渐变</option>
                <option value="range">区间</option>
            </select>
        </span>
    </div>
    <div style="position:relative;width:1200px;">
        <div id="mapContent" style="height:600px;width:1200px;">
        </div>
        <div class="gridmap-bar">
            <ul id="colorBar">
                <li>空气质量水平：</li>
            </ul>
        </div>
    </div>

最后效果如图所示：
在这里插入图片描述

3、地图绘制：

绘制初始地图并添加控件：

<script type="text/javascript">

    var map = new BMap.Map("mapContent", { enableMapClick: false });          // 创建地图实例
    map.setMinZoom(8);  //设置地图最小级别
    map.setMaxZoom(19);  //设置地图最大级别

    var point = new BMap.Point(116.98, 36.67);

    map.centerAndZoom(point, 13);

    map.enableScrollWheelZoom(); // 允许滚轮缩放
    map.setDefaultCursor("url('bird.cur')");
    map.enableDragging();
    map.disableDoubleClickZoom();

    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件

    map.addControl(top_left_control);
    map.addControl(top_left_navigation);

    </script>