703 lines
23 KiB
Vue
703 lines
23 KiB
Vue
<template>
|
||
<div :id="mapContainerName" class="map-container">
|
||
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import {ref,onMounted,defineExpose,defineEmits} from "vue";
|
||
import { generateUUID} from '@/components/MapboxMaps/src/tool'
|
||
import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||
import mapboxgl,{ Map, Popup } from 'mapbox-gl';
|
||
import {MAPBOX_TOKEN,TINADITU_TOKEN,MAP_VIEWER} from './config.ts'
|
||
import {getPolygonCenter} from '@/api/tiankongdi'
|
||
import axios from 'axios'
|
||
import { waiData } from "./linyishi";
|
||
import { getAppEnvConfig } from '@/utils/env';
|
||
import dayjs from 'dayjs';
|
||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
|
||
|
||
const {VITE_GLOB_YINGXIANG_SERVER} = getAppEnvConfig();
|
||
const mapContainerName = ref<String>()
|
||
mapContainerName.value = "mapContainer-"+generateUUID();
|
||
//
|
||
|
||
const emits = defineEmits(["onload","handlerGetDetails"])
|
||
|
||
let map:Map;
|
||
|
||
// init map
|
||
const initMap = () => {
|
||
return new mapboxgl.Map({
|
||
container:mapContainerName.value,
|
||
language: 'zh-cmn',
|
||
projection: 'equirectangular', // wgs84参考系
|
||
style: {
|
||
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
|
||
version: 8,
|
||
sources: {
|
||
'dianzi': {
|
||
type: 'raster',
|
||
tiles: [
|
||
`https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||
],
|
||
tileSize: 256,
|
||
},
|
||
'dianzi-biaozhu': {
|
||
type: 'raster',
|
||
tiles: [
|
||
`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||
],
|
||
tileSize: 256,
|
||
},
|
||
'weixing': {
|
||
type: 'raster',
|
||
tiles: [
|
||
`http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||
],
|
||
tileSize: 256,
|
||
},
|
||
'yingxiang': {
|
||
type: 'raster',
|
||
tiles: [
|
||
VITE_GLOB_YINGXIANG_SERVER,
|
||
],
|
||
tileSize: 256,
|
||
}
|
||
},
|
||
layers: [
|
||
|
||
{
|
||
id: 'dianzi-biaozhu',
|
||
type: 'raster',
|
||
source: 'dianzi-biaozhu',
|
||
layout: {
|
||
visibility: 'visible',
|
||
}
|
||
},{
|
||
id: 'weixing',
|
||
type: 'raster',
|
||
source: 'weixing',
|
||
layout: {
|
||
visibility: 'none',
|
||
}
|
||
},
|
||
{
|
||
id: 'yingxiang',
|
||
type: 'raster',
|
||
source: 'yingxiang',
|
||
layout: {
|
||
visibility: 'none',
|
||
}
|
||
},{
|
||
id: 'dianzi',
|
||
type: 'raster',
|
||
source: 'dianzi',
|
||
layout: {
|
||
visibility: 'visible',
|
||
}
|
||
}
|
||
],
|
||
},
|
||
maxZoom:24,
|
||
minZoom:8,
|
||
zoom: 10,
|
||
pitch:0,
|
||
center: [117.984425,35.270654],
|
||
});
|
||
};
|
||
|
||
// 获取图斑面数据
|
||
const polygonVisibility = ref<String>("none");
|
||
|
||
function handlerLoadPolygon(code="",filter="",type=""){
|
||
let sql_filter;
|
||
if(code){
|
||
sql_filter = "&filter=\"countyid\"=\'"+code+"\' and \"typename\"=\'农用地\'";
|
||
}else{
|
||
// sql_filter=""
|
||
sql_filter="&filter=\"typename\"=\'农用地\'"
|
||
}
|
||
let map_filter;
|
||
|
||
switch(filter){
|
||
case "合法":
|
||
map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
|
||
break;
|
||
case "违法":
|
||
map_filter = ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]];
|
||
break;
|
||
case "其他":
|
||
map_filter = ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]];
|
||
break;
|
||
case "补办手续":
|
||
map_filter = ["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]];
|
||
break;
|
||
case "拆除复耕":
|
||
map_filter = ["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]];
|
||
break;
|
||
default:
|
||
map_filter = ["!=", ["get", "gid"], 0];
|
||
}
|
||
let type_filter;
|
||
switch(type){
|
||
case "农用地":
|
||
type_filter = ["==", ["get", "typename"], "农用地"];
|
||
break;
|
||
case "建设用地":
|
||
type_filter = ["==", ["get", "typename"], "建设用地"];
|
||
break;
|
||
case "推堆土":
|
||
type_filter = ["==", ["get", "typename"], "推堆土"];
|
||
break;
|
||
}
|
||
if(filter && type){
|
||
map_filter.push(type_filter);
|
||
}else if(!filter && type){
|
||
map_filter = ["all",["!=", ["get", "gid"], 0],type_filter];
|
||
}
|
||
|
||
// alert(map_filter);
|
||
// console.log("map_filter123",map_filter);
|
||
|
||
if(map.getSource("historyLayerLine")){
|
||
polygonVisibility.value = map.getLayoutProperty('historyLayerLine', 'visibility');
|
||
map.removeLayer("historyLayerLine")
|
||
map.removeLayer("historyLayerFill")
|
||
map.removeSource("historyLayerLine")
|
||
map.removeSource("historyLayerFill");
|
||
}
|
||
|
||
|
||
map.addLayer(
|
||
{
|
||
'id': 'historyLayerLine',
|
||
'type': 'line',
|
||
'source': {
|
||
type: 'vector',
|
||
tiles: [VITE_GLOB_API_URL_VAR.value+'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_wfyd_map'+sql_filter+'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"measure_name\",\"typename\",\"Id\",'],
|
||
minzoom: 1,
|
||
maxzoom: 20
|
||
},
|
||
"source-layer": "view_drone_wfyd_map",
|
||
'layout': {
|
||
'line-join': 'round',
|
||
'line-cap': 'round',
|
||
'visibility':polygonVisibility.value,
|
||
},
|
||
'filter':map_filter,
|
||
'paint': {
|
||
'line-color': [
|
||
"case",
|
||
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
||
"#0AF703",
|
||
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
|
||
"#F70303",
|
||
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
||
"#0382F7",
|
||
["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]], //补办手续
|
||
"#AD04F4",
|
||
["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]], //拆除复耕
|
||
"#F4E004",
|
||
// 默认
|
||
"#F70303",
|
||
],
|
||
'line-width': 5
|
||
}
|
||
}
|
||
)
|
||
map.addLayer({
|
||
'id': 'historyLayerFill',
|
||
'type': 'fill',
|
||
'source': {
|
||
type: 'vector',
|
||
tiles: [VITE_GLOB_API_URL_VAR.value+'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_wfyd_map'+sql_filter+'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"measure_name\",\"typename\",\"Id\",'],
|
||
//
|
||
minzoom: 1,
|
||
maxzoom: 20
|
||
},
|
||
"source-layer": "view_drone_wfyd_map",
|
||
'filter':map_filter,
|
||
'layout':{
|
||
'visibility':polygonVisibility.value,
|
||
},
|
||
'paint': {
|
||
'fill-color': [
|
||
"case",
|
||
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
||
"#0AF703",
|
||
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
|
||
"#F70303",
|
||
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
||
"#0382F7",
|
||
["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]], //补办手续
|
||
"#AD04F4",
|
||
["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]], //拆除复耕
|
||
"#F4E004",
|
||
// 默认
|
||
"#F70303",
|
||
],
|
||
'fill-opacity': 0.4
|
||
}
|
||
})
|
||
|
||
map.on("click","historyLayerFill",(e)=>{
|
||
emits("handlerGetDetails",e.features[0].properties);
|
||
})
|
||
}
|
||
|
||
// 获取和处理图斑点数据
|
||
const currentCode = ref("")
|
||
async function handlerDealPoint(code=""){
|
||
let sql_filter;
|
||
if(code){
|
||
sql_filter = "\"countyid\"=\'"+code+"\' and \"typename\"=\'农用地\'";
|
||
}else{
|
||
sql_filter="\"typename\"=\'农用地\'"
|
||
}
|
||
let points = await getPolygonCenter({tablename:"view_drone_wfyd_map",filter:sql_filter,createtime:dayjs().subtract(30, 'day').format('YYYY-MM-DD')})
|
||
|
||
let heatdata = {
|
||
type: "FeatureCollection",
|
||
features:[]
|
||
}
|
||
points?.forEach((item,index)=>{
|
||
let geometry = WktToGeojson(item['centroid_point']);
|
||
let feature = {
|
||
geometry:geometry,
|
||
properties:{
|
||
mag:parseFloat((5*Math.random()).toFixed(1)),
|
||
}
|
||
}
|
||
heatdata.features.push(feature);
|
||
})
|
||
|
||
handlerLoadHeatLayer(heatdata);
|
||
|
||
if(map.getLayer('clusters')){
|
||
map.moveLayer("clusters","heatLayer");
|
||
map.moveLayer("cluster-count","heatLayer")
|
||
map.moveLayer("unclustered-point","heatLayer")
|
||
}
|
||
|
||
}
|
||
// 获取遮罩数据
|
||
function getMaskData(){
|
||
axios({
|
||
method:"get",
|
||
url:`http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
|
||
}).then(res=>{
|
||
let geojson = {DATA:res.data.features[0].geometry.coordinates[0][0]}
|
||
handlerLoadMaskLayer(geojson);
|
||
});
|
||
|
||
}
|
||
|
||
// 加载地图遮罩
|
||
function handlerLoadMaskLayer(geojson){
|
||
map.addLayer({
|
||
//蒙版图层 //通过边界数据反选 达到挖洞效果
|
||
id: 'mb-tag',
|
||
type: 'fill',
|
||
source: {
|
||
type: 'geojson',
|
||
data: {
|
||
type: 'Feature',
|
||
geometry: {
|
||
type: 'Polygon',
|
||
coordinates: [
|
||
[
|
||
// 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
|
||
[-180, 90],
|
||
[180, 90],
|
||
[180, -90],
|
||
[-180, -90],
|
||
],
|
||
geojson.DATA,
|
||
],
|
||
},
|
||
},
|
||
},
|
||
paint: {
|
||
'fill-color': '#ffffff',
|
||
'fill-opacity': 1 /* 透明度 */,
|
||
},
|
||
layout: {
|
||
visibility: 'visible',
|
||
},
|
||
});
|
||
|
||
if(map.getLayer('countyLayer')){
|
||
map.moveLayer("countyLayer","mb-tag")
|
||
}
|
||
}
|
||
|
||
// 加载热力图图斑数据
|
||
function handlerLoadHeatLayer(heatdata){
|
||
// console.log("heatdata123",heatdata);
|
||
// heatdata.features = heatdata.features.slice(0,2000);
|
||
// let rediusProportion = heatdata.features.length/333;
|
||
|
||
if(map.getSource("heatSource")){
|
||
map.getSource("heatSource").setData(heatdata);
|
||
}else{
|
||
map.addSource('heatSource', {
|
||
'type': 'geojson',
|
||
'data': heatdata
|
||
});
|
||
map.addLayer(
|
||
{
|
||
'id': 'heatLayer',
|
||
'type': 'heatmap',
|
||
'source': 'heatSource',
|
||
'maxzoom': 15,
|
||
'minzoom':7,
|
||
'layout':{
|
||
"visibility":"visible"
|
||
},
|
||
// 'paint': {
|
||
// 'heatmap-weight': [
|
||
// 'interpolate',
|
||
// ['linear'],
|
||
// ['get', 'mag'],
|
||
// 1,
|
||
// 2,
|
||
// 3,
|
||
// 4
|
||
// ],
|
||
// 'heatmap-intensity': [
|
||
// 'interpolate',
|
||
// ['linear'],
|
||
// ['zoom'],
|
||
// 0,
|
||
// 1,
|
||
// 9,
|
||
// 3
|
||
// ],
|
||
// 'heatmap-color': [
|
||
// 'interpolate',
|
||
// ['linear'],
|
||
// ['heatmap-density'],
|
||
// 0,
|
||
// 'rgba(33,102,172,0)',
|
||
// 0.2,
|
||
// 'rgba(103,169,207,0.8)',
|
||
// 0.4,
|
||
// 'rgba(209,229,240,0.8)',
|
||
// 0.6,
|
||
// 'rgba(253,219,199,0.8)',
|
||
// 0.8,
|
||
// 'rgba(239,138,98,0.8)',
|
||
// 1,
|
||
// 'rgba(178,24,43,0.8)'
|
||
// ],
|
||
// 'heatmap-radius': [
|
||
// 'interpolate',['linear'],['zoom'],
|
||
// 2,
|
||
// 7,
|
||
// 11,
|
||
// 20
|
||
// ],
|
||
// 'heatmap-opacity': [
|
||
// 'interpolate',
|
||
// ['linear'],
|
||
// ['zoom'],
|
||
// 7,
|
||
// 0,
|
||
// 8,
|
||
// 1
|
||
// ]
|
||
// }
|
||
'paint': {
|
||
'heatmap-weight': 1,
|
||
'heatmap-intensity': 1,
|
||
'heatmap-color': [
|
||
'interpolate',
|
||
['linear'],
|
||
['heatmap-density'],
|
||
0,
|
||
'rgba(33,102,172,0)',
|
||
0.1,
|
||
'rgba(51, 71, 255 ,0.1)',
|
||
0.4,
|
||
'rgba(51, 255, 81 ,0.5)',
|
||
0.6,
|
||
'rgba(253,219,199,0.6)',
|
||
0.8,
|
||
'rgba(255, 90, 51,0.5)',
|
||
0.9,
|
||
'rgba(214,34,8,0.6)',
|
||
1,
|
||
'rgba(178,24,43,0.7)'
|
||
],
|
||
// 'heatmap-radius': 8,
|
||
|
||
// 根据缩放等级设置热力图色彩 等级,热力图密度
|
||
'heatmap-radius': [
|
||
'interpolate',['linear'],['zoom'],
|
||
9,5,
|
||
10,18,
|
||
11,20,
|
||
12,24,
|
||
14,28,
|
||
],
|
||
'heatmap-opacity': 0.9
|
||
}
|
||
}
|
||
);
|
||
}
|
||
|
||
|
||
handlerLoadConvergeLayer(heatdata);
|
||
|
||
if(map.getLayer('heatLayer')){
|
||
map.moveLayer('heatLayer', 'historyLayerLine');
|
||
map.moveLayer('heatLayer', 'historyLayerFill');
|
||
if(map.getLayer('clusters')){
|
||
map.moveLayer("clusters","heatLayer");
|
||
map.moveLayer("cluster-count","heatLayer")
|
||
map.moveLayer("unclustered-point","heatLayer")
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
// 地图定位
|
||
function handlerLocation(lngLat,zoom){
|
||
map.flyTo({
|
||
center: lngLat,
|
||
zoom: zoom,
|
||
bearing: 0,
|
||
speed: 1, // 飞行速度
|
||
curve: 2, // 飞行曲线
|
||
essential: true,
|
||
easing(t) {
|
||
// 飞行动画函数
|
||
return t;
|
||
},
|
||
});
|
||
};
|
||
|
||
// 获取县区边界数据
|
||
const handlerDealCountry = (countyName:String = "临沂市"):void=>{
|
||
let center = {};
|
||
let zoom;
|
||
let filterName: any = "";
|
||
if(countyName == '临沂市'){
|
||
center ={lng: 118.72504868812163, lat: 35.180072027132915}
|
||
zoom = 7.848587811931849;
|
||
handlerLocation([center['lng'],center['lat']],zoom);
|
||
|
||
axios({
|
||
method:"get",
|
||
// url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
|
||
url:`http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
|
||
}).then(res=>{
|
||
handlerLoadCountyLayer(res.data);
|
||
});
|
||
} else if(countyName){
|
||
|
||
center = MAP_VIEWER[countyName].center;
|
||
zoom = MAP_VIEWER[countyName].zoom;
|
||
handlerLocation([center['lng'],center['lat']],zoom);
|
||
filterName=countyName;
|
||
|
||
axios({
|
||
method:"get",
|
||
// url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
|
||
url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc_1%20like%20%27%25${filterName}%25%27`,
|
||
}).then(res=>{
|
||
console.log("res",res);
|
||
handlerLoadCountyLayer(res.data);
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
// 渲染边界数据
|
||
const handlerLoadCountyLayer = (geojson)=>{
|
||
// 绘制线
|
||
if(map.getSource("countySource")){
|
||
map.getSource("countySource").setData(geojson);
|
||
}else{
|
||
map.addSource("countySource",{
|
||
type:"geojson",
|
||
data:geojson
|
||
})
|
||
map.addLayer(
|
||
{
|
||
"id": "countyLayer",
|
||
"type": "line",
|
||
"source": "countySource",
|
||
"paint": {
|
||
'line-color': '#6F7FF4', // 设置线的颜色
|
||
'line-width': 3 // 设置线的宽度
|
||
}
|
||
}
|
||
)
|
||
if(map.getLayer('mb-tag')){
|
||
map.moveLayer("countyLayer","mb-tag")
|
||
}
|
||
}
|
||
}
|
||
|
||
// 控制图层显示隐层
|
||
/**
|
||
* 热力图：heatLayer
|
||
*
|
||
* 图斑线：historyLayerLine
|
||
*
|
||
* 图斑面：historyLayerFill
|
||
*
|
||
* 行政区划：countyLayer
|
||
*
|
||
* */
|
||
function handlerChangeLayerVisible(layerName,checked){
|
||
if (checked) {
|
||
map.setLayoutProperty(layerName, 'visibility', 'visible');
|
||
} else {
|
||
map.setLayoutProperty(layerName, 'visibility', 'none');
|
||
}
|
||
}
|
||
|
||
// 切换县区
|
||
function handlerChangeCounty(county,type=""){
|
||
handlerDealCountry(county.name);
|
||
handlerLoadPolygon(county.code,type);
|
||
handlerDealPoint(county.code);
|
||
}
|
||
|
||
// 加载汇聚图
|
||
function handlerLoadConvergeLayer(geojson){
|
||
if(map.getSource("earthquakes")){
|
||
map.getSource("earthquakes").setData(geojson);
|
||
}else{
|
||
map.addSource('earthquakes', {
|
||
type: 'geojson',
|
||
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
|
||
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
|
||
data: geojson,
|
||
cluster: true,
|
||
clusterMaxZoom: 14, // Max zoom to cluster points on
|
||
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
|
||
});
|
||
|
||
map.addLayer({
|
||
id: 'clusters',
|
||
type: 'circle',
|
||
source: 'earthquakes',
|
||
filter: ['has', 'point_count'],
|
||
layout:{
|
||
'visibility':'none',
|
||
},
|
||
paint: {
|
||
// Use step expressions (https://docs.mapbox.com/style-spec/reference/expressions/#step)
|
||
// with three steps to implement three types of circles:
|
||
// * Blue, 20px circles when point count is less than 100
|
||
// * Yellow, 30px circles when point count is between 100 and 750
|
||
// * Pink, 40px circles when point count is greater than or equal to 750
|
||
'circle-color': [
|
||
'step',
|
||
['get', 'point_count'],
|
||
'rgba(51, 71, 255 ,0.6)',
|
||
50,
|
||
'rgba(51, 255, 81 ,0.6)',
|
||
200,
|
||
'rgba(253,219,199,0.9)',
|
||
300,
|
||
'rgba(255, 90, 51,1)',
|
||
400,
|
||
'rgba(214,34,8,0.9)',
|
||
700,
|
||
'rgba(178,24,43,1)'
|
||
|
||
],
|
||
'circle-radius': [
|
||
'step',
|
||
['get', 'point_count'],
|
||
20,
|
||
100,
|
||
30,
|
||
750,
|
||
40
|
||
]
|
||
}
|
||
});
|
||
|
||
map.addLayer({
|
||
id: 'cluster-count',
|
||
type: 'symbol',
|
||
source: 'earthquakes',
|
||
filter: ['has', 'point_count'],
|
||
layout: {
|
||
'visibility':'none',
|
||
'text-field': ['get', 'point_count_abbreviated'],
|
||
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
|
||
'text-size': 12
|
||
}
|
||
});
|
||
|
||
map.addLayer({
|
||
id: 'unclustered-point',
|
||
type: 'circle',
|
||
source: 'earthquakes',
|
||
filter: ['!', ['has', 'point_count']],
|
||
layout:{
|
||
'visibility':'none',
|
||
},
|
||
paint: {
|
||
'circle-color': '#11b4da',
|
||
'circle-radius': 4,
|
||
'circle-stroke-width': 1,
|
||
'circle-stroke-color': '#fff'
|
||
}
|
||
});
|
||
|
||
if(map.getLayer('clusters')){
|
||
map.moveLayer("clusters","heatLayer");
|
||
map.moveLayer("cluster-count","heatLayer")
|
||
map.moveLayer("unclustered-point","heatLayer")
|
||
}
|
||
}
|
||
}
|
||
|
||
//
|
||
onMounted(()=>{
|
||
mapboxgl.accessToken = MAPBOX_TOKEN;
|
||
map = initMap();
|
||
map.on("load",()=>{
|
||
// handlerDealCountry();
|
||
// handlerDealPoint();
|
||
// handlerLoadPolygon();
|
||
// handlerLoadMaskLayer();
|
||
getMaskData();
|
||
emits("onload");
|
||
map.on("click",(e)=>{
|
||
var center = map.getCenter(); // 获取当前视图中心点
|
||
var zoom = map.getZoom(); // 获取当前视图缩放级别
|
||
console.log(zoom);
|
||
console.log(center);
|
||
})
|
||
})
|
||
})
|
||
|
||
|
||
// 抛出函数
|
||
defineExpose({
|
||
handlerChangeCounty, // 切换县区
|
||
handlerChangeLayerVisible, // 控制图层显示隐藏
|
||
handlerLoadPolygon,
|
||
});
|
||
|
||
</script>
|
||
<style type="less" scoped>
|
||
.map-container{
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
::v-deep .mapboxgl-ctrl-logo{
|
||
display: none!important;
|
||
}
|
||
</style>
|