地图服务测试
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