一、全图
主要代码：
// 获取当前可见视图范围
//console.log(this.map.getView().calculateExtent());
// 设置中心点
//this.map.getView().setCenter(transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857'));
// 设置层级
//this.map.getView().setZoom(10);
// 中心点信息
const geom = transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857')
// 全图过渡动画
this.map.getView().animate({
center:geom,// 中心点
zoom:10,// 层级
duration:1000// 持续时间
});二、切换地图
主要代码
1、定义全局对象
data () {
return {
map:null,
yxt:null,// 影像图
dzt:null,// 电子图
view:null,
count:0
}
},2、地图加载
//天地图影像
const tdtYX = new TileLayer({
source: new XYZ({
url: 'http://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
projection: 'EPSG:3857',
crossOrigin: '*',
}),
visible:true,
})
// 全局赋值
this.yxt = tdtYX;
//天地图电子地图
const tdtDZ = new TileLayer({
source: new XYZ({
url: 'http://t2.tianditu.gov.cn/DataServer?T=vec_w &x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
projection: 'EPSG:3857',
}),
visible:true,
})
// 全局赋值
this.dzt = tdtDZ;
//天地图标注
const tdtBZ = new TileLayer({
source: new XYZ({
url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
projection: 'EPSG:3857',
}),
visible:true,
})
this.map = new Map({
target: 'map',
layers: [tdtYX,tdtDZ,tdtBZ],//[tdtYX, tdtBZ],
view: new View({
projection: 'EPSG:3857',
center: transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857'),
// center: [125.33,43.90],
zoom: 10,
minZoom: 0,// 最小缩放级别
maxZoom: 18, //最大缩放级别
constrainResolution: true,// 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
enableRotation: false,// 禁止地图旋转
}),
controls:defaultControls({
zoom:false,//不显示放大放小按钮
rotate:false,// 不显示指北针控件
attribution:false//不显示右下角的地图信息控件
}).extend([
// 比例尺
new ScaleLine({
//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
units: "metric"
})
])
})
3、设置图层显隐
valueChange(newValue, oldValue, ownerInstance, instance){
console.log(newValue, oldValue, ownerInstance, instance);
const olType = newValue.type;// 类型
const olFlag = newValue.flag;// 布尔值
// 定位
this.goToExtent();
switch(olType){
case "LAYER_TITLE":// 底图切换
//console.log("Layer",this.map.getLayers)
if(olFlag){
this.yxt.setVisible(true);
this.dzt.setVisible(false);
}else{
this.yxt.setVisible(false);
this.dzt.setVisible(true);
}
break;
}
},三、导航
主要代码：
/**
* 点击事件-导航
* */
async navigation(){
const _this = this;
await _this.mySelfLocation();
// 判断系统安装的地图应用有哪些, 并生成菜单按钮
let _mapName = [{
title: '高德地图',
name: 'amap',
androidName: 'com.autonavi.minimap',
iosName: 'iosamap://'
},
{
title: '百度地图',
name: 'baidumap',
androidName: 'com.baidu.BaiduMap',
iosName: 'baidumap://'
},
{
title: '腾讯地图',
name: 'qqmap',
androidName: 'com.tencent.map',
iosName: 'qqmap://'
},
]
// 根据真机有的地图软件 生成的 操作菜单
let buttons = []
let platform = uni.getSystemInfoSync().platform
platform === 'android' && _mapName.forEach(item => {
if (plus.runtime.isApplicationExist({
pname: item.androidName
})) {
buttons.push(item)
}
})
if (buttons.length) {
plus.nativeUI.actionSheet({ //选择菜单
title: "选择地图应用",
cancel: "取消",
buttons: buttons
}, function(e) {
let _map = buttons[e.index - 1]
console.log("_map",_map)
console.log("platform",platform)
_this.openURL(_map, platform)
})
} else {
uni.showToast({
title: '请安装地图软件',
icon: 'none'
})
return
}
},
// 打开第三方程序实际应用
openURL(map, platform) {
console.log("2222")
const arr = wgs84_to_gcj02(this.startposition.lng, this.startposition.lat)
let _defaultUrl = {
android: {
"amap": `amapuri://route/plan/?dlat=${this.startposition.lat}&dlon=${this.startposition.lng}&dev=1&t=0`,
'qqmap': `qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&tocoord=${arr[1]},${arr[0]}&referer=JFNBZ-QLUWZ-MCPXU-76U2T-E5HPQ-AFB2G`,
'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=${this.startposition.lat},${this.startposition.lng}&coord_type=wgs84&src=andr.baidu.openAPIdemo`
},
}
let newurl = encodeURI(_defaultUrl[platform][map.name]);
console.log("newurl", newurl)
plus.runtime.openURL(newurl, function(res) {
console.log(res)
uni.showModal({
content: res.message
})
}, map.androidName ? map.androidName : '');
},四、定位
主要代码：
renderLocation(longitude,latitude){
const geom = transform([longitude,latitude], 'EPSG:4326', 'EPSG:3857');
// 设置中心点定位-直接定位
//this.map.getView().setCenter(geom);
// 设置层级
//this.map.getView().setZoom(18);
// 设置中心点-过渡动画
this.map.getView().animate({
center:geom,// 中心点
zoom:18,// 层级
duration:1000// 持续时间
});
// 绘制点
const locationPoint = new Point(geom);
// 清除绘制点图层
this.map.removeLayer(this.locationLayer);
// 绘制定位点
// 设置点特征（Feature）
const pointFeature = new Feature({
title:"point",
geometry:locationPoint
});
// 设置特征样式(style)
pointFeature.setStyle(
new Style({
// 使用 CircleStyle 创建一个圆形的点
image:new CircleStyle({
// 点样式
fill:new Fill({
//color:"red",// 颜色
color: 'rgba(255,0,0,0.4)',
}),
// 点周边样式
stroke:new Stroke({
color: '#3399CC',
width: 1.25,
}),
radius:7,// 半径
}),
})
);
// 创建和添加特征到源（Source）
// VectorSource表示一个矢量要素源，它用于存储和显示地理数据。
const source = new VectorSource();
source.addFeature(pointFeature);
// 创建图层并设置源（Layer）
// VectorLayer表示一个矢量图层，它由一系列矢量要素（Feature）组成，用于在地图上显示地理数据。
this.locationLayer = new VectorLayer();
this.locationLayer.setSource(source);
this.map.addLayer(this.locationLayer);
},整体代码：
<template>
<!-- 监听变量 operation 的变化，operation 发生改变时，调用 openlayers 模块的 loadOperation 方法 -->
<view :operation="valueChangeSign" :change:operation="ol.valueChange" type="default"></view>
<view class="map" id="map">
<!--右侧按钮-->
<view class="right-vertical-button">
<!-- 切换图层按钮 -->
<button @click="switchLayer()" class="btn" type="primary">{{baseLayerTitle}}</button>
<!-- 全图按钮 -->
<button @click="allMap()" class="btn" type="primary">全图</button>
<!-- 导航按钮 -->
<button @click="navigation()" class="btn" type="primary">导航</button>
</view>
<view class="bottom-horizontal-button">
<button @click="location()" class="btn" type="primary">定位</button>
</view>
</view>
</template>
<!-- 逻辑层 -->
<script>
import {wgs84_to_gcj02} from '@/utils/coordinate_transformation.js'
export default {
data(){
return {
valueChangeSign:{
latitude:null,//当前位置的纬度
longitude:null,//当前位置的经度
switchLayerFlag:false,// 切换图层标记
flag:false,// 标记
type:""// 类型
},
map:null,
total:0,
baseLayerTitle:"影像",
// 要去到地坐标点
startposition: {
lng: 125.334145,
lat: 43.960569
},
selfLocation:{
latitude:null,//当前位置的纬度
longitude:null//当前位置的经度
}
}
},
methods:{
/**
* 点击事件-切换底图
*/
switchLayer(){
this.valueChangeSign.type = "LAYER_TITLE"
this.valueChangeSign.switchLayerFlag = !this.valueChangeSign.switchLayerFlag;
if(this.valueChangeSign.switchLayerFlag){
this.baseLayerTitle = "电子"
}else{
this.baseLayerTitle = "影像"
}
},
/**
* 点击事件-全图
* */
allMap(){
this.valueChangeSign.type= "ALL_MAP"
this.valueChangeSign.flag = !this.valueChangeSign.flag
},
/**
* 获取本机经纬度方法
* */
mySelfLocation(){
// 获取经纬度
uni.getLocation({
type: 'wgs84 ',
success: (res) => {
//console.log(res)
this.selfLocation.latitude = res.latitude//当前位置的纬度
this.selfLocation.longitude = res.longitude//当前位置的经度
}
});
},
/**
* 点击事件-导航
* */
async navigation(){
const _this = this;
await _this.mySelfLocation();
// 判断系统安装的地图应用有哪些, 并生成菜单按钮
let _mapName = [{
title: '高德地图',
name: 'amap',
androidName: 'com.autonavi.minimap',
iosName: 'iosamap://'
},
{
title: '百度地图',
name: 'baidumap',
androidName: 'com.baidu.BaiduMap',
iosName: 'baidumap://'
},
{
title: '腾讯地图',
name: 'qqmap',
androidName: 'com.tencent.map',
iosName: 'qqmap://'
},
]
// 根据真机有的地图软件 生成的 操作菜单
let buttons = []
let platform = uni.getSystemInfoSync().platform
platform === 'android' && _mapName.forEach(item => {
if (plus.runtime.isApplicationExist({
pname: item.androidName
})) {
buttons.push(item)
}
})
if (buttons.length) {
plus.nativeUI.actionSheet({ //选择菜单
title: "选择地图应用",
cancel: "取消",
buttons: buttons
}, function(e) {
let _map = buttons[e.index - 1]
console.log("_map",_map)
console.log("platform",platform)
_this.openURL(_map, platform)
})
} else {
uni.showToast({
title: '请安装地图软件',
icon: 'none'
})
return
}
},
// 打开第三方程序实际应用
openURL(map, platform) {
console.log("2222")
const arr = wgs84_to_gcj02(this.startposition.lng, this.startposition.lat)
let _defaultUrl = {
android: {
"amap": `amapuri://route/plan/?dlat=${this.startposition.lat}&dlon=${this.startposition.lng}&dev=1&t=0`,
'qqmap': `qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&tocoord=${arr[1]},${arr[0]}&referer=JFNBZ-QLUWZ-MCPXU-76U2T-E5HPQ-AFB2G`,
'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=${this.startposition.lat},${this.startposition.lng}&coord_type=wgs84&src=andr.baidu.openAPIdemo`
},
}
let newurl = encodeURI(_defaultUrl[platform][map.name]);
console.log("newurl", newurl)
plus.runtime.openURL(newurl, function(res) {
console.log(res)
uni.showModal({
content: res.message
})
}, map.androidName ? map.androidName : '');
},
/**
* 点击事件-定位
* */
location(){
// 获取经纬度
uni.getLocation({
type: 'wgs84 ',
success: (res) => {
//console.log(res)
// 传递给renderj模块
this.valueChangeSign.type= "LOCATION"
this.valueChangeSign.flag = !this.valueChangeSign.flag
this.valueChangeSign.latitude = res.latitude//当前位置的纬度
this.valueChangeSign.longitude = res.longitude//当前位置的经度
}
});
},
/**
* 接受renderjs传过来的数据
*/
reciveMessage(data){
this.total = data;
console.log("total",this.total);
},
receiveMethod(){
console.log("获取方法");
}
}
}
</script>
<!-- 视图层 -->
<script module="ol" lang="renderjs" type="module">
//import 'ol/ol.css'// 真机-样式需要放在App.vue下面的style标签中，全局引用
import Map from 'ol/Map.js' // OpenLayers的主要类，用于创建和管理地图
import View from 'ol/View.js' // OpenLayers的视图类，定义地图的视图属性
import TileLayer from 'ol/layer/Tile.js'// OpenLayers的瓦片图层类
import XYZ from 'ol/source/XYZ.js'
import olsourceOSM from 'ol/source/OSM.js'
import {get as getProjection} from 'ol/proj.js';
import Feature from 'ol/Feature.js' // OpenLayers的要素类，表示地图上的一个对象或实体
import Point from 'ol/geom/Point.js' // OpenLayers的点几何类，用于表示点状的地理数据
import { Vector as VectorLayer } from 'ol/layer.js' // OpenLayers的矢量图层类，用于显示矢量数据
import { Vector as VectorSource } from 'ol/source.js' // OpenLayers的矢量数据源类，用于管理和提供矢量数据
import { Circle as CircleStyle, Style, Stroke, Fill, Icon } from "ol/style.js" // OpenLayers的样式类，用于定义图层的样式，包括圆形样式、基本样式、边框、填充和图标
import { ScaleLine, defaults as defaultControls, MousePosition } from 'ol/control.js'// OpenLayers的控件类，包括默认的控件集合和特定的全屏、鼠标位置、比例尺控件
import { transform } from 'ol/proj.js'// OpenLayers的投影转换函数，用于经纬度坐标和投影坐标之间的转换
import LineString from 'ol/geom/LineString.js' // OpenLayers的线几何类，用于表示线状的地理数据
import Polygon from "ol/geom/Polygon.js" // OpenLayers的多边形几何类，用于表示面状的地理数据
import ZoomSlider from 'ol/control/ZoomSlider.js';// 滑动放大缩小按钮
import FullScreen from 'ol/control/FullScreen.js';// 全屏按钮
import ZoomToExtent from 'ol/control/ZoomToExtent.js';// 范围
export default {
data () {
return {
map:null,
yxt:null,// 影像图
dzt:null,// 电子图
view:null,
count:0,
locationLayer:null,// 定位点图层
}
},
mounted(){
this.initMap();
console.log("mounted方法");
},
methods:{
/**
* @param {*} newValue 新的值或状态
* @param {*} oldValue 旧的值或状态
* @param {*} ownerInstance 拥有该数据或组件的实例
* @param {*} instance 当前操作的具体实例
*/
valueChange(newValue, oldValue, ownerInstance, instance){
console.log(newValue, oldValue, ownerInstance, instance);
// 下面的方法也好使
/* // 传递数值
this.$ownerInstance.callMethod('reciveMessage',this.count++);
// 传递map
this.$ownerInstance.callMethod('receiveMethod'); */
// 传递数值
ownerInstance.callMethod('reciveMessage',this.count++);
// 传递map
ownerInstance.callMethod('receiveMethod');
// 传递过来地值
const olType = newValue.type;// 类型
switch(olType){
case "LAYER_TITLE":// 底图切换
const olFlag = newValue.switchLayerFlag;// 切换图层布尔值
if(olFlag){
this.yxt.setVisible(true);
this.dzt.setVisible(false);
}else{
this.yxt.setVisible(false);
this.dzt.setVisible(true);
}
break;
case "ALL_MAP":
// 初始范围
this.goToExtent();
break;
case "LOCATION":
const olLongitude = newValue.longitude;//当前位置的经度
const olLatitude = newValue.latitude;//当前位置的纬度
this.renderLocation(olLongitude,olLatitude);
break;
}
},
// 初始化天地图
initMap(){
//天地图影像
const tdtYX = new TileLayer({
source: new XYZ({
url: 'http://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
projection: 'EPSG:3857',
crossOrigin: '*',
}),
visible:true,
})
this.yxt = tdtYX;
//天地图电子地图
const tdtDZ = new TileLayer({
source: new XYZ({
url: 'http://t2.tianditu.gov.cn/DataServer?T=vec_w &x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
projection: 'EPSG:3857',
}),
visible:true,
})
this.dzt = tdtDZ;
//天地图标注
const tdtBZ = new TileLayer({
source: new XYZ({
url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
projection: 'EPSG:3857',
}),
visible:true,
})
this.map = new Map({
target: 'map',
layers: [tdtYX,tdtDZ,tdtBZ],//[tdtYX, tdtBZ],
view: new View({
projection: 'EPSG:3857',
center: transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857'),
// center: [125.33,43.90],
zoom: 10,
minZoom: 0,// 最小缩放级别
maxZoom: 20, //最大缩放级别
constrainResolution: true,// 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
enableRotation: false,// 禁止地图旋转
}),
controls:defaultControls({
zoom:false,//不显示放大放小按钮
rotate:false,// 不显示指北针控件
attribution:false//不显示右下角的地图信息控件
}).extend([
// 比例尺
new ScaleLine({
//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
units: "metric"
})
])
})
// 事件
this.map.on("moveend",(e)=>{
console.log('地图移动', e);
// 获取当前缩放级别
var zoomLevel = this.map.getView().getZoom();
console.log('当前缩放级别：', zoomLevel);
});
// 渲染完成
this.map.on('rendercomplete', () => {
console.log('渲染完成')
});
// 点击事件
this.map.on('click', (e) => {
console.log('地图点击', e)
var coordinate = e.coordinate;
// 将投影坐标转换为经纬度坐标
var lonLatCoordinate = toLonLat(coordinate);
// 输出转换后的经纬度坐标
console.log('经纬度坐标：', lonLatCoordinate);
});
},
goToExtent(){// 初始范围
// 获取当前可见视图范围
//console.log(this.map.getView().calculateExtent());
// 设置中心点
this.map.getView().setCenter(transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857'));
// 设置层级
this.map.getView().setZoom(10);
},
renderLocation(longitude,latitude){
const geom = transform([longitude,latitude], 'EPSG:4326', 'EPSG:3857');
// 设置中心点定位-直接定位
//this.map.getView().setCenter(geom);
// 设置层级
//this.map.getView().setZoom(18);
// 设置中心点-过渡动画
this.map.getView().animate({
center:geom,// 中心点
zoom:18,// 层级
duration:1000// 持续时间
});
// 绘制点
const locationPoint = new Point(geom);
// 清除绘制点图层
this.map.removeLayer(this.locationLayer);
// 绘制定位点
// 设置点特征（Feature）
const pointFeature = new Feature({
title:"point",
geometry:locationPoint
});
// 设置特征样式(style)
pointFeature.setStyle(
new Style({
// 使用 CircleStyle 创建一个圆形的点
image:new CircleStyle({
// 点样式
fill:new Fill({
//color:"red",// 颜色
color: 'rgba(255,0,0,0.4)',
}),
// 点周边样式
stroke:new Stroke({
color: '#3399CC',
width: 1.25,
}),
radius:7,// 半径
}),
})
);
// 创建和添加特征到源（Source）
// VectorSource表示一个矢量要素源，它用于存储和显示地理数据。
const source = new VectorSource();
source.addFeature(pointFeature);
// 创建图层并设置源（Layer）
// VectorLayer表示一个矢量图层，它由一系列矢量要素（Feature）组成，用于在地图上显示地理数据。
this.locationLayer = new VectorLayer();
this.locationLayer.setSource(source);
this.map.addLayer(this.locationLayer);
},
}
}
</script>
<style scoped lang="scss">
/*去除顶部导航栏*/
*{margin:0;padding:0}
.map{
width:100vw;
height: 100vh;
position: relative;
z-index: 1;
.ol-zoomslider {
top: 7.5em;
left: .5em;
height: 200px;
}
.right-vertical-button{
position: absolute;
right: 0;
margin-top: 60rpx;
width: 80rpx;
z-index: 10;
.btn {
width: auto;
height: auto;
margin: 5px; /* 按钮间距 */
padding: 10px; /* 按钮内部填充 */
width: 80%; /* 按钮宽度 */
text-align: center; /* 按钮文字居中 */
}
}
.bottom-horizontal-button{
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30rpx;
width: 80rpx;
z-index: 10;
.btn {
width: auto;
height: auto;
margin: 5px; /* 按钮间距 */
padding: 10px; /* 按钮内部填充 */
width: 80%; /* 按钮宽度 */
text-align: center; /* 按钮文字居中 */
}
}
}
</style>备注：坐标转换工具 -- coordinate_transformation.js
代码：
//wgs84_to_gcj02.js文件
//地标 转 国测 常量
var x_PI = (3.14159265358979324 * 3000.0) / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0; //卫星椭球坐标投影到平面地图坐标系的投影因子。
var ee = 0.00669342162296594323; //椭球的偏心率。
var EARTHRADIUS = 6370996.81;
var MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0];
var LLBAND = [75, 60, 45, 30, 15, 0];
var MC2LL = [[1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 200.9824383106796, -187.2403703815547, 91.6087516669843, -23.38765649603339, 2.57121317296198, -0.03801003308653, 17337981.2], [-7.435856389565537e-9, 0.000008983055097726239, -0.78625201886289, 96.32687599759846, -1.85204757529826, -59.36935905485877, 47.40033549296737, -16.50741931063887, 2.28786674699375, 10260144.86], [-3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616, 59.74293618442277, 7.357984074871, -25.38371002664745, 13.45380521110908, -3.29883767235584, 0.32710905363475, 6856817.37], [-1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591, 40.31678527705744, 0.65659298677277, -4.44255534477492, 0.85341911805263, 0.12923347998204, -0.04625736007561, 4482777.06], [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062, 23.10934304144901, -0.00023663490511, -0.6321817810242, -0.00663494467273, 0.03430082397953, -0.00466043876332, 2555164.4], [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 7.47137025468032, -0.00000353937994, -0.02145144861037, -0.00001234426596, 0.00010322952773, -0.00000323890364, 826088.5]];
var LL2MC = [[-0.0015702102444, 111320.7020616939, 1704480524535203, -10338987376042340, 26112667856603880, -35149669176653700, 26595700718403920, -10725012454188240, 1800819912950474, 82.5], [0.0008277824516172526, 111320.7020463578, 647795574.6671607, -4082003173.641316, 10774905663.51142, -15171875531.51559, 12053065338.62167, -5124939663.577472, 913311935.9512032, 67.5], [0.00337398766765, 111320.7020202162, 4481351.045890365, -23393751.19931662, 79682215.47186455, -115964993.2797253, 97236711.15602145, -43661946.33752821, 8477230.501135234, 52.5], [0.00220636496208, 111320.7020209128, 51751.86112841131, 3796837.749470245, 992013.7397791013, -1221952.21711287, 1340652.697009075, -620943.6990984312, 144416.9293806241, 37.5], [-0.0003441963504368392, 111320.7020576856, 278.2353980772752, 2485758.690035394, 6070.750963243378, 54821.18345352118, 9540.606633304236, -2710.55326746645, 1405.483844121726, 22.5], [-0.0003218135878613132, 111320.7020701615, 0.00369383431289, 823725.6402795718, 0.46104986909093, 2351.343141331292, 1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45]];
//判断是否在国内，在中国国内的经纬度才需要做偏移
function out_of_china(lng, lat) {
return (
lng < 72.004 ||
lng > 137.8347 ||
(lat < 0.8293 || lat > 55.8271 || false)
);
}
//转化经度
function transformlng(lng, lat) {
var ret =
300.0 +
lng +
2.0 * lat +
0.1 * lng * lng +
0.1 * lng * lat +
0.1 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * PI) +
20.0 * Math.sin(2.0 * lng * PI)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lng * PI) +
40.0 * Math.sin((lng / 3.0) * PI)) *
2.0) /
3.0;
ret +=
((150.0 * Math.sin((lng / 12.0) * PI) +
300.0 * Math.sin((lng / 30.0) * PI)) *
2.0) /
3.0;
return ret;
}
//转化纬度
function transformlat(lng, lat) {
var ret = -100.0 +
2.0 * lng +
3.0 * lat +
0.2 * lat * lat +
0.1 * lng * lat +
0.2 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * PI) +
20.0 * Math.sin(2.0 * lng * PI)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lat * PI) +
40.0 * Math.sin((lat / 3.0) * PI)) *
2.0) /
3.0;
ret +=
((160.0 * Math.sin((lat / 12.0) * PI) +
320 * Math.sin((lat * PI) / 30.0)) *
2.0) /
3.0;
return ret;
}
function getLoop(lng, min, max){
while (lng > max) {
lng -= max - min;
}
while (lng < min) {
lng += max - min;
}
return lng;
}
function getRange(lat, min, max) {
if (min != null) {
lat = Math.max(lat, min);
}
if (max != null) {
lat = Math.min(lat, max);
}
return lat;
}
//wgs84 to gcj02 地球坐标系 转 火星坐标系
export function wgs84_to_gcj02(lng, lat) {
if (out_of_china(lng, lat)) {
return [lng, lat];
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 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);
dlng =
(dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [mglng, mglat];
}
}
//gcj02 to wgs84 火星坐标系 转 地球坐标系
export function gcj02_to_wgs84(lng, lat) {
if (out_of_china(lng, lat)) {
return [lng, lat]
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 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);
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
mglat = lat + dlat;
mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat]
}
}
// wgs84 to bd09 地球坐标系转百度09坐标系
export function wgs84_to_bd09(lng, lat){
//先由经纬转火星
var arr = wgs84_to_gcj02(lng,lat);
//再将火星转百度
arr = gcj02_to_bd09(arr[0], arr[1]);
return arr;
}
// 火星坐标系gcj02 to 百度坐标系bd09
// 例如 - 谷歌、高德 转 百度
export function gcj02_to_bd09(lng, lat){
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return [bd_lng, bd_lat];
}
//百度经纬度转百度墨卡托
export function bd_to_bdmkt(lng, lat){
var cF = null;
lng = getLoop(lng, -180, 180);
lat = getRange(lat, -74, 74);
for (var i = 0; i < LLBAND.length; i++) {
if (lat >= LLBAND[i]) {
cF = LL2MC[i];
break;
}
}
if (cF != null) {
for (var i = LLBAND.length - 1; i >= 0; i--) {
if (lat <= -LLBAND[i]) {
cF = LL2MC[i];
break;
}
}
}
lng = cF[0] + cF[1] * Math.abs(lng);
var cC = Math.abs(lat) / cF[9];
lat = cF[2] + cF[3] * cC + cF[4] * cC * cC + cF[5] * cC * cC * cC + cF[6] * cC * cC * cC * cC + cF[7] * cC * cC * cC * cC * cC + cF[8] * cC * cC * cC * cC * cC * cC;
lng *= (lng < 0 ? -1 : 1);
lat *= (lat < 0 ? -1 : 1);
return [lng, lat];
}
![Java-学生管理系统[初阶]](https://i-blog.csdnimg.cn/direct/8a01e44301c24a468a7a1a15a54efd69.png)
