/*
* @Author: Yang Yunfeng
* @Date: 2021-06-03 11:01:43
* @LastEditTime: 2023-02-28 14:48:31
* @LastEditors: dinglizu
* @Description: ol map initialization
*/
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import TileLayer from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import {
defaults as defaultControls
} from "ol/control";
Map.prototype.getLayerByProp = function getLayerByProp(key, value) {
return this. getLayers()
.getArray()
.filter(layer => layer.get(key) === value);
};
// Load Tiantu map service
const KEY = "af76e2d81e4d0b03e7c63a222d96a6bb";
// load wmts layer
function crtLayerWMTS() {
const layer = new TileLayer({
source: new WMTS({
name: "",
// http://123.249.117.7:8040/geometa-subscribe/gwc/demo/basemaphebi?gridSet=EPSG:4326_basemaphebi &format=image/png
// http://123.249.117.7:8040/geometa-subscribe/gwc/demo/basemap?gridSet=EPSG:4326_basemap &format=image/png
url: "http://123.249.117.7:8040/geometa-subscribe/gwc/service/wmts",
layer: "basemaphebi",
matrixSet: "EPSG:4326_basemaphebi",
style: "default",
version: "1.0.0",
format: "image/png",
wrapX: true,
tileGrid: new WMTSTileGrid({
tileSize: [256, 256],
extent: [-180.0, -90.00000000000006, 180.0000000000001, 90.0],
origin: [-180.0, 90.0],
resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E -5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3521761266]2
matrixIds: ['EPSG:4326_basemaphebi:0', 'EPSG:4326_basemaphebi:1', 'EPSG:4326_basemaphebi:2', 'EPSG:4326_basemaphebi:3', 'EPSG:4326_basemaphebi:4', 'EPSG:4326_basemaphebi:5' , 'EPSG:4326_basemaphebi:6', 'EPSG:4326_basemaphebi:7', 'EPSG:4326_basemaphebi:8', 'EPSG:4326_basemaphebi:9', 'EPSG:4326_basemaphebi:10', 'EPSG:4326_basemaphebi:11', ' EPSG:4326_basemaphebi:12', 'EPSG:4326_basemaphebi:13', 'EPSG:4326_basemaphebi:14', 'EPSG:4326_basemaphebi:15', 'EPSG:4326_basemaphebi:16', 'EPSG:4326_basemaphebi:17', 'EPSG: 4326_basemaphebi:18', 'EPSG:4326_basemaphebi:19', 'EPSG:4326_basemaphebi:20', 'EPSG:4326_basemaphebi:21']
})
}),
// zIndex: 1,
// visible: true,
id: "baseSystemHb"
});
return layer;
}
// load xyz map service
function crtlayerXYZ(id, url, visible, tileUrlFunction = function () {}) {
const layer = new TileLayer({
source: new XYZ({
url,
tileUrlFunction
}),
visible,
id
});
return layer;
}
// Tiantu map url
function tianDiTuUrl() {
// vector map
let vector = `https://t2.tianDiTu.gov.cn/vec_w/wmts?SERVICE=WMTS & amp;REQUEST=GetTile & amp;VERSION=1.0.0 & amp;LAYER=vec & amp;STYLE=default & amp;TILEMATRIXSET=w & amp;FORMAT=tiles & amp;TILECOL={x} & amp;TILEROW={y} & amp;TILEMATRIX={z} & amp;tk=${KEY}`;
// image map
let raster = `https://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS & amp;REQUEST=GetTile & amp;VERSION=1.0.0 & amp;LAYER=img & amp;STYLE=default & amp;TILEMATRIXSET=w & amp;FORMAT=tiles & amp;TILECOL={x} & amp;TILEROW={y} & amp;TILEMATRIX={z} & amp;tk=${KEY}`;
// terrain map
let topography = `https://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS & amp;REQUEST=GetTile & amp;VERSION=1.0.0 & amp;LAYER=ter & amp;STYLE=default & amp;TILEMATRIXSET=w & amp;FORMAT=tiles & amp;TILECOL={x} & amp;TILEROW={y} & amp;TILEMATRIX={z} & amp;tk=${KEY}`;
return {
vector,
raster,
topography
};
}
//Basemap
function initBase(id) {
const layer = new TileLayer({
source: new XYZ({
url: "http://222.143.32.185/arcgis/rest/services/huizhou/huizhou/MapServer/tile/{z}/{y}/{x}",
projection: "EPSG:3857"
}),
visible: true,
id
});
return layer;
}
export default function mapInit(id, option = {}) {
const tianDiTu = tianDiTuUrl();
const tileUrlFunction = function (xyz) {
const z = xyz[0];
const x = xyz[1];
const y = xyz[2];
return `https://rt1.map.gtimg.com/realtimerender?z=${z} &x=${x} &y=${y} &type=vector &style =0 & amp;key=KSMBZ-3SMCV-LTYPU-UPYHY-GI2WF-UWBXB`;
};
const map = new Map({
layers: [
// crtlayerXYZ("VECTOR", tianDiTu.vector, false, tileUrlFunction),
crtlayerXYZ("RASTER", tianDiTu.raster, true, tileUrlFunction),
// crtlayerXYZ("TOPOGRAPHY", tianDiTu.topography, false, tileUrlFunction),
crtLayerWMTS(),
],
target: id,
view: new View({
projection: "EPSG:4326",
center: [114.35839687284109, 35.68840803799298],
zoom: 10,
maxZoom: 18,
...option
}),
controls: defaultControls({
zoom: false,
rotate: false,
attribution: false
})
});
return map;
}
// If you load the layer separately, use the following method
// load wms layer
import { TileWMS } from 'ol/source'
import Feature from 'ol/Feature'
import VectorSource from 'ol/source/Vector'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'
import MultiPolygon from 'ol/geom/MultiPolygon.js';
import MultiLineString from 'ol/geom/MultiLineString.js';
import Polygon from 'ol/geom/Polygon.js';
import Point from 'ol/geom/Point'
import Icon from 'ol/style/Icon'
// load wms layer
export function crtLayerWMS(map,id){
const layers = map. getLayers(). getArray()
let layer = layers. find((item) => item. values_. id === id)
if (layer) {
layer. getSource(). clear()
layer. setVisible(true)
} else{
// WMS layer object
var wmsService = new TileLayer({
source: new TileWMS({
url: 'http://123.249.117.7:8040/geometa-subscribe/geometa/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'geometa:geo_forehydrographicnet_b', //Layer name published by the service
tilesOrigin: 104.18060302734375 + "," + 30.750732421875
}
}),
id,
visible: true,
zIndex: 2,
});
map. addLayer(wmsService)
}
}