intest-openlayers

install

npm install vue-openlayers-compoent

文档完善中..

• beta版，有问题请联系作者 微信:workingwechat_ph

• 在main.js中初始化

import intestMap  from 'vue-openlayers-compoent'
Vue.use(intestMap)
const defaultOptions = {
  vid:vid,
  layersOpts:[{
    name: "TileLayer_"+vid,
    //type:"TileLayer", 根据source.params.TILED的状态判断
    extent: transformExtent(
      [
        "116.51730104853488",
        "39.790733740927706",
        "116.52315047535953",
        "39.795646559880254"
      ],
      "EPSG:4326",
      "EPSG:3857"
    ),
    source:{
      url: "http://192.168.1.34:8024/geoserver/wms", //地图服务地址，需要赋值给OpenLayers中layer的source的url。
      params: {
        LAYERS: "BJEV_test01", //layers=tiger-ny：图层名，需要赋值给layer的source的params. LAYERS属性。
        TILED: true
      },
      serverType: "geoserver"
    }
  }],
  viewOpts:{
    center: fromLonLat([116.51912, 39.79253]), //中心点 使用fromLonLat 方法转换成google的摩卡托坐标
    zoom: 18, //视图默认显示的缩放等级
    minZoom: 17, //视图最小缩放等级,
    multiWorld: false,
    constrainResolution: true,
    constrainRotation: 4
    // extent:transformExtent(['116.51730104853488','39.790733740927706','116.52315047535953','39.795646559880254'], 'EPSG:4326', 'EPSG:3857'),
  },
  minzoom:17,
  zoom:17,
  center:fromLonLat([116.51912, 39.79253]),
}
intestMap.initMapOptions(defaultOptions)

• demo

<template>
  <imap>
    <!-- imap-marker点击之后显示infowindow并重新设置位置 -->
    <imap-marker @markerClick="handleClick" :position="markerposition" />
    <!-- imap-marker点击之后移除 -->
    <imap-marker @markerClick="handleRemove" :position="[116.51912, 39.79473]" />
    <!--  创建5000个marker测试 -->
    <!--  <imap-marker  v-for="(marker,index) in this.markers" :key="index" :position="marker.position" /> -->
    <!-- 直线 -->
    <imap-line
      :points="[[116.51912, 39.79273],[116.51912, 39.79473]]"
      :color="'#198A23'"
      @lineClick="handlelineclick"
    />
    <!-- 根据经纬度坐标数组生成折线 -->
    <imap-line :points="points" @lineClick="handlelineclick" :color="'#998A23'" />
    <!-- 绑定是否显示属性visible的infowindow -->
    <imap-infowindow :contentTxt="content" :position="infoposition" :visible="visible" />
    <!-- 创建infowindow -->
    <imap-infowindow :contentTxt="content" :position="[116.51912, 39.79473]" />
    <!-- 根据点数据生成多边形 -->
    <imap-polygon :points="polygonpoints" @polygonClick="polygonClick" />
    <!-- 根据点数据生成圆 -->
    <imap-circle :radius="radius" :center="center" @circleClick="circleClick" />
  </imap>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      markers: [],
      radius: 80,
      content: "<p>信息框在这里</p>",
      markerposition: [116.51912, 39.79273],
      infoposition: [116.51912, 39.79273],
      visible: false,
      center: [116.51912, 39.79273],
      points: [
        [116.51912, 39.79273],
        [116.51912, 39.79373],
        [116.51812, 39.79273],
        [116.51812, 39.79473],
        [116.51712, 39.79473],
        [116.51912, 39.79273],
      ],
      polygonpoints: [
        [116.51912, 39.79273],
        [116.51912, 39.79373],
        [116.51812, 39.79273],
        [116.51812, 39.79473],
        [116.51712, 39.79473],
        [116.51912, 39.79273],
      ],
    };
  },
  created() {
    let basePosition = [116.51912, 39.79273];
    for (let i = 0; i < 5000; i++) {
      this.markers.push({
        position: [basePosition[0], basePosition[1] + i * 0.0003],
      });
    }
  },
  methods: {
    //点击之后移除对应marker
    handleRemove(e) {
      e.source.removeFeature(e.marker);
    },
    //点击之后移除对应line
    handlelineclick(e) {
      e.source.removeFeature(e.line);
    },
    polygonClick(e) {
      e.source.removeFeature(e.polygon);
    },
    circleClick(e) {
      this.radius = Math.random() * 100;
      this.center = [
        116.51912 + Math.random() * 0.0009,
        39.79473 + Math.random() * 0.0005,
      ];
      e.source.removeFeature(e.circle);
    },
    handleClick(e) {
      this.visible = false;
      this.markerposition = [
        116.51912 + Math.random() * 0.0001,
        39.79473 + Math.random() * 0.0001,
      ];

      this.content = "当前点所在位置为" + this.markerposition;
      this.infoposition = this.markerposition;
      this.points = [];
      for (let i = 0; i < 5; i++) {
        this.points.push([
          116.51912 + Math.random() * 0.0009,
          39.79473 + Math.random() * 0.0005,
        ]);
      }
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
}
#app {
  min-height: calc(100vh - 50px);
  width: 100%;
}
</style>