vue-geojson-view-ts
v1.3.8
Published
Paquete para el uso de mapas con openstreetmap y geojson con VITE & VUE
Downloads
91
Readme
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,
renderMarker:true,
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,
renderMarker:true,
dragMarker:false,
createFigures:{
polygon: 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 Trigger click button Save Edit (Guardar Edicion de Polygonos)
Configuracion para ejecutar el disparador que guarda el polygono desde un boton fuera del mapa
<template>
<div>
<button @click="SaveEdit">Trigger Save Edit</button>
<div style="display:flex;width: 100%;">
<div style="width:30%">
<MapView :loadPolygon="true" ref="Ref_MapView" :dataPolygon="dataPolygon" :reverseCoordinatesPolygon="true" :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
</div>
</div>
</template>
<script setup lang="ts">
import {MapView} from "vue-geojson-view-ts"
import { ref } from "vue";
const Ref_MapView = ref();
const configurationMap = {
height:'500px',
iconMarker:{
iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
},
maxZoom:19,
renderMarker:true,
dragMarker:false,
createFigures:{
polygon: false,
rectangle: false,
marker:false,
},
editFigures:{
edit: true,
remove: true
}
}
const coordinatesMap = [-19.0382054,-65.2662444,13]
const getGeoJSON = (geojson:any) =>{
////Los datos seran enviados a este callback desde el boton dentro del mapa como desde el TRIGGER
console.log("geojson",geojson)
}
const SaveEdit = () =>{
Ref_MapView.value.triggerSaveEdit()
}
const getLayersFeatures = () =>{
const getLayersToGeoJson = Ref_MapView.value.getLayersFeaturesInGeoJson()
console.log(getLayersToGeoJson)
}
</script>
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>
Utilizar nominatim.openstreetmap.org para la busqueda de direcciones
<template>
<div>
<MapSearchAddress :coordinatesMap="coordinatesMap" @updated:coordsMarker="getCoodMarker"
ref="mapRef"
/>
</div>
</template>
<script setup lang="ts">
const configurationMap: IConfigurationMap = {
height: "500px",
maxZoom: 19,
renderMarker:true,
dragMarker:false,
iconMarker: {
iconUrl: "https://cdn.onlinewebfonts.com/svg/img_466240.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
},
};
const mapRef = ref()
const coordinatesMap = ref({
lat: -19.0382054,
lng: -65.2662444,
zoom: 15,
})
const getCoodMarker = ({ lat, lng }: { lat: number; lng: number }) => {
console.log("coord", lat, lng);
};
// mapRef.value.searchAddress(query:string)
// mapRef.value.searchAddress("Bolivia, Sucre, Bustillos 282");
// En caso de encontrar una dirección, envia el marcador a la nueva posición y actualiza
// el marcador via el emit @updated:coordsMarker
</script>
<style>
@import url(/node_modules/vue-geojson-view-ts/dist/style.css);
</style>