- <template>
- <el-row class="el-col el-col-24 queryPar-form-wrapper">
- <el-form
- class="el__form-queryPar"
- ref="ruleForm"
- label-position="top"
- :model="ruleForm"
- >
- <el-form-item prop="mapZoom">
- <el-input
- type="text"
- placeholder="请输入地图缩放级别,区间为4~19"
- v-model.trim="ruleForm.mapZoom"
- ></el-input>
- </el-form-item>
- </el-form>
- <el-row class="el-col el-col-24 queryPar-button-wrapper">
- <el-button
- class="el-button-fun"
- @click.stop="setZoom('setZoom', ruleForm.mapZoom)"
- >设置级别</el-button
- >
- <el-button class="el-button-fun" @click.stop="setZoom('amplification')"
- >放大一级</el-button
- >
- </el-row>
- <el-row class="el-col el-col-24 queryPar-button-wrapper">
- <el-button class="el-button-fun" @click.stop="setZoom('narrow')"
- >缩小一级</el-button
- >
- <el-button class="el-button-fun" @click.stop="getZoom('current')"
- >获取当前ZOOM</el-button
- >
- </el-row>
-
- <el-row class="el-col el-col-24 font-size16" v-if="currentZoom">
- <label class="color-b2aead">当前地图缩放级别为:</label>
- <label class="color-568dfd">{{ currentZoom ? currentZoom : "" }}</label>
- </el-row>
- </el-row>
- </template>
- <script>
- export default {
- name: "mapZoom",
- props: {
- mapInstance: {
- type: Object,
- required: true,
- default: () => {
- return {};
- }
- }
- },
- data() {
- return {
- ruleForm: {
- mapZoom: null
- },
- currentZoom: null
- };
- },
- methods: {
- // 设置地图缩放比例Zoom
- setZoom(type, zoom) {
- let newZoom = 0;
- switch (type) {
- case "amplification": {
- newZoom = this.getZoom() + 1;
- break;
- }
- case "narrow": {
- newZoom = this.getZoom() - 1;
- break;
- }
- case "setZoom": {
- if (zoom) {
- newZoom = Number(zoom);
- } else {
- return;
- }
- break;
- }
- }
- this.currentZoom = null;
- this.mapInstance.setZoom(newZoom); // 前面地图初始化时已获取map实例,故这里直接通过api设置。
- // setZoom方法接受正整数(4~19)或小数(4.0~19.0),虽然接受小数,实际上是取了整的,按整数设置。故最好输入正整数
- },
- // 获取地图当前缩放比例Zoom
- getZoom(type) {
- let tempZoom = this.mapInstance.getZoom(); // 前面地图初始化时已获取map实例,故这里直接通过api获取
- if (!type) {
- return tempZoom;
- } else {
- this.currentZoom = tempZoom;
- }
- }
- }
- };
- </script>