web-vue2
Version:
web ui for vue2
373 lines (372 loc) • 18.4 kB
JavaScript
import {FullScreen, MousePosition, ScaleLine, Zoom, ZoomSlider, ZoomToExtent} from 'ol/control';
import {Group as LayerGroup, Tile as TileLayer,Vector as VectorLayer} from 'ol/layer';
import {Cluster, Vector as VectorSource, Vector as Vector} from 'ol/source';
import WKT from "ol/format/WKT";
import XYZ from "ol/source/XYZ";
import core 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";
import Style from "ol/style/Style";
import CircleStyle from "ol/style/Circle";
import Fill from "ol/style/Fill";
import {extend} from "ol/extent";
import {fromExtent} from "ol/geom/Polygon";
import Stroke from "ol/style/Stroke";
import Rotate from "ol/control/Rotate";
import Feature from "ol/Feature";
export default {
data() {
return {
attributions:
'龙岩新零科技有限公司 ©版权所有 ' +
' <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(),
coordinateSystem:"EPSG:4326",
projection:"EPSG:3857",
encrypt:true,//显示的数据是否已经中国地区加密
/**
* 扩展的地图工具库
*/
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({})
,new Rotate({tipLabel:"点击恢复正北"})
],interactions:[
new RightRotate({condition:mouseRightButton})
],baseLayerGroup:null,
serviceLayerGroup:null,
registerLayers:{},
zoomToExtent:null
}
},methods:{
positionFormat(coordinate,e){
let result="经度:{0} 纬度:{1}".format(coordinate, true, 4);
this.controls[1].placeholder_=result;
return result;
} ,getDefaultLayers(){
this.baseLayerGroup=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})
)
]})
]});
this.serviceLayerGroup=new LayerGroup({name:"业务图层",code:"service",layers:[]});
let layers=[this.baseLayerGroup,this.serviceLayerGroup];
return layers;
},loadTileSetting: function(address, options, xyz_options) {
let defaults = {minZoom: 3, maxZoom: 18, minZ: 3, maxZ: 18};
let xyzSource = core.extend({
urls: typeof address == "string" ? [address] : address.urls,
}, xyz_options)
let source = new XYZ(xyzSource);
let setting = core.extend({}, defaults, {
source: source,
}, options);
return setting;
},wrapLonLat: function(coordinate) {
return this.wrapCoordinate(coordinate, this.coordinateSystem);
},wrapProjection: function(coordinate) {
return this.wrapCoordinate(coordinate, this.projection);
},/**
* 修正指定坐标系
* @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;
},addVectorLayerByJson(options){
this.$http(this.$store.state.api.json.loadData + options.jid,options.params).then((res) => {
if(res.code===0){
options.data=res.data;
this.addVectorLayer(options);
// let extent;
// let features= res.data.map((item,index)=>{
// let feature = this.format.readFeature(item.geom, {
// dataProjection: this.coordinateSystem,
// featureProjection: this.projection,
// });
// feature.data=item;
// if(options.zoomToExtent) {
// if (extent == null) {
// extent = feature.getGeometry().getExtent();
// } else {
// extent = extend(extent, feature.getGeometry().getExtent());
// }
// }
// return feature;
// })
// let source=new Vector({
// features: features
// });
// if(options.distance>0){
// source = new Cluster({
// distance: options.distance,
// minDistance:options.minDistance||0,
// source: source
// });
//
// }
// let setting={source:source};
// if(options.style){
// setting.style=options.style;
// }else{
// setting.style= (feature, resolution)=>{
// //增加对剔除模式的支持
// if(feature.data==null&&feature.values_&&feature.values_.features&&feature.values_.features.length){
// feature=feature.values_.features[0];
// }
// if(feature.data&&feature.data.color) {
// let style = new Style(
// {
// image: new CircleStyle({
// radius: 6,
// fill: new Fill({
// color: feature.data.color||feature.data.fill || 'orange',
// }),
// stroke:new Stroke({color:feature.data.store || '#46a6ff'})
// })
// });
// return style;
// }
// }
// }
// let layer = new VectorLayer(setting);
// if(options.code){
// this.registerLayers[options.code]=layer;
// }
// this.serviceLayerGroup.getLayers().push(layer);
// if(options.zoomToExtent){
// this.defaultExtent=extent;
// this.map.getView().fit(extent||this.map.getView().getProjection().getExtent(),
// {padding:options.padding||[100,100,100,100]});
// if(this.zoomToExtent==null){
// this.zoomToExtent=new ZoomToExtent(
// {extent:this.map.getView().calculateExtent(),tipLabel:"点击恢复默认视野",label:"默"});
// this.map.getControls().push(this.zoomToExtent);
// }else{ //处理多次设置需要默认视野的情况，以最后一次为准
// this.zoomToExtent.setExtent(this.map.getView().calculateExtent())
// }
// }
}
})
},addVectorLayer(options){
let extent;
let features= options.data.map((item,index)=>{
let feature;
if(options.encrypt) {
feature = this.format.readFeature(item.geom, {
dataProjection: this.coordinateSystem,
featureProjection: this.coordinateSystem,
});
//中国地区转换
feature.getGeometry().setCoordinates(gps.gcj_encrypt(feature.getGeometry().getCoordinates()));
//投影转换
feature.getGeometry().setCoordinates(this.fromLonLat(feature.getGeometry().getCoordinates()));
}else{
feature = this.format.readFeature(item.geom, {
dataProjection: this.coordinateSystem,
featureProjection: this.projection,
});
}
feature.data=item;
if(item.id)
feature.setId(item.id)
if(options.zoomToExtent) {
if (extent == null) {
extent = feature.getGeometry().getExtent();
} else {
extent = extend(extent, feature.getGeometry().getExtent());
}
}
return feature;
})
let source=new Vector({
features: features
});
if(options.distance>0){
source = new Cluster({
distance: options.distance,
minDistance:options.minDistance||0,
source: source
});
}
let setting={source:source};
if(options.style){
setting.style=options.style;
}else{
setting.style= (feature, resolution)=>{
//增加对剔除模式的支持
if(feature.data==null&&feature.values_&&feature.values_.features&&feature.values_.features.length){
feature=feature.values_.features[0];
}
if(feature.data&&feature.data.color) {
let style = new Style(
{
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: feature.data.color||feature.data.fill || 'orange',
}),
stroke:new Stroke({color:feature.data.store || '#46a6ff'})
})
});
return style;
}
}
}
let layer = new VectorLayer(setting);
if(options.code){
this.registerLayers[options.code]=layer;
}
this.serviceLayerGroup.getLayers().push(layer);
if(options.zoomToExtent){
this.defaultExtent=extent;
this.map.getView().fit(extent||this.map.getView().getProjection().getExtent(),
{padding:options.padding||[100,100,100,100]});
if(this.zoomToExtent==null){
this.zoomToExtent=new ZoomToExtent(
{extent:this.map.getView().calculateExtent(),tipLabel:"点击恢复默认视野",label:"默"});
this.map.getControls().push(this.zoomToExtent);
}else{ //处理多次设置需要默认视野的情况，以最后一次为准
this.zoomToExtent.setExtent(this.map.getView().calculateExtent())
}
}
},getLayer(code){
return this.registerLayers[code];
},handlePopup(features,coordinate,property="hoverable"){
if(features.length){
//增加对剔除模式的支持
for(let i=0;i<features.length;i++) {
let feature = features[i];
if (feature.data == null && feature.values_ && feature.values_.features && feature.values_.features.length) {
feature = feature.values_.features[0];
}
if (feature.data && feature.data[property] && feature.data.content) {
if (this.content == null) {
this.content = document.getElementById(this.name + '_popup_content');
}
this.content.innerHTML = feature.data.content;
this.overlay.setPosition(coordinate);
if (this.closer == null) {
this.closer = document.getElementById(this.name + '_popup_closer');
this.closer.onclick = () => {
this.overlay.setPosition(undefined);
this.closer.blur();
return false;
};
}
}
}
}
},flyTo(coordinate){
let geometry= new Point(coordinate);
this.map.getView().fit(geometry,{maxZoom:10});
}
}
}