wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>地图2.0组件</title>
  <link rel="stylesheet" href="../../dist/ol/ol.css" />
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="../../dist/components/index.js"></script>
  <script src="../../dist/index.js"></script>
  <link href="../../../cesium/Source/Widgets/widgets.css" rel="stylesheet">
  <script src="../../../cesium/Build/Cesium/Cesium.js"></script>

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      width: 100vw;
      height: 100vh;
    }

    .controls {
      position: fixed;
      bottom: 20px;
      left: 0;
      right: 0;
      padding: 10px 30px;
      background: rgba(0, 0, 0, .5);
    }
  </style>
</head>

<body>
  <div id="app">
    <mapol-map containerId="map" ref="map" @ready="readyMap" :map-type="mapType" width="100vw" height="100vh"
      :extraOptions="extraOptions">
      <div slot="layerSwitcher" v-if="show">
        <mapol-compass v-if="mapInstance" :map-instance="mapInstance" :show="show" @change="compass"></mapol-compass>
        <mapol-layer-switcher :show="show" ref="switcher" :map="map" bgColor="#ffffff" scale="0.8"
          :position="[null, 38, 40, null]" :modes="modes" :active-Mode.sync="activeMode"
          @change="switchMap"></mapol-layer-switcher>
        <mapol-zoom v-if="mapInstance" :custom-style="customStyle" :color-style="wordStyle" :show="show"
          icon-color="#fff" width="30" height="68px" @zoomUp="zoomUp" @zoomDown="zoomDown" :vertical="true"
          :position="[null, 5, 40, null]" :scale="0.8" :map-instance="mapInstance"></mapol-zoom>
        <mapol-scale-line v-if="mapInstance" :show="show" :position="[null, 5, 10, null]" height="26" ruler-height="3"
          width="110" scale="0.8" radius="4" :map-instance="mapInstance" :vertical="false"></mapol-scale-line>
      </div>
      <!-- 罗盘 -->
      <div slot="recovery" v-if="show">
        <!-- 地图罗盘组件 -->

      </div>
    </mapol-map>
    <div class="controls">
      <button @click="getInstance">获取地图实例</button>
      <button @click="destroyMap">卸载实例</button>
      <button @click="initializeMap">初始化地图</button>
      <button @click="createMap">创建地图</button>
      <button @click="addMode">添加mode</button>
    </div>
  </div>
</body>

<script type="module">
  new Vue({
    el: '#app',
    data() {
      return {
        extraOptions: {},
        activeMode: "satellite",
        layer: "ver",
        mapType: "satellite",
        targetId: "",
        modes: ["basic", "satellite", "3D"],
        customStyle: {
          width: "35px",
        },
        wordStyle: {
          "font-size": "14px",
        },
        mapInstance: {},
        show: false,
        map: {}
      }
    },
    methods: {
      zoomUp(e) {
        console.log(e);
      },
      zoomDown(e) {
        console.log(e);
      },
      readyMap(e, targetId) {
        this.map = e
        console.log("readyMap map::", e, 'fffffffffff');
        this.targetId = targetId;
        this.mapInstance = e?.map || e;
        this.$nextTick(() => {
          console.log('mapInstance==', this.mapInstance)
          this.show = true;
        })
      },
      switchMap(e) {
        this.mapType = e;
        console.log("MapOL::", CTMapOl);
      },
      initializeMap() {
        this.show = true
        this.$refs.map.initMap();
      },
      async createMap() {
        this.show = true
        this.mapInstance = {}
        let map = await this.$refs.map.createMap()
        this.targetId = map.targetId;
        this.mapInstance = map.map?.map || map.map;
        this.map = map.map
      },
      addMode() {
        this.$refs.switcher.addMode({
          image: "https://vuejs.org/images/logo.png",
          mode: "1D",
          name: "1D地形图",
        });
        this.modes.push("1D");
      },
      getInstance() {
        const mapInstance = this.$refs.map.$$getInstance();
        console.log("map instance::", mapInstance);
      },
      destroyMap() {
        this.show = false
        this.$refs.map.destroy();
      },
      compass(data) {
        console.log(data);
      },
    }
  })
</script>

</html>