web-vue2
Version:
web ui for vue2
167 lines • 8.01 kB
JavaScript
import {FullScreen, MousePosition, ScaleLine, Zoom, ZoomSlider} from 'ol/control';
import {Group as LayerGroup, Tile as TileLayer,Vector as VectorLayer} from 'ol/layer';
import WKT from "ol/format/WKT";
import XYZ from "ol/source/XYZ";
import d from "../../utils/core";
import {fromLonLat,toLonLat} from "ol/proj"
import gps from './utils/GPS';
import {mouseRightButton} from "./interactions/RightRotate"
import RightRotate from "./interactions/RightRotate";
import BaseMapControl from "./controls/BaseMapControl";
import Attribution from "ol/control/Attribution";
export default {
data() {
return {
attributions:
'<a href="https://plat.x597.com/">龙岩市天博信息技术有限公司</a> ©版权所有 ' +
' <a href="https://www.tianditu.gov.cn/">' +
'天地图 国家地理信息公共服务平台</a> 提供数据支持',
defaultMap:"TDT_SATELLITE",
/**
* 地图底图
*/
sources: {
TDT_MAP: '/map/wmts?t=tdtm&x={x}&y={y}&z={z}',
TDT_MAP_LABEL: '/map/wmts?t=tdtml&x={x}&y={y}&z={z}',
TDT_SATELLITE: "/map/wmts?t=tdts&x={x}&y={y}&z={z}",
TDT_SATELLITE_LABEL: "/map/wmts?t=tdtsl&x={x}&y={y}&z={z}",
TDT_TER: "/map/wmts?t=tdtt&x={x}&y={y}&z={z}",
TDT_TER_LABEL: "/map/wmts?t=tdttl&x={x}&y={y}&z={z}",
AMAP:"/map/wmts?t=amap&x={x}&y={y}&z={z}",
},
format: new WKT(),
/**
* 扩展的地图工具库
*/
controls:[
new FullScreen({
source: 'fullscreen',tipLabel:"进入/退出全屏"
}),new MousePosition({
coordinateFormat:this.positionFormat,//重写显示格式
projection: 'EPSG:4326',//转换的目标投影
className: 'position',//使用的样式
// target: document.getElementById('mouse-position'),
// renderOnMouseOut:true,//鼠标离开后是否仍显示
placeholder:"鼠标位置"
}),new ScaleLine({units: 'metric'})
,new Zoom({zoomInTipLabel:"放大",zoomOutTipLabel:"缩小"})
,new ZoomSlider(),new Attribution({tipLabel:"版权信息"})
,new BaseMapControl({})
],interactions:[
new RightRotate({condition:mouseRightButton})
]
}
},methods:{
positionFormat(coordinate,e){
let result="经度:{0} 纬度:{1}".format(gps.gcj_decrypt(coordinate), true, 4);
this.controls[1].placeholder_=result;
return result;
} ,getDefaultLayers(){
let layers=[new LayerGroup({name:"底图",code:"base",layers:[
new LayerGroup({name:"电子地图",code:"map", layers:[
new TileLayer(
this.loadTileSetting(this.baseURL+this.sources["TDT_MAP"],
{},{attributions:this.attributions})
),
new TileLayer(
this.loadTileSetting(this.baseURL+this.sources["TDT_MAP_LABEL"],
{},{attributions:this.attributions})
)
]}),
new LayerGroup({name:"遥感地图",code:"img",visible:false,layers:[
new TileLayer(
this.loadTileSetting(this.baseURL+this.sources["TDT_SATELLITE"],
{},{attributions:this.attributions})
),
new TileLayer(
this.loadTileSetting(this.baseURL+this.sources["TDT_SATELLITE_LABEL"],
{},{attributions:this.attributions})
)
]}),
new LayerGroup({name:"地形地图",code:"ter",visible:false,layers:[
new TileLayer(
this.loadTileSetting(this.baseURL+this.sources["TDT_TER"],
{},{attributions:this.attributions})
),
new TileLayer(
this.loadTileSetting(this.baseURL+this.sources["TDT_TER_LABEL"],
{},{attributions:this.attributions})
)
]})
]})];
return layers;
},loadTileSetting: function(address, options, xyz_options) {
let defaults = {minZoom: 3, maxZoom: 18, minZ: 3, maxZ: 18};
let xyzSource = d.extend({
urls: typeof address == "string" ? [address] : address.urls,
}, xyz_options)
let source = new XYZ(xyzSource);
let setting = d.extend({}, defaults, {
source: source,
}, options);
return setting;
},wrapLonLat: function(coordinate) {
return this.wrapCoordinate(coordinate, "EPSG:4326");
},wrapProjection: function(coordinate) {
return this.wrapCoordinate(coordinate, "EPSG:3857");
},/**
* 修正指定坐标系
* @param coordinate
* @param width 坐标系的宽度，默认为墨卡托投影宽度
* @param height 坐标系的高度，默认为墨卡托投影高度
* @returns {*}
*/
wrapCoordinate: function(coordinate, code) {
if (code == null || code.indexOf("4326") >= 0) {//经纬度
return this.toLonLat(this.fromLonLat(coordinate))
} else {//投影
return this.fromLonLat(this.toLonLat(coordinate))
}
},wrapCoordinates: function(coordinates, code) {
let result = [];
for (let i = 0; i < coordinates.length; i++) {
if (typeof coordinates[i][0] == "object") //递归处理
result[i] = this.wrapCoordinates(coordinates[i], code);
else
result[i] = this.wrapCoordinate(coordinates[i], code)
}
return result;
},
wrapGeometry: function(geometry, code) {
let coordinates = geometry.getCoordinates();
let result = [];
if (typeof coordinates[0] == "object")
result = this.wrapCoordinates(coordinates, code);
else
result = this.wrapCoordinate(coordinates, code);
geometry.setCoordinates(result);
return geometry;
},
wrapExtent: function(extent, code) {
let result = [];
for (let i = 0; i < extent.length; i += 2) {
let coord = this.wrapCoordinate([extent[i], extent[i + 1]], code);
result[i] = coord[0];
result[i + 1] = coord[1];
}
return result;
}, getWrapExtent: function(map) {
return this.wrapExtent(map.getView().calculateExtent(), map.getView().getProjection().getCode());
}, fromLonLat: function(coordinate) {
return fromLonLat(coordinate);
}, toLonLat: function(coordinate) {
return toLonLat(coordinate);
}, fromLonLats: function(coordinates) {
let result = [];
for (let i = 0; i < coordinates.length; i++) {
result[i] = fromLonLat(coordinates[i]);
}
return result;
}, toLonLats: function(coordinates) {
let result = [];
for (let i = 0; i < coordinates.length; i++)
result[i] = toLonLat(coordinates[i]);
return result;
}
},
}