添加测试
This commit is contained in:
qiushijie
parent
92e662beb6
commit
ffb5a8841e
|
|
@ -0,0 +1,105 @@
|
||||||
|
<!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>Document</title>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.9.1/Archive/mapbox-gl.js"></script>
|
||||||
|
<link href="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.9.1/mapbox-gl.css"/>
|
||||||
|
<style>
|
||||||
|
#map{
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<button style="position: absolute;left: 100px;top: 50px;" onClick="filterFeature()">filter</button>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const TIANDITU_URL = 'http://t0.tianditu.gov.cn';
|
||||||
|
const tdtKey = "bf156eb3c72350d62b008dc8a4ae1016";
|
||||||
|
const tdtConfig = {
|
||||||
|
code: 'tdt_img',
|
||||||
|
name: '天地图影像',
|
||||||
|
source: {
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [
|
||||||
|
`${TIANDITU_URL}/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${tdtKey}`
|
||||||
|
],
|
||||||
|
tileSize: 256,
|
||||||
|
minzoom: 0,
|
||||||
|
maxzoom: 22
|
||||||
|
},
|
||||||
|
layer: {
|
||||||
|
id: 'tdt-img-tiles',
|
||||||
|
type: 'raster',
|
||||||
|
minzoom: 0,
|
||||||
|
maxzoom: 22,
|
||||||
|
layout: { visibility: 'visible' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var map = new mapboxgl.Map({
|
||||||
|
container:'map',
|
||||||
|
style:{
|
||||||
|
"version":8,
|
||||||
|
"sources":{},
|
||||||
|
"layers":[],
|
||||||
|
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
|
||||||
|
},
|
||||||
|
center: [112.39747, 22.908823], // 广东
|
||||||
|
zoom: 8, // starting zoom 地图初始的拉伸比例
|
||||||
|
pitch: 0, // 地图的角度，不写默认是0，取值是0-85度，一般在3D中使用
|
||||||
|
bearing: 0, // 地图的初始方向，值是北的逆时针度数，默认是0，即是正北
|
||||||
|
antialias: true, // 抗锯齿，通过false关闭提升性能
|
||||||
|
minZoom: 3,
|
||||||
|
maxZoom: 17.36
|
||||||
|
});
|
||||||
|
map.on('load', () => {
|
||||||
|
// 天地图底图加载
|
||||||
|
addLayerConfig(tdtConfig);
|
||||||
|
addMvt();
|
||||||
|
});
|
||||||
|
function addLayerConfig(layerConfig){
|
||||||
|
const {code, source,layer} = layerConfig;
|
||||||
|
map.addSource(code, source);
|
||||||
|
const layerParams = {
|
||||||
|
...layer,
|
||||||
|
source: code
|
||||||
|
};
|
||||||
|
// 添加图层
|
||||||
|
map.addLayer(layerParams);
|
||||||
|
}
|
||||||
|
var ep = ['>=', 'id', 3442];
|
||||||
|
var mvtLayer;
|
||||||
|
var booltemp=false
|
||||||
|
function filterFeature(){
|
||||||
|
if(booltemp){
|
||||||
|
map.setLayoutProperty('lines', 'visibility', 'visible');
|
||||||
|
booltemp=!booltemp
|
||||||
|
}else{
|
||||||
|
|
||||||
|
map.setLayoutProperty('lines', 'visibility', 'none');
|
||||||
|
booltemp=!booltemp
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function addMvt(){
|
||||||
|
mvtLayer = map.addLayer({
|
||||||
|
id: 'lines',
|
||||||
|
type: 'fill',
|
||||||
|
source: {
|
||||||
|
type: 'vector',
|
||||||
|
url: 'http://localhost:3000/lablepolygon'
|
||||||
|
},
|
||||||
|
'source-layer': 'lablepolygon',
|
||||||
|
paint: {
|
||||||
|
'fill-color': 'red'
|
||||||
|
},
|
||||||
|
// filter : ep
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue