20191023——esmap继续开发

<template>
  <div>
    <div id="map-container"></div>
    <div class="viewmode-group">
      <button id="btn3D" class="btn btn-default" @click="click2D"></button>
    </div>
    <div class="parking fix" id="parking"><span id="carid"></span>车位情况：<span id="YorN"></span></div>
    <div class="codition fix">
      <ul>
        <li><span class="codition-first"></span>占用车位</li>
        <li><span class="codition-second"></span>空闲车位</li>
        <li><span class="codition-third"></span>固定车位</li>
      </ul>
    </div>
    <div class="i-test-tip fix" id="i-test-tip">
      <div class="test-tip">
        停车场车位总数：<span id="total"></span>个，当前剩余车位数 <span id="freedata"></span>。
      </div>
    </div>
  </div>

</template>

这是template里面的东西

一一进行对应。

首先修改2D3D按钮，使其可以进行转换

<div class="parking fix" id="parking"><span id="carid"></span>车位情况：<span id="YorN"></span></div>

可能跟后文你取到的数据项进行分析

 <div class="codition fix">
      <ul>
        <li><span class="codition-first"></span>占用车位</li>
        <li><span class="codition-second"></span>空闲车位</li>
        <li><span class="codition-third"></span>预定车位</li>
      </ul>
    </div>

这是一个表示图像

<div class="i-test-tip fix" id="i-test-tip">
      <div class="test-tip">
        停车场车位总数：<span id="total"></span>个，当前剩余车位数 <span id="freedata"></span>。
      </div>
    </div>

最后车位总数

类似于这样，这样template中的代码全部顺利的理清了

 var map;
        //定义全局map变量
        var esmapID = 10005;
        //定义选用的地图id
        var styleid = getQueryString("styleid") || defaultOpt.themeID;
        //选用的style的id
        var floorControl;
        // 楼层控制控件配置参数（几楼）
        var ctlOpt = new esmap.ESControlOptions({
            position: esmap.ESControlPositon.RIGHT_TOP,
            imgURL: "image/wedgets/"
        });
        // 放大、缩小控件配置
        var ctlOpt1 = new esmap.ESControlOptions({
            position: esmap.ESControlPositon.LEFT_TOP, // 位置 左上角
            // 位置x,y的偏移量
            offset: {
                x: 20,
                y: 60
            },
            imgURL: "image/wedgets/"
        });

html代码段

定义全局变量map 利用给出的地图项进行配置
定义全局变量 定义选用的地图id值
定义选择style的id值
定义楼层控制控件配置参数
定义放大缩小控件配置

这些东西定义之后，后面进行需求

map = new esmap.ESMap({
            container: $("#map-container")[0], // 渲染dom
            mapDataSrc: "../../data", //地图数据位置
            mapThemeSrc: "../../data/theme", //主题数据位置
            focusAlphaMode: true, // 对不可见图层启用透明设置 默认为true
            focusAnimateMode: true, // 开启聚焦层切换的动画显示
            focusAlpha: 0.4, // 对不聚焦图层启用透明设置，当focusAlphaMode = true时有效
            focusFloor: 1,
            // visibleFloors: "all",
            themeID: styleid //自定义样式主题ID
        });
        map.openMapById(esmapID); //打开地图
        map.showCompass = true; //显示指南针

map的配置项

配置之后才能打开地图map.openMapById
显示指南针

 var parkData = null,
            pos = 0;
        var color = ["#7eacca", "#ff0000", "#00ff00"];
        var statusname=["固定车位","有车","无车"];

  map.on("loadComplete", function () {
            floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
            var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);
            bingEvents();//2d3d转换事件
            marquee();//滚动字幕
            //先执行显示一次；
            setTimeout(function () {CallLoadData(0)},10);
            //开启定时器从后台获取数据
            setInterval(function () {
                CallLoadData((++pos % 2));
            }, 5000);
        });

只要最后搞定这些函数就可以了。
第一个是创建图层 我们不需要这个功能
第二个是创建放大缩小组件
2d3d转换事件，不需要增加
marquee是下面滚动的字幕，需要添加
然后是定时器进行每秒进行更新

这个项目引进的是jquery，我试着在新项目里面，引入jquery

https://blog.csdn.net/weixin_41432849/article/details/81988058

复习一下webpack.base.conf.js
另开一篇博客