<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title></title>
<!-- <script src='https://gis.kf315.net/api/mapbox.js' type='text/javascript'></script> -->
<script src='https://gis.jgwcjm.com/api/mapbox.js' type='text/javascript'></script>
<script type='text/javascript' src='./data/data.js'></script>
<style>
#map {
position: absolute;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
left: 0;
top: 0
}
.mapboxgl-popup {
/* display: none!important; */
}
.mapboxgl-popup-close-button {
color: transparent !important;
width: 24px;
height: 26px;
background: url('../../img/homepageMap/x.png') no-repeat;
background-size: 100% 100%;
margin-top: 57px;
margin-right: 47px;
}
.mapboxgl-popup-content {
width: 596px;
height: 523px;
background-image: url('../../img/homepageMap/dialog2.png') !important;
background-repeat: no-repeat;
background-size: 100% 100% !important;
background-color: transparent !important;
}
.dialogImg {
width: 500px;
height: 350px;
object-fit: cover;
}
.mapboxgl-popup-tip {
display: none !important;
}
.imgBox {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
/* position: relative; */
}
.imgBox2 {
display: none;
}
.name {
width: 260px;
/* border: 1px solid red; */
position: absolute;
color: #fff;
top: 0;
left: 0;
text-align: center;
line-height: 55px;
height: 55px;
font-size: 24px;
}
</style>
<script type='text/javascript'>
const extent = [];
const black = { type: 'FeatureCollection', features: [] }
const geoserverRasterLayers = { "huaxi_uav_202210": true }
const map = new EMap('map', {
zoom: 6.45423656420446,
style: 'None',
config: 'none',
center: [9.126412262488856, 6.214459531337852]
});
map.addEventListener('onMapLoaded', function (e) {
map.disableDoubleClickZoom();
map.disableRotation();
map.loadImage('view', './icon/view.png', () => { });
map.loadImage('agritainment', './icon/agritainment.png', () => { });
addLayers();
// setFilter(['view'])
map.map.on('click', 'views', (e) => {
const { coordinates } = e.features[0].geometry;
const { properties } = e.features[0];
const { type } = properties
let html;
if (type == 'view') {
console.log(properties);
html = `
<div class='imgBox'>
<div class='name'>${properties.name}</div>
<img class='dialogImg' src='../../img/homepageMap/${properties.Id}.png'/>
</div>
`
map.destroyInfoSymbol();
map.createInfoSymbol(
'popup',
html,
coordinates,
[-10, -40],
'',
true,
);
}
});
window.parent.postMessage({ //参数是对象
type: 'loadFinish'
}, '*')
});
function addLayers() {
addGeoserverRasterLayers()
map.addLayer({
id: 'views',
type: 'symbol',
source: {
type: "geojson",
data: views
},
layout: {
'icon-image': [
'match',
['get', 'type'],
'view', 'view',
'agritainment'
],
'icon-size': 0.35,
'icon-anchor': 'bottom',
'icon-allow-overlap': true
},
});
}
function addGeoserverRasterLayers() {
const rasterTilesBaseUrl = mapbox_ip + 'hydra-code-egis/api/v1/geoserver/get-image-data?style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG%3A900913%3A{z}&TileCol={x}&TileRow={y}&layer=cite%3A';
for (let key in geoserverRasterLayers) {
let isShow = geoserverRasterLayers[key] === false ? 'none' : 'visible';
map.addLayer({
id: key,
type: 'raster',
source: {
type: 'raster',
tiles: [rasterTilesBaseUrl + key],
tileSize: 256
},
layout: {
visibility: isShow
}
});
}
}
function setFilter(typeList) {
map.setFilter('views', ['in', 'type', ...typeList])
}
</script>
</head>
<body>
<div id='map'></div>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
vue 项目模板 工作可以直接用
共237个文件
png:132个
js:56个
vue:27个
0 下载量 80 浏览量
2022-11-22
09:52:58
上传
评论
收藏 56.7MB RAR 举报
温馨提示
vue 项目模板 工作可以直接用
资源推荐
资源详情
资源评论
收起资源包目录
vue 项目模板 工作可以直接用 (237个子文件)
.browserslistrc 23B
video-js.css 46KB
swiper.css 22KB
base.css 495B
font.css 125B
common.css 0B
.editorconfig 126B
.gitignore 235B
map.html 6KB
index.html 2KB
favicon.ico 894B
sz2.jpg 3KB
video.min.js 507KB
rsa.js 406KB
jsWebControl-1.0.0.min.js 247KB
gansu.js 171KB
jsencrypt.min.js 54KB
highcharts-3d.js 41KB
rules.js 10KB
index.js 8KB
echarts-auto-tooltip.js 7KB
v3.js 5KB
city.js 5KB
base.js 5KB
index.js 4KB
vue.config.js 4KB
data.js 4KB
pageSwitch.js 4KB
ajax.js 4KB
iot.js 4KB
common.js 3KB
object.js 3KB
date.js 2KB
url.js 2KB
config.js 2KB
brain.js 2KB
fileDownload.js 2KB
farm.js 1KB
emitter.js 1KB
hxHome.js 1KB
createWait.js 1KB
storage2.js 1KB
storage.js 1KB
main.js 1KB
message.js 899B
index.js 871B
createZip.js 816B
imageSrc.js 814B
eventBus.js 677B
globalData.js 640B
index.js 614B
rem.js 596B
index.js 558B
.eslintrc.js 540B
index.js 522B
index.js 405B
index.js 356B
valid.js 326B
array.js 274B
qrcode.js 241B
index.js 230B
sleep.js 208B
setting.js 136B
base.js 85B
babel.config.js 78B
bus.js 69B
bus.js 64B
index.js 54B
package-lock.json 614KB
yuhang.json 430KB
hj.json 121KB
package.json 2KB
common.less 143B
yarn.lock 464KB
debug.log 344B
4.png 4.84MB
0.png 4.83MB
2.png 4.76MB
11.png 4.65MB
6.png 4.58MB
1.png 4.57MB
9.png 4.08MB
7.png 3.99MB
3.png 3.84MB
5.png 3.45MB
8.png 3.42MB
10.png 3.41MB
bg.png 908KB
25.png 147KB
27.png 146KB
24.png 145KB
23.png 144KB
26.png 144KB
21.png 143KB
7.png 143KB
29.png 143KB
10.png 143KB
18.png 142KB
28.png 141KB
30.png 141KB
共 237 条
- 1
- 2
- 3
资源评论
小菜鸟学代码··
- 粉丝: 1w+
- 资源: 10
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功