vue2-openlayers 0.1.2 → 0.1.4

package/examples/assets/js/gps.js

@@ -1,222 +0,0 @@
-/**
- * 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

@@ -1,273 +0,0 @@
-<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

@@ -1,80 +0,0 @@
-<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>