一、加载点数据到地图上
1、准备一个点数据
var data = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [114.30, 30.50]
}
}
]
}2、创建地图并加载这个点，上面是yiduangeojson数据，数据的制作和加载在上一篇文章中已经说过了，不明白的可以自行翻阅。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<style>
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* token */
mapboxgl.accessToken = '你的token'
const map = new mapboxgl.Map({
container: 'map', // container ID
// style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [114.30, 30.50], // starting position [lng, lat]
zoom: 14, // starting zoom
})
var data = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [114.30, 30.50]
}
}
]
}
map.on("style.load", () => {
map.addSource("p_source", {
type: "geojson",
data
})
map.addLayer({
id: "p_layer", //必须写
source: "p_source", //必须
type: "circle", //必须
paint: {
'circle-radius': 30,
'circle-color': "#ff2d51",
'circle-opacity': 0.5
}
})
})
</script>
</body>
</html>二、动态属性获取
先创建多个点数据
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
name: "武汉",
radius: 20
},
"geometry": {
"type": "Point",
"coordinates": [114.302427, 30.530495]
}
},
{
"type": "Feature",
"properties": {
name: "苏州",
radius: 5
},
"geometry": {
"type": "Point",
"coordinates": [114.328023, 30.544457]
}
},
{
"type": "Feature",
"properties": {
name: "杭州",
radius: 10
},
"geometry": {
"type": "Point",
"coordinates": [114.344092, 30.533434]
}
}
]
}仔细观察可以发现上面数据的properties中有2个属性name和radius，每个点的属性都是不一样的，如果是一个点我们可以加载，但是这多个点如何能够保持原有的样式进行加载呢？这里就需要用到动态属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<style>
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* token */
mapboxgl.accessToken = '你的token'
const map = new mapboxgl.Map({
container: 'map', // container ID
// style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [114.328023, 30.544457], // starting position [lng, lat]
zoom: 14, // starting zoom
})
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
name: "武汉",
radius: 20
},
"geometry": {
"type": "Point",
"coordinates": [114.302427, 30.530495]
}
},
{
"type": "Feature",
"properties": {
name: "苏州",
radius: 5
},
"geometry": {
"type": "Point",
"coordinates": [114.328023, 30.544457]
}
},
{
"type": "Feature",
"properties": {
name: "杭州",
radius: 10
},
"geometry": {
"type": "Point",
"coordinates": [114.344092, 30.533434]
}
}
]
}
map.on("style.load", () => {
map.addSource("p_source", {
type: "geojson",
data
})
map.addLayer({
id: "p_layer", //必须写
source: "p_source", //必须
type: "circle", //必须
paint: {
/* geojson中properties属性的值 */
'circle-radius': ["get", "radius"],
'circle-color': "#ff2d51",
'circle-opacity': 0.5
}
})
})
</script>
</body>
</html>最重要的就是，通过get，获取元素properties中的raadius，实现元素的差异化动态加载。
'circle-radius': ["get", "radius"],三、点击事件获取要素、要素高亮、鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<style>
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* token */
mapboxgl.accessToken = '你的token'
const map = new mapboxgl.Map({
container: 'map', // container ID
// style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [114.328023, 30.544457], // starting position [lng, lat]
zoom: 12, // starting zoom
})
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
name: "武汉",
radius: 20
},
"geometry": {
"type": "Point",
"coordinates": [114.302427, 30.530495]
}
},
{
"type": "Feature",
"properties": {
name: "苏州",
radius: 5
},
"geometry": {
"type": "Point",
"coordinates": [114.328023, 30.544457]
}
},
{
"type": "Feature",
"properties": {
name: "杭州",
radius: 10
},
"geometry": {
"type": "Point",
"coordinates": [114.344092, 30.533434]
}
}
]
}
//这里使用async...await是采用了异步加载的形式，可以不使用，按照之前写的map.on('style.load',()=>{
}
),也是一样的
async function renderMap() {
await map.once("style.load");
/* 1、先加载一个点数据*/
map.addSource("source", {
type: "geojson",
data
})
map.addLayer({
id: "layer",
source: "source",
type: "circle",
paint: {
'circle-radius': ["get", "radius"],
'circle-color': "#ff2d51"
}
})
/* 设置高亮图层 */
map.addSource("high_source", {
type: "geojson",
data: {
type: "FeatureCollection",
features: []
}
})
map.addLayer({
id: "high_layer",
source: "high_source",
type: "circle",
paint: {
'circle-radius': 25,
'circle-color': "#4164fb"
}
})
/* 监听鼠标事件 移动到图层上变成wait */
map.on("mouseenter", "layer", () => {
map.getCanvas().style.cursor = "wait"
})
map.on("mouseleave", "layer", () => {
map.getCanvas().style.cursor = "default"
})
/* 点击获取要素 */
map.on("click", evt => {
console.log(evt.point)
var { lng, lat } = evt.lngLat;
/* 这个api可以去mapbox官网查看 */
const features = map.queryRenderedFeatures(
evt.point,
{ layers: ['layer'] }
);
console.log(features[0])
map.getSource().setData(features[0])
})
}
renderMap();
</script>
</body>
</html>四、加载线要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入依赖 -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* token */
mapboxgl.accessToken = '你的token'
/* 实例化地图 */
const map = new mapboxgl.Map({
/* ol target */
container: 'map', // container ID
/* style--layers 图层 */
/* vue2 data vue3 ref */
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [114.30, 30.50], // starting position [lng, lat]
zoom: 12 // starting zoom
});
var data = 'http://39.103.151.139:8000/gis/road_state'
/* data-source */
map.on("style.load", () => {
/* mapbox的source加载到map上 */
map.addSource("geojson-source", {
type: "geojson",
data
})
map.addLayer({
id: "wuhan",
source: "geojson-source",
type: "line",
paint: {
'line-width': 4,
'line-color': "blue"
}
})
})
</script>
</body>
</html>五、加载区要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<style>
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* token */
mapboxgl.accessToken = '你的token'
const map = new mapboxgl.Map({
container: 'map', // container ID
// style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [116.391361, 39.904310], // starting position [lng, lat]
zoom: 1, // starting zoom
})
let data = 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson';
map.on("style.load", () => {
map.addSource("source", {
type: "geojson",
/* data可以接收geojson的变量,也可以接收geojson的url地址 */
data
})
map.addLayer({
id: "layer",
source: "source",
type: "fill",
paint: {
'fill-color': "red"
}
})
})
</script>
</body>
</html>