1.创建组件：
<template><div id="container" class="box"><div><el-input v-model="inputText" placeholder="请输入内容"><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input></div><div id="cesiumContainer"></div></div></template><script>export default {name: 'cesiumPage',data () {return {inputText:'',viewer:''}},}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style lang="scss" scoped>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.box {height: 100%;}::v-deep{.cesium-widget-credits{display: none;}}</style>
2.加载cesium地图：
// mounted生命周期钩子中加载cesium地图
mounted(){
var Cesium = this.Cesium;
var cesiumContainer = document.getElementById("cesiumContainer");
this.viewer = new Cesium.Viewer (cesiumContainer);
// var viewer = new Cesium.CesiumWidget (cesiumContainer,{
// //加载在线谷歌地图
// imageryProvider: new Cesium.UrlTemplateImageryProvider({
// url:"http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
// })
// })
//去除 版权图标
this.viewer._cesiumWidget._creditContainer.style.display="none";
}
}
3.点击事件
search() {
//定位的实现
console.log(this.inputText)
var times = (this.inputText.match(/,/g)||[]).length;
if(times === 1) {
// 判断 ',' 出现的次数
console.log('可以继续')
console.log(this.inputText.split(','))
var timesArr = this.inputText.split(',')
if(timesArr.length === 2) {
if(timesArr[0] !== '' && timesArr[1] !== '') { //判断两个值是否为空开始
// 判断截取的数组的每个值是否为空
/*var lng = Number(timesArr[0])
var lat = Number(timesArr[1])*/
if(isNaN(timesArr[0]) || isNaN(timesArr[1])) {
// 判断截取的两个值是否为数字
var lngTimes1 = (timesArr[0].match(/°/g)||[]).length;
var lngTimes2 = (timesArr[0].match(/'/g)||[]).length;
var lngTimes3 = (timesArr[0].match(/"/g)||[]).length;
var latTimes1 = (timesArr[1].match(/°/g)||[]).length;
var latTimes2 = (timesArr[1].match(/'/g)||[]).length;
var latTimes3 = (timesArr[1].match(/"/g)||[]).length;
console.log(lngTimes1)
console.log(lngTimes2)
console.log(lngTimes3)
console.log(latTimes1)
console.log(latTimes2)
console.log(latTimes3)
if(lngTimes1 === 1 && lngTimes2 === 1 && lngTimes3 ===1 && latTimes1 === 1 && latTimes2 === 1 && latTimes3 === 1) {
//若截取的两个数不为数字,判断是否为第二种定位写法
//判断 ° ' " 出现的次数 必须所有的符号出现的次数为1
console.log('已过第一关')
console.log(timesArr[0].indexOf('°'))
console.log(timesArr[0].indexOf('"'))
console.log(timesArr[0].indexOf("'"))
var lngs1 = timesArr[0].indexOf('°')
var lngs2 = timesArr[0].indexOf("'")
var lngs3 = timesArr[0].indexOf('"')
var lats1 = timesArr[1].indexOf('°')
var lats2 = timesArr[1].indexOf("'")
var lats3 = timesArr[1].indexOf('"')
if(lngs1 < lngs2 && lngs2 < lngs3 && lats1 < lats2 && lats2 < lats3) { //三个符号出现的顺序开始
//符号的出现顺序得是 ° ' " 否则不行
//32°23'23",23°23'23"
if(!isNaN(Number(timesArr[0].split('°')[0])) && !isNaN(Number(timesArr[1].split('°')[0]))) { //判断度数为数字开始
//判断第二种定位的 ° 前面是否为数字 //是
if(Number(timesArr[0].split('°')[0]) > 180 || Number(timesArr[0].split('°')[0]) < -180 || Number(timesArr[1].split('°')[0]) >= 90 || Number(timesArr[1].split('°')[0]) <= -90) {
//第二种定位的经纬度度数也要在 -180 —— 180 ，纬度 -90 —— 90之间 //不是在此区间
this.$Message.warning('经度的范围是 -180 —— 180 。纬度的范围是 -90 —— 90');
}else {
//是在此区间
if(Number(timesArr[0].split('°')[0]) === 180 || Number(timesArr[0].split('°')[0]) === -180) { //start123456
//判断经度度数是否等于180 //是
if(Number(timesArr[0].split('°')[1].split("'")[0]) === 0 && Number(timesArr[0].split('°')[1].split("'")[1].split('"')[0]) === 0) {
//若经度为180或-180 分秒只能为0
var lngData = 180;
var latData;
var lat_du = timesArr[1].split('°')[0]
var lat_fen = timesArr[1].split('°')[1].split("'")[0]
var lat_miao = timesArr[1].split('°')[1].split("'")[1].split('"')[0]
if(lat_du >= 0) {
//纬度为正数 北经
latData = Number(lat_du) + Number(lat_fen/60) + Number(lat_miao/3600)
}else {
//纬度为负数 南经
latData = '-' + (Math.abs(Number(lat_du)) + Number(lat_fen/60) + Number(lat_miao/3600))
}
this.showPoints(lngData, latData)
}else {
this.$Message.warning('经度为180或-180时，对应的分秒必须为0');
}
}else {
//经度度数大于-180小于180 纬度度数大于-90小于90的时候
if(!isNaN(Number(timesArr[0].split('°')[1].split("'")[0])) && !isNaN(Number(timesArr[1].split('°')[1].split("'")[0]))) {
//判断 ° 后面 ' 前面的内容是否为数字 //是
if(Number(timesArr[0].split('°')[1].split("'")[0]) <= 60 && Number(timesArr[0].split('°')[1].split("'")[0]) >= 0 && Number(timesArr[1].split('°')[1].split("'")[0]) <= 60 && Number(timesArr[1].split('°')[1].split("'")[0]) >= 0) {
//为数字后还要判断区间范围 判断分的范围是否在0-60之间
if(!isNaN(Number(timesArr[0].split('°')[1].split("'")[1].split('"')[0])) && !isNaN(Number(timesArr[1].split('°')[1].split("'")[1].split('"')[0]))) {
//判断 " 前面的内容是否为数字 //是
if(Number(timesArr[0].split('°')[1].split("'")[1].split('"')[0]) <= 60 && Number(timesArr[0].split('°')[1].split("'")[1].split('"')[0]) >= 0 && Number(timesArr[1].split('°')[1].split("'")[1].split('"')[0]) <= 60 && Number(timesArr[1].split('°')[1].split("'")[1].split('"')[0]) >= 0) {
//若秒数为数字 判断其范围是否在0-60之间
if(timesArr[0].split('°')[1].split('"')[1] === '' && timesArr[1].split('°')[1].split('"')[1] === '') {
//判断 " 后面是否还有内容 //没有
var lng_du = timesArr[0].split('°')[0]
var lng_fen = timesArr[0].split('°')[1].split("'")[0]
var lng_miao = timesArr[0].split('°')[1].split("'")[1].split('"')[0]
var lat_du = timesArr[1].split('°')[0]
var lat_fen = timesArr[1].split('°')[1].split("'")[0]
var lat_miao = timesArr[1].split('°')[1].split("'")[1].split('"')[0]
var lngData;
var latData;
if(lng_du >= 0) {
//经度为正数 东经
lngData = Number(lng_du) + Number(lng_fen/60) + Number(lng_miao/3600)
}else {
//经度为负数 西经
lngData = '-' + (Math.abs(Number(lng_du)) + Number(lng_fen/60) + Number(lng_miao/3600))
}
if(lat_du >= 0) {
//纬度为正数 北经
latData = Number(lat_du) + Number(lat_fen/60) + Number(lat_miao/3600)
}else {
//纬度为负数 南经
latData = '-' + (Math.abs(Number(lat_du)) + Number(lat_fen/60) + Number(lat_miao/3600))
}
this.showPoints(lngData, latData)
}else {
this.$Message.warning('格式错误——秒数后面不能再出现内容');
}
}else {
this.$Message.warning('经纬度秒数的范围必须是在0-60之间');
}
}else {
this.$Message.warning('经纬度秒数必须为数字');
}
}else {
this.$Message.warning('经纬度的分数的范围必须是在0-60之间');
}
}else {
this.$Message.warning('经纬度的分数必须为数字');
}
} //end123456
}
}else {
this.$Message.warning('经纬度度数必须为数字');
} //判断度数为数字结束
}else {
this.$Message.warning('格式错误——请参考定位格式');
} //三个符号出现的顺序结束
}else {
this.$Message.warning('格式错误——请参考定位格式');
}
}else {
if(timesArr[0]>180 || timesArr[0]<-180 || timesArr[1]>90 || timesArr[1]<-90) {
//判断经纬度值的范围
this.$Message.warning('经度的范围是 -180 —— 180 。纬度的范围是 -90 —— 90');
}else {
console.log('区定位吧')
this.showPoints(timesArr[0], timesArr[1])
}
}
}else {
this.$Message.warning('经纬度不能为空');
} //判断两个值是否为空结束
}else {
this.$Message.warning('格式错误——请参考定位格式');
}
}else { //判断times===1
this.$Message.warning('格式错误——请参考定位格式');
}
}
4.定位到地图
showPoints(lng, lat) { // 接受两个参数 lng经度 lat纬度
lng = Number(lng),lat = Number(lat);
// this.viewer.entities.removeAll() //先清除地球上的标点
console.log(this.viewer.entities)
if(this.viewer.entities.values.length === 0) { //清除完成后地球上没有其他点位了
var entity = this.viewer.entities.add({
position: this.Cesium.Cartesian3.fromDegrees(lng, lat),
/*point: {
color: Cesium.Color.RED, //点位颜色
pixelSize: 10 //像素点大小
},*/
// billboard: {
// image: marker
// },
label : {
text : '测试名称',
font : '14pt Source Han Sans CN', //字体样式
fillColor: this.Cesium.Color.BLACK, //字体颜色
backgroundColor: this.Cesium.Color.AQUA, //背景颜色
showBackground:true, //是否显示背景颜色
style: this.Cesium.LabelStyle.FILL, //label样式
outlineWidth : 2,
verticalOrigin: this.Cesium.VerticalOrigin.CENTER,//垂直位置
horizontalOrigin: this.Cesium.HorizontalOrigin.LEFT,//水平位置
pixelOffset:new this.Cesium.Cartesian2(10,0) //偏移
}
})
this.viewer.camera.flyTo({ //相机飞往该点
destination: this.Cesium.Cartesian3.fromDegrees(lng, lat, 500000), //摄像机的最终位置
duration: 2
})
}
}
若有收获，就点个赞吧
0 人点赞
