ylmaps v1.0.1

YlMap Info

引入方式

<!-- Vue 片段 -->
<template>
    <div class="ylmap" :ref="dom => this.dom = dom"></div>
</template>
<!-- style 样式 -->
<style scoped >
.ylmap {
    height: 100%;
    width: 100%;
}
</style>
<script lang="ts">
    import YlMap from "@/components/olMap/index";
    import { Component, Prop, Vue } from "vue-property-decorator";
    @Component({})
    export default class YlMapTest extends Vue {
        ylMap = null;
        dom = null
        constructor() {
            super();
        }
        private mounted(): void {
            this.ylMap = new YlMap(this.dom).getMap();
        }
    }
</script>

其它操作方法

首先需要引入操作方法

import { AddIcon, addLayer, Measure,……} from "@/components/olMap/lib/src/index";

addLayer 添加图层

addLayer(MapObject,StyleObject)

return LayerObejct

const layer = addLayer(this.ylMap, null);

• @param {当前地图} MapObject

  type: MapObject

• @param {需要展示的图标图层} StyleObject

  type: Object

  {
      // Type: String
      name:`图标图层名称`, // default:`p_ol_Layer_Name`
      // Type: Boolean
      zindex:`优先级`, // default:4
      // Type: String
      id:`图标图层ID`, // default:`p_ol_Layer_Id`
      // Type: Object
      fill:`ol Fill`, // default:{color: 'rgba(0, 0, 0, 0)'}
      // Type: Object
      stroke:`ol stroke`, // default:{color: 'rgba(0, 0, 0, 0)'}
      // Type: Object
      params:`条件` // default:{}
  }

addLayer 添加图层

AddIcon(layer,postion,src,styleConfig,textStyle)

AddIcon(layer, [104, 30], require("@img/icons.png"), {}, {});

• @param {需要添加图标的图层} layer

  type: LayerObject

• @param {图标位置} postion number,number

  type: Object

• @param {图标} src

  type: String or Base64

• @param {图标样式} styleConfig

  type: String or Base64

  {
      // Type: String
      name:`图标图层名称`, // default:`p_ol_Icon_Name`
      // Type: Boolean
      zindex:`优先级`, // default:10
      // Type: String
      id:`图标图层ID`, // default:`p_ol_Icon_Id`
      // Type: Object
      fill:`ol Fill`, // default:{color: 'rgba(0, 0, 0, 0)'}
      // Type: Object
      stroke:`ol stroke`, // default:{color: 'rgba(0, 0, 0, 0)'}
      // Type: Array [number,number]
      offset:`偏移值`, // default:[0, 0]
      // Type: Array [number,number]
      anchor:`anchor`, // default:[0, 0]
      // Type: number
      scaleSize:`规模大小`, // 1
      // Type: number & null
      width:`宽度`, // default:null
      // Type: number & null
      height:`高度`, // default:null
      // Type: number
      iconRotation:`图标旋转值`, // default:0
      // Type: Object
      params:`条件` // default:{}
  }