vue2-openlayers 0.1.0

package/examples/assets/js/gps.js

@@ -0,0 +1,222 @@
+/**
+ * WGS－84原始坐标系，一般用国际GPS纪录仪记录下来的经纬度，通过GPS定位拿到的原始经纬度
+ * 
+ * GCJ－02坐标系，又名“火星坐标系”，是我国国测局独创的坐标体系，由WGS－84加密而成
+ * 
+ * 百度坐标系:bd-09，百度坐标系是在GCJ－02坐标系的基础上再次加密偏移后形成的坐标系，只适用于百度地图
+ */
+
+const PI = 3.14159265358979324;
+
+// const x_pi = 3.14159265358979324 * 3000.0 / 180.0;
+
+function delta(lat, lon) {
+  // Krasovsky 1940
+  //
+  // a = 6378245.0, 1/f = 298.3
+  // b = a * (1 - f)
+  // ee = (a^2 - b^2) / a^2;
+  var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
+  var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
+  var dLat = transformLat(lon - 105.0, lat - 35.0);
+  var dLon = transformLon(lon - 105.0, lat - 35.0);
+  var radLat = lat / 180.0 * PI;
+  var magic = Math.sin(radLat);
+  magic = 1 - ee * magic * magic;
+  var sqrtMagic = Math.sqrt(magic);
+  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI);
+  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI);
+  return { 'lat': dLat + 0.000004, 'lon': dLon + 0.000004 };
+}
+
+function outOfChina(lat, lon) {
+  if (lon < 72.004 || lon > 137.8347)
+    return true;
+  if (lat < 0.8293 || lat > 55.8271)
+    return true;
+  return false;
+}
+
+function transformLat(x, y) {
+  var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
+  ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0;
+  ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0;
+  return ret;
+}
+
+function transformLon(x, y) {
+  var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
+  ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0;
+  ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0;
+  return ret;
+}
+
+/**
+ * gps-->高德
+ * @param {*} wgsLat lat 纬度
+ * @param {*} wgsLon lng 经度
+ */
+export function gps2gd(wgsLat, wgsLon) {
+  if (typeof wgsLat === 'string') wgsLat = Number(wgsLat);
+  if (typeof wgsLon === 'string') wgsLon = Number(wgsLon);
+  if (outOfChina(wgsLat, wgsLon))
+    return { 'lat': wgsLat, 'lng': wgsLon };
+
+  var d = delta(wgsLat, wgsLon);
+  return { 'lat': wgsLat + d.lat, 'lng': wgsLon + d.lon };
+}
+
+/**
+ *  高德坐标系转gps
+ */
+export function gd2gps(gcjLat, gcjLon) {
+  if (typeof gcjLat === 'string') gcjLat = Number(gcjLat);
+  if (typeof gcjLon === 'string') gcjLon = Number(gcjLon);
+  if (outOfChina(gcjLat, gcjLon))
+    return { 'lat': gcjLat, 'lng': gcjLon };
+  var d = delta(gcjLat, gcjLon);
+  let lat = gcjLat - d.lat;
+  let lon = gcjLon - d.lon;
+  for (let i = 0; i < 1; i++) {
+    d = delta(lat, lon);
+    lat = gcjLat - d.lat;
+    lon = gcjLon - d.lon;
+  }
+  return { 'lat': lat, 'lng': lon };
+
+}
+
+
+
+
+/**
+ * 批量gps--->高德
+ * @param [{ lat :xxx,lng:xxx}] list 
+ */
+export function batchGps2gd(list) {
+  let rlist = [];
+  for (let i = 0; i < list.length; i++) {
+    rlist.push(gps2gd(list[i].lat, list[i].lng))
+  }
+  return rlist;
+}
+//  gps转高德
+export function localConvertListAndSetname(list, lngName, latName) {
+  if (list instanceof Array) {
+    //原有点
+    let locations = list.map((n) => {
+      return {
+        lat: n[latName],
+        lng: n[lngName],
+      };
+
+    });
+    // console.info("批量坐标转换数量:" + locations.length);
+    let results = batchGps2gd(locations);
+    for (let i = 0; i < results.length; i++) {
+      list[i].P = results[i].lat;
+      list[i].R = results[i].lng;
+    }
+  } else if (list instanceof Object && list != null && list != undefined) {
+    let res = gps2gd(list[latName], list[lngName]);
+    list.P = res.lat || 30.573095;
+    list.R = res.lng || 104.066143;
+  }
+}
+////无返回 直接处理字段 阻塞型
+export function localConvert(list, lngName, latName, usePR) {
+  if (list instanceof Array) {
+    //原有点
+    let locations = list.map(n => { return { lat: n[latName], lng: n[lngName] } });
+    console.info('批量坐标转换数量:' + locations.length);
+    let results = batchGps2gd(locations);
+    if (usePR) {
+      for (let i = 0; i < results.length; i++) {
+        list[i].P = results[i].lat;
+        list[i].R = results[i].lng;
+      }
+    } else {
+      for (let i = 0; i < results.length; i++) {
+        list[i][latName] = results[i].lat;
+        list[i][lngName] = results[i].lng;
+      }
+    }
+
+  } else if ((list instanceof Object) && list != null && list != undefined) {
+    console.info('转换坐标1个');
+    let res = gps2gd(list[latName], list[lngName]);
+    if (usePR) {
+      list.P = res.lat;
+      list.R = res.lng;
+    } else {
+      list[latName] = res.lat;
+      list[lngName] = res.lng;
+    }
+
+  }
+}
+
+/// gps->Gd 转换 结构如同 [[104.31892600,30.71867200], [104.31836300,30.71835900], [104.31769800,30.71797600]]的数据机构点 
+export function localConvertArray(arrayList) {
+  arrayList.forEach(arr => {
+    let p = gps2gd(arr[1], arr[0])
+    arr[0] = p.lng;
+    arr[1] = p.lat;
+  });
+  return arrayList;
+}
+
+
+export function gpsToGd(wgLon, wgLat) {
+  var pi = 3.14159265358979324;
+  var a = 6378245.0;
+  var ee = 0.00669342162296594323;
+  var cj, cw;
+
+  if (outOfChina(wgLat, wgLon)) {
+    return false;
+  } else {
+    wgLat = parseFloat(wgLat);
+    wgLon = parseFloat(wgLon);
+    var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
+    var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
+    var radLat = wgLat / 180.0 * pi;
+    var magic = Math.sin(radLat);
+    magic = 1 - ee * magic * magic;
+    var sqrtMagic = Math.sqrt(magic);
+    dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
+    dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
+
+    cw = wgLat + dLat;
+    cj = wgLon + dLon;
+    return [cj, cw]
+  }
+
+  // function outOfChina(lat, lon) {
+  // if (lon < 72.004 || lon > 137.8347)
+  //     return true;
+  // if (lat < 0.8293 || lat > 55.8271)
+  //     return true;
+  // return false;
+  //上面注释为判断经纬度是否在中国
+  // return false;
+  // };
+
+  function transformLat(x, y) {
+    var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+    ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+    ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
+    ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
+    return ret;
+  }
+
+  function transformLon(x, y) {
+    var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+    ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+    ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
+    ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
+    return ret;
+  }
+}

package/examples/components/HelloWorld.vue

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <div class="map_index">
+      <!-- 定义地图容器与相关样式（宽高等） -->
+      <div id="app">
+        <yl-map @handleDownEvent="handleDownEvent" ref="map">
+          <template slot="yl-map-layers">
+            <yl-line :lineData="lineData" :lineFun="lineFun" v-if="tabIndex==1"></yl-line>
+            <yl-point :pointData="pointData" :pointFun="pointFun" :pointAnimation="tabIndex==3" v-if="tabIndex==3 || tabIndex == 2" :zIndex="3"></yl-point>
+            <yl-fiy-line :pointData="pointData" :pointFun="flyPointFun" :lineData="lineDataFiy" :lineFun="flyLineFun" v-if="tabIndex == 4" :zIndex="4"></yl-fiy-line>
+            <yl-geo-json :geoJsonUrl="geoJsonUrl" v-if="tabIndex==5" :zIndex="2"></yl-geo-json>
+          </template>
+          <template slot="yl-map-overlay">
+            <MapPopup :visible.sync="showDialog">
+              <template slot="map-popup-title">
+                {{ popupContent?.nodeName }}
+              </template>
+              <template slot="map-popup-main">
+                {{ popupContent }}
+              </template>
+            </MapPopup>
+          </template>
+        </yl-map>
+      </div>
+      <div class="btn-list">
+        <div class="btn" @click="changeTab(item, index + 1)" v-for="(item, index) in tableList" :key="index" :class="tabIndex==(index+1)?'active':''">{{ item.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { sichuan } from "../data/510000";
+import { returnFlyingSpotData } from "../data/testData";
+let pointDataList = [];
+returnFlyingSpotData().data.locationInfo.forEach(el=>{
+  pointDataList.push({
+    info: el,
+    lat: el.latitude,
+    lng: el.longitude
+  })
+})
+
+import MapPopup from "./MapPopup";
+export default {
+  name: 'App',
+  components: {
+    MapPopup
+  },
+  data() {
+    return {
+      tabIndex: 0,
+      tableList: [
+        {name: '线型示例'},
+        {name: '点位示例'},
+        {name: '点位扩散示例'},
+        {name: '飞线示例'},
+        {name: 'geoJson数据示例'},
+      ],
+      geoJsonUrl: 'http://8.137.153.28:33660/510000.json',
+      showDialog: false,
+      popupContent: null,
+      geoJsonState: true,
+      lineState: true,
+      pointState: false,
+      fiyState: false,
+      lineDataFiy: returnFlyingSpotData().data.relationship,
+      pointFun:(element)=>{
+          return {
+            style: {
+              src: element.subType==2?require("@/assets/images/warehouse_map_success.png"):require("@/assets/images/warehouse_map_warning.png"),
+              scale: 1,
+            },
+            type: 'Icon'
+          }
+      },//点样式
+      lineFun:()=>{
+          return {
+              color:null,
+              width:null
+          }
+      },//线样式
+      flyPointFun:(element)=>{
+        return {
+            style: {
+              src: element.subType==2?require("@/assets/images/w_mj_map.png"):require("@/assets/images/red_circle.png"),
+              scale: 1,
+            },
+            type: 'Icon'
+          }
+      },//飞点样式
+      flyLineFun:(element)=>{
+          if(element){
+            if(element.status==1){
+              return {
+                color: [76, 255, 255, 0.6],
+                width: 1.5
+              }
+            }else{
+              return {
+                color: [179, 178, 116, 1],
+                width: 1.5
+              }
+            }
+          }
+          return {
+            color: [76, 255, 255, 0.6],
+            width: 1.5
+          }
+      },//飞线样式
+      lineData:[
+      ],//线性数据结构
+      pointData: pointDataList,//点数据结构
+    }
+  },
+  methods:{
+    //地图元素点击事件
+    handleDownEvent(coordinate, value){
+      this.popupContent = value;
+      this.$refs.map.showPopup({
+        position: coordinate,
+        offset: [5, -5],
+        positioning: "bottom-center",
+        duration: 250
+      });
+      this.showDialog = true;
+    },
+
+    //注意:closeOverlay()、refMapData()、fitView()使用:  给地图添加ref
+    
+    //关闭弹框
+    closeOverlay(){
+      this.$refs.map.close();
+      this.showDialog = false;
+    },
+    //刷新地图叠加层数据
+    refMapData(){
+        this.$bus.$emit(this.$refs.map.mapId + "ready", {});
+    },
+    //移动焦点位置   传入值features:Array
+    // fitView(feature){
+      // this.$refs.map.fitViewfeatures([feature]);
+    // },
+    // 切换选项卡
+    changeTab(item, index) {
+      if (index == this.tabIndex) {
+        return;
+      }
+      this.tabIndex = index;
+      this.closeOverlay();
+    },
+  },
+  mounted(){
+    // 模拟改变线型数据值
+    this.lineData = [{
+      data: sichuan().features[0].geometry.coordinates[0],
+      info: sichuan().features[0].properties.name,
+    }]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/map-base.scss";
+
+:deep() html, body, #app {
+  height: 100%;
+  margin: 0px;
+}
+
+::v-deep ::-webkit-scrollbar {
+  width: 0.5vh !important;
+  height: 0.5vh !important;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  border-radius: 2px !important;
+  background: rgba(31, 92, 153, 1) !important;
+}
+
+.map_index {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+
+  i {
+    font-size: 1.2vh;
+  }
+
+  img {
+    width: 1.5vh;
+    height: 1.5vh;
+  }
+
+  #map {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+
+}
+
+
+.map-popup-style{
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  padding: 5px;
+  border-radius: 5px;
+  font-size: 12px;
+  max-width: 200px;
+  word-break: break-all;
+  white-space: normal;
+}
+
+.btn-list{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 999;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  .btn{
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 0.8vh;
+    background: #093159;
+    color: rgba(184, 203, 229, 1);
+    font-size: 1.25vh;
+    padding: 1vh 0.8vh;
+    border-radius: 2px;
+    cursor: pointer;
+    &:hover{
+      color: #409eff;
+    }
+  }
+  .active{
+    background: rgba(25, 140, 255, 1);
+  }
+}
+:deep() .ol-zoom-in{
+  background: #093159;
+  color: #fff !important;
+  border-radius: 5px;
+  padding: 5px;
+  font-size: 12px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  &:hover{
+    color: #fff;
+  }
+}
+:deep() .ol-zoom-out{
+  background: #093159;
+  color: #fff !important;
+  border-radius: 5px;
+  padding: 5px;
+  font-size: 12px;
+  cursor: pointer;
+  &:hover{
+    color: #fff;
+  }
+}
+:deep() .ol-control{
+  background: transparent;
+}
+</style>

package/examples/components/MapPopup.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="warehouse-popup" class="map-popup" v-if="visible">
+    <img
+      class="close_diago"
+      @click="close"
+      src="../assets/images/close_diago.png"/>
+    <div class="map-popup-title">
+      <slot name="map-popup-title"></slot>
+    </div>
+    <div class="map-popup-main">
+      <slot name="map-popup-main"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapPopup',
+  props: {
+    visible: {  
+      type: Boolean,  
+      default: false  
+    }  
+  },
+  data() {
+    return {
+      popupShow: false,
+    };
+  },
+  methods: {
+    close() {  
+      this.$emit('update:visible', false);  
+    }  
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.map-popup {
+  position: relative;
+  width: 28.43vw;
+  height: 17.34vw;
+  background-image: url("../assets/images/warehouse_map_popup.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 1.56vw 1.56vw 1.56vw;
+  // position: absolute;
+  // left: 50vw;
+  // top: 50vh;
+  .map-popup-title{
+    font-size: 18px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 700;
+    color: #ffffff;
+    height: 2.86vw;
+    display: flex;
+    align-items: center;
+  }
+  .map-popup-main {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    font-size: 14px;
+    margin-top: 0.625vw;
+    padding: 1vw 1vw 0 1vw;
+    flex-direction: column;
+  }
+}
+.close_diago {
+  height: 28px;
+  width: 28px;
+  margin-right: 20px;
+  cursor: pointer;
+  position: absolute;
+  top: 20px;
+  right: 5px;
+}
+</style>