vue-geojson-view-ts

Descripcion

Paquete para el uso de mapas con openstreetmap y geojson con VITE & VUE

Instalacion

Instalacion del paquete

npm i vue-geojson-view-ts

Configuracion Creacion de Polygonos

Configuracion para la creacion de polygonos dentro del mapa

<template>
    <div>
        <MapView :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"  :getCoodMarker="getCoodMarker"></MapView>
    </div>
</template>

<script setup lang="ts">
import { MapView } from 'vue-geojson-view-ts'
import { ref } from 'vue';

const iconMarker = {
  iconUrl:'/images/icon.png'.
  iconSize: [25, 41],
  iconAnchor: [12, 41],
}

const configurationMap = {
  height:'500px',
  iconMarker:{
    iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
  },
  maxZoom:19,
  dragMarker:true,
  createFigures:{
    polygon: true,
    circle: true,
    rectangle: true,
    marker:true,
  },
  editFigures:{
    edit: true,
    remove: true
  }
}
const coordinatesMap = ref([-19.0382054,-65.2662444,13])

const getGeoJSON = (geojson:any) =>{
  console.log(geojson)
}
const getCoodMarker = (lat:number,long:number) =>{
  console.log(lat,long)
}


</script>

<style>
 @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
</style>

Configuracion de vista o edicion de Polygonos

Configuracion para la edicion o solo vista de polygonos dentro del mapa

<template>
    <div>
        <MapView :loadPolygon="true" :dataPolygon="dataPolygon" :reverseCoordinatesPolygon="true" :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
    </div>
</template>

<script setup lang="ts">
import { MapView } from 'vue-geojson-view-ts'
import { ref } from 'vue';

const iconMarker = {
  iconUrl:'/images/icon.png'.
  iconSize: [25, 41],
  iconAnchor: [12, 41],
}

const configurationMap = {
  height:'500px',
  iconMarker:{
    iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
  },
  maxZoom:19,
  dragMarker:false,
  createFigures:{
    polygon: false,
    circle: false,
    rectangle: false,
    marker:false,
  },
  editFigures:{
    edit: false,
    remove: false
  }
}

const coordinatesMap = ref([-19.0382054,-65.2662444,13])

const getGeoJSON = (geojson:any) =>{
  console.log(geojson)
}

const dataPolygon = {"type":"Feature","properties":{},
"geometry":{"type":"Polygon","coordinates":[
  [[-65.268488,-19.038266],[-65.25703,-19.034128],[-65.256085,-19.039361],[-65.268788,-19.043337],[-65.268488,-19.038266]]
]}}

</script>

<style>
 @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
</style>

Configuracion de Marcador o Puntero dentro de polygono

Configuracion para ver si un punto esta dentro de un polygono

<template>
    <div>
        <CoordinatesVerifyPolygon :dataPolygon="dataPolygon" :coordinatesMap="coordinatesMap" :iconMarker="iconMarker" :checkPointInPolygon = "checkPointInPolygon"/>
    </div>
</template>

<script setup lang="ts">

const iconMarker = {
  iconUrl:'/images/icon.png'.
  iconSize: [25, 41],
  iconAnchor: [12, 41],
}

const coordinatesMap = ref([-19.0382054,-65.2662444,13])

const checkPointInPolygon = (check:Boolean) =>{
  console.log(check)
}

const dataPolygon = {"type":"Feature","properties":{},
"geometry":{"type":"Polygon","coordinates":[
  [[-65.268488,-19.038266],[-65.25703,-19.034128],[-65.256085,-19.039361],[-65.268788,-19.043337],[-65.268488,-19.038266]]
]}}

</script>

<style>
 @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
</style>

Utilizar Google Maps para la busqueda de direcciones

Configuracion para el uso del buscador de direcciones de googlemaps

IMP.- Por seguridad y uso solo de los sitios esperados... se debe enviar un parametro blts=listen por la url ej: http://localhost:8080/?blts=listen donde se quira utilizar la extension

1.- Instalar la extension

a.- Dirijase a brave://extensions/ o chrome://extensions/

b.- Habilite la opcion desarrollador

c.- Luego clic en CARGAR DESCOMPRIMIDO

d.- Busque la extension descargada y descomprimido "GMI" de este repositorio

2.- En su componente principal App.vue cargue listenServiceGoogleMaps este servicio escuchara cuando se abra y encuentre las coordenadas de su busqueda en google.

import {listenServiceGoogleMaps} from 'vue-geojson-view-ts'
import { onMounted } from 'vue';

onMounted(() => {
  listenServiceGoogleMaps()
});

3.- Donde tenga cargado su Mapa importe su tipo de buscador que desea utilizar

<template>
    <div>
      <MapView :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"  :getCoodMarker="getCoodMarker"></MapView>
    </div>
    <button @click="manualGoogleMaps">manual</button>
    <button @click="automaticGoogleMaps">automatic</button>
</template>

<script setup lang="ts">
import {searchAutomaticGoogleMaps,searchManualGoogleMaps} from 'vue-geojson-view'
import { ref } from 'vue';

const coordinatesMap = ref([-19.0382054,-65.2662444,13])

const manualGoogleMaps = () =>{
    searchManualGoogleMaps().then(cood =>{
        coordinatesMap.value = cood
    }).catch(e=>{
        throw e
    })
}

const automaticGoogleMaps = () =>{
      searchAutomaticGoogleMaps('Santa Cruz, Bolivia').then(cood=>{
        coordinatesMap.value = cood
      }).catch(e=>{
          throw e
      })
}
</script>