341 lines
9.5 KiB
JavaScript
341 lines
9.5 KiB
JavaScript
/*
|
||
* @Descripttion:
|
||
* @version: 1.0
|
||
* @Author: zhangti
|
||
* @Date: 2019-11-27 10:20:37
|
||
* @LastEditors : sueRimn
|
||
* @LastEditTime : 2020-01-17 17:38:21
|
||
*/
|
||
|
||
//常用配置
|
||
const CODEDIR = '/map/2d/code'; //code
|
||
const STATICDIR = '/map/2d/static'; //static 静态资源
|
||
const DATADIR = '/map/2d/data'; //data
|
||
const LIBSDIR = '/map/libs'; //lib包
|
||
/**
|
||
* 二维地图封装接口类
|
||
* 不含实际业务操作
|
||
* 辅助类
|
||
*/
|
||
import Tools from './code/Tools.js';
|
||
import HTML from './code/Html.js';
|
||
export default class OV {
|
||
|
||
static OSM_LAYER = {
|
||
layerName: 'OSM',
|
||
layerType: 'OSM',
|
||
isDefault: true,
|
||
opaque: true, //图层是否不透明
|
||
layerUrl: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||
}
|
||
|
||
static GOOGLE_LAYER = {
|
||
layerName: 'Google',
|
||
layerType: 'Google',
|
||
isDefault: true,
|
||
opaque: true, //图层是否不透明
|
||
layerUrl: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
|
||
}
|
||
|
||
static GAODE_LAYER = {
|
||
layerName: 'GaoDe',
|
||
layerType: 'GaoDe',
|
||
isDefault: true,
|
||
opaque: true, //图层是否不透明
|
||
layerUrl: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
|
||
}
|
||
|
||
constructor(dom,initOption){
|
||
if(!dom){
|
||
return false;
|
||
}
|
||
this.layers = [
|
||
OV.OSM_LAYER,
|
||
OV.GOOGLE_LAYER,
|
||
OV.GAODE_LAYER
|
||
]
|
||
return this.init(dom,initOption)
|
||
}
|
||
|
||
/**
|
||
* 加载资源
|
||
*/
|
||
init(dom,initOption){
|
||
return new Promise((resolve,reject)=>{
|
||
new Read().load((res) =>{
|
||
console.log(res);
|
||
this.initolMap(dom,initOption);
|
||
|
||
resolve(this);//返回当前对象
|
||
});
|
||
})
|
||
}
|
||
/**
|
||
* 初始化地图
|
||
* @param {*} dom
|
||
* @param {*} opt
|
||
*/
|
||
initolMap(dom,opt){
|
||
let baseLayers = opt.layer ?opt.layer: this.layers;
|
||
this.omap = new HMap(dom, {
|
||
controls: {
|
||
loading: opt.loading == undefined? true : opt.loading,
|
||
zoomSlider: opt.zoomSlider == undefined? true : opt.zoomSlider,
|
||
fullScreen: opt.fullScreen == undefined? true : opt.fullScreen,
|
||
rotate: opt.rotate == undefined? true : opt.rotate,
|
||
zoomCtl: opt.zoomCtl == undefined? false : opt.zoomCtl,
|
||
overviewMap:opt.overviewMap == undefined? false : opt.overviewMap,
|
||
},
|
||
interactions: {
|
||
shiftDragZoom: false
|
||
},
|
||
view: {
|
||
center: opt.center == undefined?[101.4173, 37.9204]:opt.center,
|
||
projection: 'EPSG:4326',
|
||
zoom: opt.zoom == undefined? 5 : opt.zoom
|
||
},
|
||
baseLayers: baseLayers
|
||
});
|
||
}
|
||
/**
|
||
* 初始化标绘
|
||
*/
|
||
initPlot(){
|
||
/* eslint-disable-next-line */
|
||
this.plot = new olPlot(this.omap.getMap(), {
|
||
zoomToExtent: true
|
||
});
|
||
//事件监听
|
||
this.omap.on('click',(event)=>{
|
||
const feature = this.omap.forEachFeatureAtPixel(event.pixel, function (feature) {
|
||
return feature
|
||
})
|
||
if (feature && feature.get('isPlot') && !this.plot.plotDraw.isDrawing()) {
|
||
this.plot.plotEdit.activate(feature)
|
||
} else {
|
||
this.plot.plotEdit.deactivate()
|
||
}
|
||
});
|
||
// 绘制结束后，添加到FeatureOverlay显示。
|
||
this.plot.plotDraw.on('drawEnd', (event)=>{
|
||
const feature = event.feature
|
||
this.plot.plotEdit.activate(feature)
|
||
})
|
||
this.plot.plotDraw.on('active_textArea', (event)=> {
|
||
const style = this.plot.plotUtils.getPlotTextStyleCode(event.overlay)
|
||
console.log(style)
|
||
})
|
||
// 指定标绘类型，开始绘制。
|
||
this.plot.activate = function (type){ //plot对象
|
||
this.plotEdit.deactivate()
|
||
this.plotDraw.active(type)
|
||
}
|
||
this.plot.getFeatures = function(){ //plot对象
|
||
const features = this.plotUtils.getFeatures()
|
||
console.log(JSON.stringify(features))
|
||
this.plotUtils.removeAllFeatures()
|
||
this.plotEdit.deactivate()
|
||
this.plotUtils.addFeatures(features)
|
||
};
|
||
|
||
return this.plot;
|
||
}
|
||
/**
|
||
* 底图切换
|
||
*/
|
||
layerSwitch(){
|
||
this.omap.on('loadMapSuccess', (event) => {
|
||
if (event) {
|
||
var config_ = [
|
||
{
|
||
layerName: 'GaoDe',
|
||
name: '高德地图',
|
||
icon: STATICDIR + '/img/maptype_vector.png'
|
||
},
|
||
{
|
||
layerName: 'OSM',
|
||
name: 'OSM',
|
||
icon: STATICDIR + '/img/maptype_pano.png'
|
||
},
|
||
{
|
||
layerName: 'Google',
|
||
name: '谷歌地图',
|
||
icon: STATICDIR + '/img/maptype_yunran.png'
|
||
}
|
||
]
|
||
var LayerSwitcher = new ol.control.LayerSwitcher({
|
||
itemWidth: 86,
|
||
itemHeight: 60,
|
||
layers: config_
|
||
})
|
||
this.omap.addControl(LayerSwitcher)
|
||
var tt = this.omap.getLayersArrayByKeyValue('isBaseLayer', true) // polyfill
|
||
LayerSwitcher.baseLayers_ = tt
|
||
console.log(tt)
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 比例尺
|
||
*/
|
||
ScaleLineH(){
|
||
var controlScaleLine = new ol.control.ScaleLineH({
|
||
units: 'metric_cn'
|
||
})
|
||
this.omap.addControl(controlScaleLine)
|
||
}
|
||
/**
|
||
* 鼠标移动信息
|
||
*/
|
||
mouseInfo(){
|
||
var controlMousePosition = new ol.control.MousePositionH({})
|
||
this.omap.addControl(controlMousePosition)
|
||
}
|
||
/**
|
||
* 地图对比
|
||
*/
|
||
compareLayer(){
|
||
var layer1 = this.omap.getLayerByLayerName('GaoDe')
|
||
var layer2 = this.omap.getLayerByLayerName('Google')
|
||
var olControlCompareLayer = new ol.control.CompareLayer(layer1, layer2)
|
||
this.omap.addControl(olControlCompareLayer)
|
||
}
|
||
/**
|
||
* 量测
|
||
*/
|
||
initMeasure(){
|
||
var measureTool = new ol.interaction.MeasureTool()
|
||
this.omap.addInteraction(measureTool)
|
||
return measureTool;
|
||
}
|
||
/**
|
||
* 加载geojson数据
|
||
* 自定义
|
||
*/
|
||
loadGeoJson(url,opt){
|
||
let _self = this,data = [];
|
||
let draw = function (event) {
|
||
var context = event.context;
|
||
context.save();
|
||
context.globalAlpha = 1;
|
||
context.fillStyle = '#08304b';
|
||
for (var i = 0; i < data.length; i++) {
|
||
var coords = data[i].geometry.coordinates[0];
|
||
for (let j = 0; j < coords.length; j++) {
|
||
const point = _self.omap.getPixelFromCoordinate(ol.proj.transform([coords[j][1], coords[j][0]], 'EPSG:4326', 'EPSG:3857'));
|
||
if (j === 0) {
|
||
context.beginPath();
|
||
context.moveTo(point[0], point[1]);
|
||
} else {
|
||
context.lineTo(point[0], point[1]);
|
||
}
|
||
}
|
||
context.fill();
|
||
}
|
||
context.restore();
|
||
}
|
||
let canvas = new ol.layer.CanvasLayer({
|
||
map: _self.omap.getMap(),
|
||
projection: 'EPSG:3857',
|
||
render: draw
|
||
});
|
||
fetch(DATADIR + url, {method: 'GET'}).then(function(response) {
|
||
return response.json();
|
||
}).then(function(json) {
|
||
data = json.features;
|
||
_self.omap.addLayer(canvas);
|
||
}).catch(function (error) {
|
||
console.error(error)
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 场景树
|
||
* @param {c} trees
|
||
*/
|
||
sceneTree(trees){
|
||
if(this.Tools.nullBool(trees)){
|
||
console.log("使用默认场景!");
|
||
return false;
|
||
}
|
||
//生成底图切换
|
||
if(trees.layerSwitch != undefined){
|
||
if(trees.layerSwitch){
|
||
this.mapmap.layerSwitch();
|
||
}
|
||
}
|
||
//鹰眼
|
||
if(trees.scaleLineH != undefined){
|
||
if(trees.scaleLineH){
|
||
this.mapmap.ScaleLineH();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* @file ready
|
||
* @version 1.0
|
||
* ready 类
|
||
* 加载异步资源
|
||
* */
|
||
var $self; //当前页面
|
||
class Read {
|
||
static URLS = {
|
||
useJS : [
|
||
CODEDIR + '/ol-plot.js',
|
||
LIBSDIR + '/jquery/3.1.1/jquery.min.js',
|
||
LIBSDIR + '/dat.gui.min.js',
|
||
LIBSDIR + '/JSLite.js'
|
||
|
||
],
|
||
useCSS : [
|
||
STATICDIR + '/css/ol-plot.css',
|
||
STATICDIR + '/css/iconfont.css',
|
||
]
|
||
}
|
||
constructor(){
|
||
/**
|
||
* 初始化
|
||
*/
|
||
this.Tools = new Tools();
|
||
this.Html = new HTML();
|
||
$self = this;
|
||
}
|
||
|
||
|
||
/**
|
||
* 加载资源方案
|
||
* @param {*} resolve
|
||
* @param {*} reject
|
||
*/
|
||
loadUse(resolve, reject){
|
||
$self.Tools.arrForEach(Read.URLS.useCSS, function (url, index) {
|
||
$self.Html.loadCSS(url);
|
||
});
|
||
$self.Tools.arrForEach(Read.URLS.useJS, function (url, index) {
|
||
$self.Html.loadJS(url);
|
||
if(index == Read.URLS.useJS.length - 1){
|
||
setTimeout(() => {
|
||
resolve('-- 2d load --'); //结束出发回调事件
|
||
}, 100);
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 加载
|
||
*/
|
||
load(call){
|
||
let pro1 = new Promise((resolve, reject) => {
|
||
this.Html.loadCSS(STATICDIR + '/css/hmap.css');
|
||
let map = this.Html.loadJS(CODEDIR + '/hmap.js');
|
||
map.onload = function(){resolve('loadOl');}
|
||
});
|
||
pro1.then(res => {
|
||
setTimeout(() => {
|
||
let pro2 = new Promise(this.loadUse);
|
||
pro2.then((res)=>{call(res)});
|
||
},50)
|
||
});
|
||
}
|
||
|
||
}; |