地图服务测试
This commit is contained in:
parent
31c5d4ee9e
commit
82fb5033d5
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>地图服务加载样例代码（含打点功能）</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="initial-scale=1,maximum-scale=1,user-scalable=no"
|
||||
/>
|
||||
<!-- 一张图定制版mapbox api -->
|
||||
<script src="https://shaanxi.tianditu.gov.cn/vectormap/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.js"></script>
|
||||
<link
|
||||
href="https://shaanxi.tianditu.gov.cn/vectormap/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/* 自定义标记点样式（可选） */
|
||||
.custom-marker {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: #ff4444;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.boxdraw {
|
||||
background: rgba(56, 135, 190, 0.1);
|
||||
border: 2px solid #3887be;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
// mapbox api token
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoib25lZ2lzZXIiLCJhIjoiY2plZHptcnVuMW5tazMzcWVteHM2aGFsZiJ9.ERWP7zZ-N6fmNl3cRocJ1g";
|
||||
|
||||
// 初始化地图对象
|
||||
var map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
style: "http://1.85.55.225:8085/YouMapServer/rest/service/sxwwCGCS2000/VectorTileServer/styles/blue_yj-225.json",
|
||||
center: { lng: 109, lat: 35.655 }, // 陕西中心坐标
|
||||
zoom: 6,
|
||||
pitch: 5,
|
||||
minZoom: 5,
|
||||
maxZoom: 17,
|
||||
});
|
||||
|
||||
// 加载指北针、比例尺
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
map.addControl(
|
||||
new mapboxgl.ScaleControl({ maxWidth: 80, unit: "metric" }),
|
||||
"bottom-left"
|
||||
);
|
||||
|
||||
// -------------------------- 打点核心逻辑 --------------------------
|
||||
// 地图加载完成后执行（确保地图容器已初始化）
|
||||
map.on('load', function() {
|
||||
// 1. 基础打点：默认图标 + 弹窗（以西安为例）
|
||||
const xiAnMarker = new mapboxgl.Marker()
|
||||
.setLngLat([108.940174, 34.263161]) // 西安坐标（经纬度）
|
||||
.setPopup(new mapboxgl.Popup().setHTML('<h3>西安市</h3><p>陕西省省会</p>')) // 点击弹窗
|
||||
.addTo(map); // 挂载到地图
|
||||
|
||||
// 2. 自定义样式打点：自定义DOM样式（以宝鸡为例）
|
||||
const baoJiMarker = new mapboxgl.Marker(document.createElement('div'))
|
||||
.setElementClass('custom-marker') // 绑定自定义CSS类
|
||||
.setElementContent('宝') // 标记点内文字
|
||||
.setLngLat([107.273414, 34.361761]) // 宝鸡坐标
|
||||
.setPopup(new mapboxgl.Popup().setHTML('<h3>宝鸡市</h3><p>炎帝故里</p>'))
|
||||
.addTo(map);
|
||||
|
||||
// 3. 批量打点：循环添加多个城市（适合多坐标场景）
|
||||
const cityPoints = [
|
||||
{ name: '咸阳市', lng: 108.707303, lat: 34.348743, desc: '秦都' },
|
||||
{ name: '延安市', lng: 109.492292, lat: 36.600692, desc: '革命圣地' },
|
||||
{ name: '汉中市', lng: 107.037442, lat: 33.075774, desc: '天府之国' }
|
||||
];
|
||||
|
||||
cityPoints.forEach(point => {
|
||||
new mapboxgl.Marker()
|
||||
.setLngLat([point.lng, point.lat])
|
||||
.setPopup(new mapboxgl.Popup().setHTML(`<h3>${point.name}</h3><p>${point.desc}</p>`))
|
||||
.addTo(map);
|
||||
});
|
||||
});
|
||||
// ------------------------------------------------------------------
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>地图服务加载样例代码</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="initial-scale=1,maximum-scale=1,user-scalable=no"
|
||||
/>
|
||||
<!-- 一张图定制版mapbox api -->
|
||||
<script src="https://shaanxi.tianditu.gov.cn/vectormap/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.js"></script>
|
||||
<link
|
||||
href="https://shaanxi.tianditu.gov.cn/vectormap/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.boxdraw {
|
||||
background: rgba(56, 135, 190, 0.1);
|
||||
border: 2px solid #3887be;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
// mapbox api 申请的token
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoib25lZ2lzZXIiLCJhIjoiY2plZHptcnVuMW5tazMzcWVteHM2aGFsZiJ9.ERWP7zZ-N6fmNl3cRocJ1g";
|
||||
|
||||
// 初始化地图对象
|
||||
var map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
// 以互联网版服务为例，另外也提供了10段和59段的服务地址
|
||||
style: "http://1.85.55.225:8085/YouMapServer/rest/service/sxwwCGCS2000/VectorTileServer/styles/blue_yj-225.json",
|
||||
center: { lng: 109, lat: 35.655 },
|
||||
zoom: 6,
|
||||
pitch: 5,
|
||||
minZoom: 5,
|
||||
maxZoom: 17,
|
||||
});
|
||||
|
||||
// 加载指北针图表
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
|
||||
// 加载地图比例尺
|
||||
map.addControl(
|
||||
new mapboxgl.ScaleControl({
|
||||
maxWidth: 80,
|
||||
unit: "metric",
|
||||
}),
|
||||
"bottom-left"
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue