整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
用圖像覆蓋圖標可以為你的網站交互細節或一組功能加深印象。本文內容將分為兩部分，第一部分創建結構并附加圖標的鏈接。在第二部分中，我們將使用CSS進行設計。
創建結構：在本節中，我們將創建一個基本結構，并為這些圖標附加Font-Awesome的CDN鏈接，這些圖標將用作懸停時的圖標。
“字體真棒”中的圖標的CDN鏈接：
<link rel =” stylesheet” href =““ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>
Image Overlay Icon using HTML and CSS
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Image Overlay Icon using HTML and CSS</b>
<div class="img">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
alt="Geeksforgeeks">
<div class="overlay">
<a href="#" class="icon">
<i class="fa fa-user"></i>
</a>
</div>
</div>
</div>
</body>
</html>設計結構：在上面內容中，我們創建了將用作圖像疊加圖標的基本網站的結構。在這部分內容中，我們將設計圖像疊加圖標的結構。
CSS代碼：
<style>
body {
text-align: center;
}
h1 {
color: green;
}
/* Image styling */
img {
padding: 5px;
height: 225px;
width: 225px;
border: 2px solid gray;
box-shadow: 2px 4px #888888;
}
/* Overlay styling */
.overlay {
position: absolute;
top: 23.5%;
left: 32.8%;
transition: .3s ease;
background-color: gray;
width: 225px;
height: 225px;
opacity: 0;
}
/* Overlay hover */
.container:hover .overlay {
opacity: 1;
}
/* Icon styling */
.icon {
color: white;
font-size: 92px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>最終解決方案：這是結合以上兩部分內容后的最終代碼。它將顯示圖像疊加圖標。
<!DOCTYPE html>
<html>
<head>
<title>
Image Overlay Icon using HTML and CSS
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
text-align: center;
}
h1 {
color: green;
}
/* Image styling */
img {
padding: 5px;
height: 225px;
width: 225px;
border: 2px solid gray;
box-shadow: 2px 4px #888888;
}
/* Overlay styling */
.overlay {
position: absolute;
top: 23.5%;
left: 32.8%;
transition: .3s ease;
background-color: gray;
width: 225px;
height: 225px;
opacity: 0;
}
/* Overlay hover */
.container:hover .overlay {
opacity: 1;
}
/* Icon styling */
.icon {
color: white;
font-size: 92px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Image Overlay Icon using HTML and CSS</b>
<div class="img">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
alt="Geeksforgeeks">
<div class="overlay">
<a href="#" class="icon">
<i class="fa fa-user"></i>
</a>
</div>
</div>
</div>
</body>
</html>最終輸出效果：
最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學習資料，只要私信：“前端"等3秒后即可獲取地址，
里面概括應用網站開發，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進階干貨的相關視頻資料，等你來拿
么疊加圖片？在數字時代，圖像處理已成為我們生活中不可或缺的一部分。圖像疊加是一種常見且有趣的圖像處理技術，它能夠將多個圖像層疊在一起，創造出令人驚嘆的效果。下面本文將介紹幾種常用的圖像疊加方法，幫助你輕松實現圖像疊加的藝術。
一、使用圖像編輯軟件
圖像編輯軟件是進行圖像疊加最常用的工具之一。以下是一些常見的軟件，例如Adobe Photoshop，茄子相機和Pixlr等。這些軟件提供了強大的編輯功能，使你可以將它們疊加在一起。
1. 打開茄子相機的主頁面，點擊圖片編輯功能。
2. 打開作為背景的圖像，然后點擊底部的疊加功能。
3. 導入你想要疊加的圖像，將圖像拖動到背景圖上，并調整圖像的位置和大小以達到所需效果。
4. 圖片調整完成以后，即可點擊右上角的保存按鈕，進行保存。
二、使用編程語言
如果你具備編程知識，可以使用圖像處理庫來實現圖像疊加。一些常用的編程語言和庫包括Python中的Pillow和OpenCV，以及JavaScript中的Fabric.js等。使用編程語言進行圖像疊加可能需要一些學習和實踐，但它提供了更大的靈活性和控制力。
1. 安裝所選編程語言的圖像處理庫。
2. 使用庫函數打開要疊加的圖像文件。
3. 創建一個新的圖像對象或加載其他要疊加的圖像。
4. 使用庫提供的函數將兩個圖像疊加在一起，并調整透明度和混合模式等參數。
5. 保存并輸出疊
以上就是關于怎么疊加圖片？的全部分享了，大家可以根據自己需求和具體情況選擇最適合自己的方法，希望今天的分享能夠幫到大家。
Openlayers是一個基于Javacript開發，免費、開源的前端地圖開發庫，使用它，可以很容易的開發出WebGIS系統。目前Openlayers支持地圖瓦片、矢量數據等眾多地圖數據格式，支持比較完整的地圖交互操作。目前OpenLayers已經成為一個擁有眾多開發者和幫助社區的成熟、流行的框架，在國內外的GIS相關行業中得到了廣泛的應用。
openlayers 官網地址 https://openlayers.org/
openlayers 源碼地址 https://github.com/openlayers/openlayers
// 地圖服務對象，調用唯杰地圖服務打開地圖，獲取地圖的元數據
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打開地圖
let mapId = "sys_zp";
let res = await svc.openMap({
mapid: mapId, // 地圖ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何數據渲染方式打開
style: vjmap.openMapDarkStyle() // div為深色背景顏色時，這里也傳深色背景樣式
})
if (res.error) {
// 如果打開出錯
message.error(res.error)
}
// 獲取地圖范圍
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
//自定義投影參數
let cadProjection = new ol.proj.Projection({
// extent用于確定縮放級別
extent: mapBounds.toArray(),
units: 'm'
});
// 設置每級的分辨率
let resolutions= [];
for(let i = 0; i < 25; i++) {
resolutions.push(mapBounds.width() / (512 * Math.pow(2, i - 1)))
}
// 增加自定義的cad的坐標系
ol.proj.addProjection(cadProjection);
// 創建openlayer的地圖對象
let map = new ol.Map({
target: 'map', // div的id
view: new ol.View({
center: mapBounds.center().toArray(), // 地圖中心點
projection: cadProjection, // 剛自定義的cad的坐標系
resolutions:resolutions, // 分辨率
zoom: 2// 初始縮放級別
})
});
// 增加一個瓦片圖層
let layer = new ol.layer.Tile({
// 增加一個瓦片數據源
source: new ol.source.TileImage({
url: svc.rasterTileUrl() // 唯杰地圖服務提供的cad的柵格瓦片服務地址
})
});
// 在地圖中增加上面的瓦片圖層
map.addLayer(layer);
// 增加一個矢量瓦片圖層
let layer = new ol.layer.VectorTile({
// 增加一個瓦片數據源
source: new ol.source.VectorTile({
projection: cadProjection,
format: new ol.format.MVT(),
url: svc.vectorTileUrl() // 唯杰地圖服務提供的cad的矢量瓦片服務地址
}),
style: createVjMapVectorStyle(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Circle)
});
// 在地圖中增加上面的瓦片圖層
map.addLayer(layer);
const highlight_ent = async co => {
vectorSource.clear();
let res = await svc.pointQueryFeature({
x: co[0],
y: co[1],
zoom: map.getView().getZoom(),
fields: ""
}, pt => {
// 查詢到的每個點進行坐標處理回調
return mapPrj.fromMercator(pt);// 轉成cad的坐標
})
if (res && res.result && res.result.length > 0) {
let features = [];
for (let ent of res.result) {
if (ent.geom && ent.geom.geometries) {
let clr = vjmap.entColorToHtmlColor(ent.color);
for (let g = 0; g < ent.geom.geometries.length; g++) {
features.push({
type: "Feature",
properties: {
objectid: ent.objectid + "_" + g,
color: clr,
alpha: ent.alpha / 255,
lineWidth: 1,
name: ent.name,
isline: ent.isline,
layerindex: ent.layerindex
},
geometry: ent.geom.geometries[g]
})
}
// 選擇提示
let content = `feature: ${ent.objectid}; layer: ${cadLayers[ent.layerindex].name}; type: ${ent.name}`
message.info({ content, key: "info", duration: 3});
}
}
geojsonObject.features = features;
if (geojsonObject.features.length > 0) {
vectorSource.addFeatures( new ol.format.GeoJSON().readFeatures(geojsonObject, {dataProjection: cadProjection}))
}
}
};
// 地圖服務對象，調用唯杰地圖服務打開地圖，獲取地圖的元數據
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 上傳dwg文件
const uploadDwgFile = async file => {
message.info("正在上傳圖形，請稍候", 2);
let res = await svc.uploadMap(file); // 上傳地圖
// 輸入圖id
let mapid = prompt("請輸入圖名稱ID", res.mapid);
res.mapid = mapid;
res.mapopenway = vjmap.MapOpenWay.GeomRender; // 幾何渲染，內存渲染用vjmap.MapOpenWay.Memory
res.isVector = false; // 使用柵格瓦片
res.style = vjmap.openMapDarkStyle(); // 深色樣式，淺色用openMapDarkStyle
message.info("正在打開圖形，請稍候，第一次打開時根據圖的大小可能需要幾十秒至幾分鐘不等", 5);
let data = await svc.openMap(res); // 打開地圖
if (data.error) {
message.error(data.error)
return;
}
openMap(data);
}// 切換圖層
const switchLayer = async layers => {
let res = await svc.cmdSwitchLayers(layers); // 調用唯杰服務切換圖層，返回圖層id {layerid： "xxxx"}
let source = layer.getSource();
// 重新設置新的唯杰地圖服務提供的cad的柵格瓦片服務地址
source.setUrl(svc.rasterTileUrl());
// 刷新
source.refresh();
}
const switchToMapId = async (mapId)=> {
let res = await svc.openMap({
mapid: mapId, // 地圖ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何數據渲染方式打開
style: vjmap.openMapDarkStyle() // div為深色背景顏色時，這里也傳深色背景樣式
})
if (res.error) {
// 如果打開出錯
message.error(res.error)
return;
}
// 獲取地圖范圍
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
//自定義投影參數
let cadProjection = new ol.proj.Projection({
// extent用于確定縮放級別
extent: mapBounds.toArray(),
units: 'm'
});
// 設置每級的分辨率
let resolutions= [];
for(let i = 0; i < 25; i++) {
resolutions.push(mapBounds.width() / (512 * Math.pow(2, i - 1)))
}
// 增加自定義的cad的坐標系
ol.proj.addProjection(cadProjection);
// 重新創建openlayer的地圖對象
map = new ol.Map({
target: createNewMapDivId(), // div的id
view: new ol.View({
center: mapBounds.center().toArray(), // 地圖中心點
projection: cadProjection, // 剛自定義的cad的坐標系
resolutions:resolutions, // 分辨率
zoom: 2 // 初始縮放級別
})
});
// 增加一個瓦片圖層
let layer = new ol.layer.Tile({
// 增加一個瓦片數據源
source: new ol.source.TileImage({
url: svc.rasterTileUrl() // 唯杰地圖服務提供的cad的柵格瓦片服務地址
})
});
// 在地圖中增加上面的瓦片圖層
map.addLayer(layer);
map.on('click', (e) => message.info({content: `您點擊的坐標為： ${JSON.stringify(e.coordinate)}`, key: "info", duration: 3}));
}let curIsDarkTheme = true;
const switchToDarkTheme = async () => {
if (curIsDarkTheme) return;
curIsDarkTheme = true;
document.body.style.background = "#022B4F"; // 背景色改為深色
await updateStyle(curIsDarkTheme)
}
const switchToLightTheme = async () => {
if (!curIsDarkTheme) return;
curIsDarkTheme = false;
document.body.style.backgroundImage = "linear-gradient(rgba(255, 255, 255, 1), rgba(233,255,255, 1), rgba(233,255,255, 1))"
await updateStyle(curIsDarkTheme)
}
const updateStyle = async (isDarkTheme) => {
style.backcolor = isDarkTheme ? 0 : 0xFFFFFF;//深色為黑色，淺色為白色
let res = await svc.cmdUpdateStyle(style);
let source = layer.getSource();
// 重新設置新的唯杰地圖服務提供的cad的柵格瓦片服務地址
source.setUrl(svc.rasterTileUrl());
// 刷新
source.refresh();
}通過修改CAD地圖后臺樣式數據自定義地圖
// 更改樣式
const expressionList = [] ;// 表達式數組
const updateStyle = async (style) => {
let res = await svc.cmdUpdateStyle({
name: "customStyle2",
backcolor: 0,
expression: expressionList.join("\n"),
...style
});
let source = layer.getSource();
// 重新設置新的唯杰地圖服務提供的cad的柵格瓦片服務地址
source.setUrl(svc.rasterTileUrl());
// 刷新
source.refresh();
}
// 表達式語法和變量請參考
// 服務端條件查詢和表達式查詢 https://vjmap.com/guide/svrStyleVar.html
// 服務端渲染表達式語法 https://vjmap.com/guide/expr.html
// 修改顏色 紅color.r, 綠color.g, 藍color.b, 透明度color.a,如果輸入了級別的話，表示此級別及以上的設置
const modifyColor = (color, zoom) => {
let result = "";
let z = Number.isInteger(zoom) ? `[${zoom + 1}]` : '';
if ("r" in color) result += `gOutColorRed${z}:=${color.r};`;
if ("g" in color) result += `gOutColorGreen${z}:=${color.g};`;
if ("b" in color) result += `gOutColorBlue${z}:=${color.b};`;
if ("a" in color) result += `gOutColorAlpha${z}:=${color.a};`;
return result;
}對多個cad圖進行圖層開關裁剪旋轉縮放處理后合并成一個新的cad圖
// 組合成新的圖,將sys_world圖進行一定的處理后，再與sys_hello進行合成，生成新的地圖文件名
let rsp = await svc.composeNewMap([
{
mapid: "sys_world", // 地圖id
// 下面的參數可以根據實際需要來設置，可以對圖層，范圍，坐標轉換來進行處理
layers: ["經緯度標注","COUNTRY"], // 要顯示的圖層名稱列表
//clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379, 4445.465999], // 要顯示的范圍
//fourParameter: [0,0,1,0] // 對地圖進行四參數轉換計算
},
{
mapid: "sys_hello"
}
])
if (!rsp.status) {
message.error(rsp.error)
}
// 返回結果為
/*
{
"fileid": "pec9c5f73f1d",
"mapdependencies": "sys_world||sys_hello",
"mapfrom": "sys_world&&v1&&&&0&&&&&&&&&&00A0&&10||sys_hello&&v1&&&&0&&&&&&&&&&&&2",
"status": true
}
*/
// 實體類型ID和名稱映射
const { entTypeIdMap } = await svc.getConstData();
const getTypeNameById = name => {
for(let id in entTypeIdMap) {
if (entTypeIdMap[id] == name) {
return id
}
}
}
const queryTextAndDrawBounds = async () => {
let queryTextEntTypeId = getTypeNameById("AcDbText"); // 單行文字
let queryMTextEntTypeId = getTypeNameById("AcDbMText"); // 多行文字
let queryAttDefEntTypeId = getTypeNameById("AcDbAttributeDefinition"); // 屬性定義文字
let queryAttEntTypeId = getTypeNameById("AcDbAttribute"); // 屬性文字
let query = await svc.conditionQueryFeature({
condition: `name='${queryTextEntTypeId}' or name='${queryMTextEntTypeId}' or name='${queryAttDefEntTypeId}' or name='${queryAttEntTypeId}'`, // 只需要寫sql語句where后面的條件內容,字段內容請參考文檔"服務端條件查詢和表達式查詢"
fields: "",
limit: 100000 //設置很大，相當于把所有的圓都查出來。不傳的話，默認只能取100條
}, pt => {
// 查詢到的每個點進行坐標處理回調
return mapPrj.fromMercator(pt);// 轉成cad的坐標
})
if (query.error) {
message.error(query.error)
} else {
message.info(`查詢到符合的記數條數：${query.recordCount}`)
if (query.recordCount > 0) {
let features = [];
for(var i = 0; i < query.recordCount; i++) {
let bounds = vjmap.getEnvelopBounds(query.result[i].envelop, mapPrj);
let clr = vjmap.entColorToHtmlColor(query.result[i].color); // 實體顏色轉html顏色(
features.push({
type: "Feature",
properties: {
name: "objectid:" + query.result[i].objectid,
color: clr
},
geometry: {
'type': 'Polygon',
'coordinates': [
bounds.toPointArray(),
],
}
})
}
if (!vectorSource) {
// 如果之前沒有高亮矢量圖層
addHighLightLayer();
}
vectorSource.clear();
let geojsonObject = {
'type': 'FeatureCollection',
'features': features
}
// 修改矢量數據源數據
vectorSource.addFeatures( new ol.format.GeoJSON().readFeatures(geojsonObject, {dataProjection: cadProjection}))
}
}
}
const source = new ol.source.Vector({wrapX: false});
const vector = new ol.layer.Vector({
source: source,
});
map.addLayer(vector);
let draw; // global so we can remove it later
function addInteraction(value) {
map.removeInteraction(draw);
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: value,
});
map.addInteraction(draw);
}
}
addInteraction('Point');
// 增加高德地圖底圖
let gdlayer;
const addGaodeMap = async (isRoadway) => {
const tileUrl = svc.webMapUrl({
tileCrs: "gcj02",
tileUrl: isRoadway ? [
"https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
] :
/* 如果用影像 */
[
"https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}",
"https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
],
tileSize: 256,
tileRetina: 1,
tileMaxZoom: 18,
tileShards: "1,2,3,4",
tileToken: "",
tileFlipY: false,
mapbounds: res.bounds,
srs: "EPSG:4527",// 可通過前兩位獲取 vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.CGCS2000, 39).epsg
// 因為sys_cad2000這個圖只有6位，沒有帶系。需要在坐標轉換前平移下帶系 https://blog.csdn.net/thinkpang/article/details/124172626
fourParameterBefore: "39000000,0,1,0"
})
// 增加一個瓦片圖層
gdlayer = new ol.layer.Tile({
// 增加一個瓦片數據源
source: new ol.source.TileImage({
url: tileUrl
})
});
gdlayer.setZIndex(-1);
// 在地圖中增加上面的瓦片圖層
map.addLayer(gdlayer);
// cad坐標與高德坐標相互轉換示例
let webCo = await cad2webCoordinate(center, false); // cad轉高德
let cadCo = await web2cadCoordinate(webCo, false); // 高德轉cad
console.log(center, webCo, cadCo)
}
let cadEpsg = "EPSG:4544";// cad圖的espg代號
// 增加cad的wms圖層
let wmsUrl = svc.wmsTileUrl({
mapid: mapId, // 地圖id
layers: layer, // 圖層名稱
bbox: '', // bbox這里不需要
srs: "EPSG:3857", //
crs: cadEpsg
})
function getQueryStringArgs(url) {
let theRequest = {};
let idx = url.indexOf("?");
if (idx != -1) {
let str = url.substr(idx + 1);
let strs = str.split("&");
for (let i = 0; i < strs.length; i++) {
let items = strs[i].split("=");
theRequest[items[0]] = items[1];
}
}
return theRequest;
}
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// cad圖坐標轉web wgs84坐標
const cadToWebCoordinate = async point => {
let co = await svc.cmdTransform(cadEpsg, "EPSG:4326", point);
return co[0]
}
// cad轉wgs84經緯度
let boundsMin = await cadToWebCoordinate(mapBounds.min);
let boundsMax = await cadToWebCoordinate(mapBounds.max);
// wgs84經緯度轉墨卡托
boundsMin = vjmap.Projection.lngLat2Mercator(boundsMin);
boundsMax = vjmap.Projection.lngLat2Mercator(boundsMax);
// 在openlayer中增加wms圖層
map.addLayer(new ol.layer.Tile({
// 范圍
extent: [boundsMin[0], boundsMin[1], boundsMax[0], boundsMax[1]],
source: new ol.source.TileWMS({
url: wmsUrl.substr(0, wmsUrl.indexOf("?")),
params: {...getQueryStringArgs(wmsUrl),'TILED': true}
}),
}))
// cad上面的點坐標
let cadPoints = [
vjmap.geoPoint([587464448.8435847, 3104003685.208651,]),
vjmap.geoPoint([587761927.7224838, 3104005967.655292]),
vjmap.geoPoint([587463688.0280377, 3103796743.3798513]),
vjmap.geoPoint([587760406.0913897, 3103793700.1176634])
];
// 在互聯網圖上面拾取的與上面的點一一對應的坐標(wgs84坐標)
let webPoints = [
vjmap.geoPoint([116.48476281710168, 39.96200739703454]),
vjmap.geoPoint([116.48746772021137, 39.96022062215167]),
vjmap.geoPoint([116.48585059441585, 39.9588451134361]),
vjmap.geoPoint([116.48317418949145, 39.960515760972356])
]
// 通過坐標參數求出四參數
let epsg3857Points = webPoints.map(w => vjmap.geoPoint(vjmap.Projection.lngLat2Mercator(w)));
let param = vjmap.coordTransfromGetFourParamter(epsg3857Points, cadPoints , false); // 這里考慮旋轉
let fourparam = [param.dx, param.dy, param.scale, param.rotate]
// wms圖層地址
const getCadWmsUrl = (transparent) => {
let wmsUrl = svc.wmsTileUrl({
mapid: mapId, // 地圖id
layers: layer, // 圖層名稱
bbox: '', // bbox這里不需要
fourParameter: fourparam,
transparent: transparent,
backgroundColor: 'rgba(240, 255, 255)' // 不透明時有效
})
return wmsUrl
}
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
let cadPrj = new vjmap.GeoProjection(mapBounds);
// cad圖坐標轉3857坐標
const cadToWebCoordinate = point => {
// 再調用四參數反算求出web的坐標
return vjmap.coordTransfromByInvFourParamter(vjmap.geoPoint(point), param)
}
// 3857轉cad圖坐標
const webToCadCoordinate = point => {
return vjmap.coordTransfromByFourParamter(vjmap.geoPoint(point), param)
}
let wmsLayer;
const addWmsLayer = async (transparent)=> {
removeWmsLayer();
let wmsUrl = getCadWmsUrl(transparent);
wmsLayer = new ol.layer.Tile({
// 范圍
extent: bounds.toArray(),
source: new ol.source.TileWMS({
url: wmsUrl.substr(0, wmsUrl.indexOf("?")),
params: {...getQueryStringArgs(wmsUrl),'TILED': true}
}),
});
// 在openlayer中增加wms圖層
map.addLayer(wmsLayer);
}可點擊 https://vjmap.com/demo/#/demo/map/openlayers/01olraster 在線體驗上面功能
如果需要用openlayers來加載CAD圖進行開發，請參考示例 https://vjmap.com/demo/#/demo/map/openlayers/01olraster
如果需要用leaflet來加載CAD圖進行開發，請參考示例 https://vjmap.com/demo/#/demo/map/leaflet/01leafletraster
如果需要用maptalks來加載CAD圖進行開發，請參考示例 https://vjmap.com/demo/#/demo/map/maptalks/01maptalksraster
如何基于vue3來開發openlayers應用，可查看此開源代碼 https://github.com/MelihAltintas/vue3-openlayers
如何基于vue2來開發openlayers應用，可查看此開源代碼 https://github.com/ghettovoice/vuelayers
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
