771 lines
22 KiB
Vue
771 lines
22 KiB
Vue
<template>
|
||
<div :id="mapContainerName" class="map-container">
|
||
<div class="search-container-box">
|
||
<SearchComponent @toPosition="toPosition" @handlerFilter="handlerFilter"></SearchComponent>
|
||
</div>
|
||
</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 '@/views/sys/exception/Converge/config';
|
||
import { getPolygonCenter, getUserOrgs } from '@/api/tiankongdi';
|
||
import axios from 'axios';
|
||
import SearchComponent from './SearchComponent/index.vue';
|
||
import { getAppEnvConfig } from '@/utils/env';
|
||
import { Base64 } from 'js-base64';
|
||
|
||
const { VITE_GLOB_YINGXIANG_SERVER, VITE_GLOB_API_URL, VITE_GLOB_GEOSERVER_URL } =
|
||
getAppEnvConfig();
|
||
|
||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
|
||
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: {
|
||
'raster-tiles': {
|
||
type: 'raster',
|
||
tiles: [
|
||
`http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||
],
|
||
tileSize: 256,
|
||
},
|
||
'raster-tiles-font': {
|
||
type: 'raster',
|
||
tiles: [
|
||
`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||
],
|
||
tileSize: 256,
|
||
},
|
||
// 'raster-tiles-geo': {
|
||
// type: 'raster',
|
||
// tiles: [
|
||
// VITE_GLOB_YINGXIANG_SERVER,
|
||
// ],
|
||
// tileSize: 256,
|
||
// }
|
||
},
|
||
layers: [
|
||
{
|
||
id: 'tdt-vec-tiles',
|
||
type: 'raster',
|
||
source: 'raster-tiles-font',
|
||
maxZoom: 32,
|
||
},
|
||
{
|
||
id: 'tdt-img-tiles',
|
||
type: 'raster',
|
||
source: 'raster-tiles',
|
||
maxZoom: 32,
|
||
},
|
||
// {
|
||
// id: 'tdt-wms-tiles',
|
||
// type: 'raster',
|
||
// source: 'raster-tiles-geo',
|
||
// },
|
||
],
|
||
},
|
||
maxZoom: 22,
|
||
minZoom: 8,
|
||
zoom: 10,
|
||
pitch: 0,
|
||
center: [117.984425, 35.270654],
|
||
});
|
||
};
|
||
|
||
// 获取线索面数据
|
||
const mainPolygonVisibility = ref<String>('visible');
|
||
|
||
const isRootLevel = ref<Boolean>(false);
|
||
async function handlerCheckUserOrgs() {
|
||
let orgs = await getUserOrgs({});
|
||
let isLevel = orgs.find((item, index) => {
|
||
return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
|
||
});
|
||
if (isLevel) {
|
||
isRootLevel.value = true;
|
||
handlerLoadPolygon('', '', '', '1');
|
||
} else {
|
||
isRootLevel.value = false;
|
||
handlerLoadPolygon();
|
||
}
|
||
}
|
||
|
||
function handlerLoadPolygon(code = '', filter = '', type = '', level = '') {
|
||
let sql_filter;
|
||
if (code) {
|
||
sql_filter = '"countyid"=\'' + code + "\'";
|
||
} else {
|
||
sql_filter = '';
|
||
}
|
||
let main_map_filter;
|
||
switch (filter) {
|
||
case '合法':
|
||
main_map_filter = [
|
||
'all',
|
||
['==', ['get', 'is_illegal'], 1],
|
||
['==', ['get', 'handle_status_id'], 99],
|
||
];
|
||
break;
|
||
case '其他':
|
||
main_map_filter = [
|
||
'all',
|
||
['==', ['get', 'is_illegal'], 3],
|
||
['==', ['get', 'handle_status_id'], 99],
|
||
];
|
||
break;
|
||
case '开采违法':
|
||
main_map_filter = [
|
||
'all',
|
||
['==', ['get', 'is_illegal'], 2],
|
||
['==', ['get', 'typename'], '开采'],
|
||
['==', ['get', 'handle_status_id'], 99],
|
||
];
|
||
break;
|
||
case '加工违法':
|
||
main_map_filter = [
|
||
'all',
|
||
['==', ['get', 'is_illegal'], 2],
|
||
['==', ['get', 'typename'], '加工'],
|
||
['==', ['get', 'handle_status_id'], 99],
|
||
];
|
||
break;
|
||
default:
|
||
main_map_filter = ['!=', ['get', 'gid'], 0];
|
||
}
|
||
|
||
if (map.getSource('mainHistoryLayerLine')) {
|
||
mainPolygonVisibility.value = map.getLayoutProperty('mainHistoryLayerLine', 'visibility');
|
||
map.removeLayer('mainHistoryLayerLine');
|
||
map.removeLayer('mainHistoryLayerFill');
|
||
map.removeSource('mainHistoryLayerLine');
|
||
map.removeSource('mainHistoryLayerFill');
|
||
}
|
||
|
||
if (level) {
|
||
} else {
|
||
sql_filter =
|
||
'streetid in ( select CAST(\"OrgId\" AS VARCHAR) from sys_userorg where \"UserId\" = ' +
|
||
localStorage.getItem('userid') +
|
||
') or countyid in ( select CAST(\"OrgId\" AS VARCHAR) from sys_userorg where \"UserId\" = ' +
|
||
localStorage.getItem('userid') +
|
||
')';
|
||
}
|
||
|
||
map.addLayer({
|
||
id: 'mainHistoryLayerLine',
|
||
type: 'line',
|
||
source: {
|
||
type: 'vector',
|
||
tiles: [
|
||
VITE_GLOB_API_URL_VAR.value +
|
||
'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_caseinfo_minerals' +
|
||
'&filter=' +
|
||
Base64.encode(sql_filter) +
|
||
'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"typename\",\"Id\",',
|
||
],
|
||
minzoom: 1,
|
||
maxzoom: 20,
|
||
cluster: true, // 启用聚合
|
||
clusterMaxZoom: 0, // 最大聚合缩放级别
|
||
clusterRadius: 0, // 聚合半径
|
||
},
|
||
'source-layer': 'view_drone_caseinfo_minerals',
|
||
layout: {
|
||
'line-join': 'round',
|
||
'line-cap': 'round',
|
||
visibility: mainPolygonVisibility.value,
|
||
},
|
||
filter: main_map_filter,
|
||
paint: {
|
||
'line-color': [
|
||
'case',
|
||
['all', ['==', ['get', 'is_illegal'], 1], ['==', ['get', 'handle_status_id'], 99]], //合法
|
||
'#0AF703',
|
||
['all', ['==', ['get', 'is_illegal'], 3], ['==', ['get', 'handle_status_id'], 99]], //其他
|
||
'#0382F7',
|
||
[
|
||
'all',
|
||
['==', ['get', 'is_illegal'], 2],
|
||
['==', ['get', 'handle_status_id'], 99],
|
||
['==', ['get', 'typename'], '加工'],
|
||
], //加工违法
|
||
'#AD04F4',
|
||
[
|
||
'all',
|
||
['==', ['get', 'is_illegal'], 2],
|
||
['==', ['get', 'handle_status_id'], 99],
|
||
['==', ['get', 'typename'], '开采'],
|
||
], //开采违法
|
||
'#F70303',
|
||
// 默认
|
||
'#F4E004',
|
||
],
|
||
'line-width': 5,
|
||
},
|
||
});
|
||
|
||
map.addLayer({
|
||
id: 'mainHistoryLayerFill',
|
||
type: 'fill',
|
||
source: {
|
||
type: 'vector',
|
||
tiles: [
|
||
VITE_GLOB_API_URL_VAR.value +
|
||
'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_caseinfo_minerals' +
|
||
'&filter=' +
|
||
Base64.encode(sql_filter) +
|
||
'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"typename\",\"Id\",',
|
||
],
|
||
minzoom: 1,
|
||
maxzoom: 20,
|
||
cluster: false,
|
||
},
|
||
'source-layer': 'view_drone_caseinfo_minerals',
|
||
filter: main_map_filter,
|
||
layout: {
|
||
visibility: mainPolygonVisibility.value,
|
||
},
|
||
paint: {
|
||
'fill-color': [
|
||
'case',
|
||
['all', ['==', ['get', 'is_illegal'], 1], ['==', ['get', 'handle_status_id'], 99]], //合法
|
||
'#0AF703',
|
||
['all', ['==', ['get', 'is_illegal'], 3], ['==', ['get', 'handle_status_id'], 99]], //其他
|
||
'#0382F7',
|
||
[
|
||
'all',
|
||
['==', ['get', 'is_illegal'], 2],
|
||
['==', ['get', 'handle_status_id'], 99],
|
||
['==', ['get', 'typename'], '加工'],
|
||
], //加工违法
|
||
'#AD04F4',
|
||
[
|
||
'all',
|
||
['==', ['get', 'is_illegal'], 2],
|
||
['==', ['get', 'handle_status_id'], 99],
|
||
['==', ['get', 'typename'], '开采'],
|
||
], //开采违法
|
||
'#F70303',
|
||
// 默认
|
||
'#F4E004',
|
||
],
|
||
'fill-opacity': 0.5,
|
||
},
|
||
});
|
||
|
||
emits('onload');
|
||
map.on('click', 'mainHistoryLayerFill', (e) => {
|
||
emits('handlerGetDetails', e.features[0].properties);
|
||
});
|
||
}
|
||
|
||
// 获取和处理线索点数据
|
||
const currentCode = ref('');
|
||
async function handlerDealPoint(code = '') {
|
||
let sql_filter;
|
||
if (code) {
|
||
sql_filter = '"countyid"=\'' + code + "\'";
|
||
} else {
|
||
sql_filter = '';
|
||
}
|
||
let points = await getPolygonCenter({
|
||
tablename: 'view_drone_caseinfo_wpxf',
|
||
filter: sql_filter,
|
||
});
|
||
|
||
let heatdata = {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
};
|
||
points?.forEach((item, index) => {
|
||
let geometry = WktToGeojson(item['centroid_point']);
|
||
let feature = {
|
||
geometry: geometry,
|
||
properties: {
|
||
mag: 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 toPosition(item) {
|
||
handlerLocation(item, 17.2);
|
||
handlerLoadSearchResult(item);
|
||
}
|
||
|
||
function handlerFilter(item) {
|
||
console.log(item);
|
||
// handlerLoadPolygon("",item);
|
||
if (isRootLevel.value) {
|
||
handlerLoadPolygon('', item, '', '1');
|
||
} else {
|
||
handlerLoadPolygon('', item, '', '');
|
||
}
|
||
}
|
||
function handlerLoadSearchResult(item) {
|
||
let geojson = {
|
||
type: 'FeatureCollection',
|
||
features: [
|
||
{
|
||
type: 'Feature',
|
||
geometry: {
|
||
type: 'Point',
|
||
coordinates: item.location,
|
||
},
|
||
properties: {
|
||
name: item.id,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
}
|
||
// 加载热力图线索数据
|
||
function handlerLoadHeatLayer(heatdata) {
|
||
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: 13,
|
||
minzoom: 7,
|
||
layout: {
|
||
visibility: 'none',
|
||
},
|
||
paint: {
|
||
'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 1, 7, 0],
|
||
'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'], 4, 7, 11, 20],
|
||
'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0, 8, 1],
|
||
},
|
||
});
|
||
}
|
||
|
||
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 = '';
|
||
if (countyName == '临沂市') {
|
||
center = { lng: 118.72504868812163, lat: 35.180072027132915 };
|
||
zoom = 7.848587811931849;
|
||
handlerLocation([center['lng'], center['lat']], zoom);
|
||
} 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: `${VITE_GLOB_GEOSERVER_URL}/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson`,
|
||
}).then((res) => {
|
||
handlerLoadPanelLayer(res.data);
|
||
handlerLoadCountyLayer(res.data);
|
||
});
|
||
};
|
||
|
||
/**
|
||
*
|
||
* 县区边界：countyLayer
|
||
* 县区面板图层：countyPanelLayer
|
||
* 乡镇边界：streetLayer
|
||
* 乡镇名称图层：streetLabelLayer
|
||
* 遮罩图层：mb-tag
|
||
* 线索线：historyLayerLine
|
||
* 线索面：historyLayerFill
|
||
*
|
||
* */
|
||
// 渲染县区边界数据
|
||
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('countyPanelLayer')) {
|
||
map.moveLayer('countyLayer', 'countyPanelLayer');
|
||
}
|
||
}
|
||
};
|
||
|
||
// 渲染县界白板图层
|
||
const handlerLoadPanelLayer = (geojson) => {
|
||
if (map.getSource('countyPanelLayer')) {
|
||
map.getSource('countyPanelSource').setData(geojson);
|
||
} else {
|
||
map.addSource('countyPanelSource', {
|
||
type: 'geojson',
|
||
data: geojson,
|
||
});
|
||
map.addLayer({
|
||
id: 'countyPanelLayer',
|
||
type: 'fill',
|
||
source: 'countyPanelSource',
|
||
layout: {
|
||
visibility: 'none',
|
||
},
|
||
paint: {
|
||
'fill-color': [
|
||
'case',
|
||
['==', ['get', 'xzqdm_1'], '371302'],
|
||
'#49B0F9',
|
||
['==', ['get', 'xzqdm_1'], '371311'],
|
||
'#3EABFA',
|
||
['==', ['get', 'xzqdm_1'], '371312'],
|
||
'#27A2FB',
|
||
['==', ['get', 'xzqdm_1'], '3713122'],
|
||
'#34E6B1',
|
||
['==', ['get', 'xzqdm_1'], '3713001'],
|
||
'#1099FB',
|
||
['==', ['get', 'xzqdm_1'], '3713271'],
|
||
'#0695FB',
|
||
['==', ['get', 'xzqdm_1'], '371321'],
|
||
'#058DEE',
|
||
['==', ['get', 'xzqdm_1'], '371322'],
|
||
'#09C78E',
|
||
['==', ['get', 'xzqdm_1'], '371323'],
|
||
'#047DD4',
|
||
['==', ['get', 'xzqdm_1'], '371324'],
|
||
'#94D515',
|
||
['==', ['get', 'xzqdm_1'], '371325'],
|
||
'#0568B0',
|
||
['==', ['get', 'xzqdm_1'], '371326'],
|
||
'#3EABFA',
|
||
['==', ['get', 'xzqdm_1'], '371327'],
|
||
'#49B0F9',
|
||
['==', ['get', 'xzqdm_1'], '371328'],
|
||
'#27A2FB',
|
||
['==', ['get', 'xzqdm_1'], '371329'],
|
||
'#94D515',
|
||
'#1099FB',
|
||
],
|
||
'fill-opacity': 0.9,
|
||
},
|
||
});
|
||
}
|
||
};
|
||
|
||
function getMaskData() {
|
||
axios({
|
||
method: 'get',
|
||
url: `${VITE_GLOB_GEOSERVER_URL}/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',
|
||
},
|
||
});
|
||
}
|
||
|
||
// 获取乡镇数据
|
||
const handlerDealStreet = (countyName: String = '临沂市'): void => {
|
||
axios({
|
||
method: 'get',
|
||
url: `http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Azhenjie&maxFeatures=10000&outputFormat=application%2Fjson`,
|
||
}).then((res) => {
|
||
handlerLoadStreetLayer(res.data);
|
||
});
|
||
};
|
||
// 渲染乡镇边界数据
|
||
const handlerLoadStreetLayer = (geojson) => {
|
||
// 绘制线
|
||
if (map.getSource('streetSource')) {
|
||
map.getSource('streetSource').setData(geojson);
|
||
} else {
|
||
map.addSource('streetSource', {
|
||
type: 'geojson',
|
||
data: geojson,
|
||
minzoom: 10,
|
||
maxzoom: 24,
|
||
});
|
||
map.addLayer({
|
||
id: 'streetLayer',
|
||
type: 'line',
|
||
source: 'streetSource',
|
||
paint: {
|
||
'line-color': '#42befb', // 设置线的颜色
|
||
'line-width': 2, // 设置线的宽度
|
||
},
|
||
minzoom: 10,
|
||
maxzoom: 24,
|
||
});
|
||
|
||
map.addLayer({
|
||
id: 'streetLabelLayer',
|
||
type: 'symbol',
|
||
source: 'streetSource',
|
||
layout: {
|
||
'text-field': ['get', 'xzqmc'],
|
||
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
|
||
'text-size': 12,
|
||
'text-anchor': 'center',
|
||
},
|
||
paint: {
|
||
'text-color': '#041B36',
|
||
'text-halo-color': '#fff',
|
||
'text-halo-width': 2,
|
||
},
|
||
});
|
||
}
|
||
};
|
||
|
||
let VillageGeojson = {};
|
||
const handlerLoadVillageLayer = () => {
|
||
// 绘制线
|
||
if (map.getSource('villageSource')) {
|
||
map.getSource('villageSource').setData(VillageGeojson);
|
||
} else {
|
||
map.addSource('villageSource', {
|
||
type: 'geojson',
|
||
data: VillageGeojson,
|
||
minzoom: 12,
|
||
maxzoom: 24,
|
||
});
|
||
map.addLayer({
|
||
id: 'villageLayer',
|
||
type: 'line',
|
||
source: 'villageSource',
|
||
paint: {
|
||
'line-color': '#42befb', // 设置线的颜色
|
||
'line-width': 2, // 设置线的宽度
|
||
},
|
||
minzoom: 12,
|
||
maxzoom: 24,
|
||
});
|
||
|
||
map.addLayer({
|
||
id: 'villageLabelLayer',
|
||
type: 'symbol',
|
||
source: 'villageSource',
|
||
layout: {
|
||
'text-field': ['get', 'zldwmc'],
|
||
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
|
||
'text-size': 12,
|
||
'text-anchor': 'center',
|
||
},
|
||
paint: {
|
||
'text-color': '#041B36',
|
||
'text-halo-color': '#fff',
|
||
'text-halo-width': 2,
|
||
},
|
||
});
|
||
}
|
||
};
|
||
|
||
// 控制图层显示隐层
|
||
/**
|
||
* 热力图：heatLayer
|
||
*
|
||
* 线索线：historyLayerLine
|
||
*
|
||
* 线索面：historyLayerFill
|
||
*
|
||
* 行政区划：countyLayer
|
||
*
|
||
*
|
||
*
|
||
* */
|
||
function handlerChangeLayerVisible(layerName, checked) {
|
||
if (checked) {
|
||
map.setLayoutProperty(layerName, 'visibility', 'visible');
|
||
} else {
|
||
map.setLayoutProperty(layerName, 'visibility', 'none');
|
||
}
|
||
|
||
if (layerName == 'countyPanelLayer') {
|
||
if (map.getLayer('countyPanelLayer')) {
|
||
map.moveLayer('countyPanelLayer', 'streetLayer');
|
||
map.moveLayer('countyPanelLayer', 'streetLabelLayer');
|
||
map.moveLayer('countyPanelLayer', 'countyLayer');
|
||
map.moveLayer('countyPanelLayer', 'historyLayerFill');
|
||
map.moveLayer('countyPanelLayer', 'historyLayerLine');
|
||
}
|
||
}
|
||
}
|
||
|
||
// // 切换县区
|
||
// function handlerChangeCounty(county,type=""){
|
||
// handlerLoadPolygon(county.code,type);
|
||
// handlerDealPoint(county.code);
|
||
// handlerDealCountry(county.name);
|
||
|
||
// }
|
||
onMounted(() => {
|
||
// mapboxgl.accessToken = MAPBOX_TOKEN;
|
||
map = initMap();
|
||
map.on('load', () => {
|
||
handlerCheckUserOrgs();
|
||
getMaskData();
|
||
handlerDealStreet();
|
||
handlerDealCountry();
|
||
|
||
(map.flyTo({
|
||
center: [118.30207505530701, 35.30123435040745],
|
||
zoom: 8,
|
||
}),
|
||
map.on('click', (e) => {
|
||
var center = map.getCenter(); // 获取当前视图中心点
|
||
var zoom = map.getZoom(); // 获取当前视图缩放级别
|
||
console.log(zoom);
|
||
console.log(center);
|
||
}));
|
||
});
|
||
map &&
|
||
map.flyTo({
|
||
center: [118.30207505530701, 35.30123435040745],
|
||
zoom: 8,
|
||
});
|
||
});
|
||
|
||
// 抛出函数
|
||
defineExpose({
|
||
// handlerChangeCounty, // 切换县区
|
||
handlerChangeLayerVisible, // 控制图层显示隐藏
|
||
handlerLoadPolygon,
|
||
});
|
||
</script>
|
||
<style type="less" scoped>
|
||
.map-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.search-container-box {
|
||
position: absolute;
|
||
width: 330px;
|
||
height: 40px;
|
||
top: 72px;
|
||
left: 73px;
|
||
z-index: 9999;
|
||
}
|
||
|
||
::v-deep .mapboxgl-ctrl-logo {
|
||
display: none !important;
|
||
}
|
||
</style>
|