Question

openlayers 9D

iServer 9D 

在VUE中地图页面作为一个组件写在了一个模态框里，然后需要的时候打开这个模态框，现在是模态框打开的时候不加载地图，关闭的时候才会加载地图，样式有没有问题不知道，但是抓包的时候发现打开模态框的时候根本就没有请求iServer加载地图资源，关闭模态框的时候才请求了iServer

<template>
  <Modal :title="title" @on-ok="helpConfirm" @on-cancel="helpCancel" @on-visible-change="helpChange"
          :styles="{top: '20px',width:'90%',height:'90%'}">
    <div style="margin:0 auto;width: 100%;height:  100%">
    <div id="map" style="margin:0 auto;width: 90%;height: 90%;float: left;"></div>
    <div id="mouse-position" style="margin: 10px auto;width: 90%;height: 10%;display: none;"></div>
  </div>
  </Modal>
</template>

Answer 1

可能 是 跟  你组件生命周期有关系 没看到 js 代码不好判断呢

Comments

<template>
  <Modal :title="title"v-model="formModal"  @on-ok="helpConfirm" @on-cancel="helpCancel" @on-visible-change="helpChange"
          :styles="{top: '20px',width:'90%',height:'90%'}">
    <div style="margin:0 auto;width: 100%;height:  100%">
    <div id="map" style="margin:0 auto;width: 90%;height: 90%;float: left;"></div>
    <div id="mouse-position" style="margin: 10px auto;width: 90%;height: 10%;display: none;"></div>
  </div>
  </Modal>
</template>

<script>
  import op from 'openlayers';
  import {Logo, TileSuperMapRest} from '@supermap/iclient-openlayers';
  export default {
    props:['helpId','nm','title'],
    components: {
      op,
      TileSuperMapRest,
    },
    data () {
      return {
        formModal: false,
        map:'',
        jwd:''
      }
    },
    methods: {
      //当模态框打开或关闭的时候执行
      helpChange() {
        //判断为true即模态框为打开操作的时候执行
        //if (this.formModal) {
          var mousePositionControl = new op.control.MousePosition({
            coordinateFormat: op.coordinate.createStringXY(4),
            projection: 'EPSG:4326',
            className: 'custom-mouse-position',
            target: 'mouse-position',
            undefinedHTML: '&nbsp;'
          });
          var map = new op.Map({
            controls: op.control.defaults({
              attributionOptions: {
                collapsible: false
              }
            }).extend([mousePositionControl]),
            target: 'map',
            layers: [new op.layer.Tile({
              source: new op.source.TileSuperMapRest({
                url: "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China"
              }),
            })],
            view: new op.View({
              center: op.proj.fromLonLat([116, 38]),
              zoom: 3.7,
              minZoom: 3.7
            })
          });
          map.on('click', function () {
            this.jwd = document.getElementById('mouse-position').getElementsByTagName('div')[0].innerHTML;
            //this.$Message.success('已选择经纬度:'+document.getElementById('mouse-position').getElementsByTagName('div')[0].innerHTML);
            alert('已选择经纬度:' + document.getElementById('mouse-position').getElementsByTagName('div')[0].innerHTML)

          });
          console.log(this.map);
        //}
      },
      helpConfirm() {
        this.$emit('helpCallBack', this.jwd); //主动触发方法，向父组件传递的数据
      },
      helpCancel() {
        document.getElementById('mouse-position').getElementsByTagName('div')[0].innerHTML = '';
        this.$emit('helpCallBack', {}); //主动触发，向父组件传递的数据
      },
    },
    created () {   /* 这个是vue的钩子函数，当new Vue()实例创建完毕后执行的函数 */
      /*this.$nextTick(()=>{
        this.getMap();
      })*/
    },
  }

</script>

<style scoped>

</style>

这是整个组件的代码，受累您给看看

---

感觉你   map的 div 是通过slot  插入到modal组件的 那map的 初始化应该在modal的 组件里面写 才行 呀

---

您是说放在这里面吗？created () {   /* 这个是vue的钩子函数，当new Vue()实例创建完毕后执行的函数 */
      this.$nextTick(()=>{
        this.getMap();
      })
    },
这样也不行
把加载地图事件放在父控件，也不行，
我在一个静态页面测试的时候，发现这个放map的div设置display:none的时候是不请求iserver的

---

creat（）是当前组件<Modal>  组件是个什么东西

---

就是iview框架的模态框组件

方便加一下QQ吗？

---

你应该 吧map  封装成一个组件 map的 初始化都在  map的 组件里面完成 然后 在modal 组件里面通过 slot 把map 组件插入进去