vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩
更新時(shí)間：2023年10月25日 08:43:12 作者：跳跳的小古風(fēng)
這篇文章主要介紹了vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩
需求
給指定區(qū)劃以外的地方添加蒙版遮罩
- 初始效果
- 需求效果
map.addLayer({
//蒙版邊界
id: 'mb-line',
type: 'line',
source: {
type: 'geojson',
data:reData, //區(qū)劃的面數(shù)據(jù)
},
paint: {
'line-color': 'rgba(100,149,237,0.8)',
"line-width": 8
},
layout: {
visibility: 'visible',
},
});
map.addLayer({
//蒙版圖層 //通過邊界數(shù)據(jù)反選 達(dá)到挖洞效果
id: 'mb-tag',
type: 'fill',
source: {
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
// 多邊形外圍 需要進(jìn)行遮罩的點(diǎn) 這里是給世界地圖加遮罩 所以是世界的四個(gè)端點(diǎn)
[-180, 90],
[180, 90],
[180, -90],
[-180, -90],
],
// 第 1個(gè)孔
//例如：[
// [31.4566,121.2671],
// [31.3481,121.2382],
// [31.3934,121.3659]
// ],
//這里從世界地圖挖掉指定區(qū)劃的面數(shù)據(jù)，
//我們將原來的面數(shù)據(jù)處理一樣
//let mbData = results.geometry.coordinates[0].flat(1);
//取面數(shù)據(jù) coordinates的第一層并拉平 形成例如的經(jīng)緯度數(shù)組
mbData,
],
},
},
},
paint: {
'fill-color': 'rgba(200,202,199,.68)',
// 'fill-opacity': 1 /* 透明度 */,
},
layout: {
visibility: 'visible',
},
});
- 蒙版邊界數(shù)據(jù)格式
- 蒙版遮罩?jǐn)?shù)據(jù)格式
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element-ui實(shí)現(xiàn)表格編輯的三種實(shí)現(xiàn)方式
這篇文章主要介紹了vue+element-ui實(shí)現(xiàn)表格編輯的三種實(shí)現(xiàn)方式，主要有表格內(nèi)部顯示和編輯切換，通過彈出另外一個(gè)表格編輯和直接通過樣式控制三種方式，感興趣的小伙伴們可以參考一下2018-10-10
將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟
最近接了個(gè)小活,其中甲方要求把vue項(xiàng)目打包成exe安裝在windows上,其中有也會(huì)出現(xiàn)一些小問題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關(guān)于將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟,需要的朋友可以參考下2023-10-10
vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務(wù)端返回?cái)?shù)據(jù)）
這篇文章主要介紹了vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務(wù)端返回?cái)?shù)據(jù)），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
插件功能開發(fā)完成后，若需要發(fā)布到公共組件庫中（例如：npmjs），需要對(duì)插件進(jìn)行打包并發(fā)布，這篇文章主要介紹了Vue插件打包與發(fā)布的方法示例，感興趣的小伙伴們可以參考一下2018-08-08
使用WebStorm開發(fā)Vue3項(xiàng)目詳細(xì)教程
這篇文章主要介紹了使用WebStorm開發(fā)Vue3項(xiàng)目的相關(guān)資料,本文介紹了在WebStorm中使用Vue3、TypeScript、Sass開發(fā)項(xiàng)目的配置過程,包括版本兼容性問題、項(xiàng)目搭建、依賴包安裝、代碼檢查工具配置、運(yùn)行和調(diào)試等步驟,需要的朋友可以參考下2024-11-11
vue3循環(huán)設(shè)置ref并獲取的解決方案
我們?cè)谄綍r(shí)做業(yè)務(wù)的時(shí)候,父子組件通信會(huì)經(jīng)常用到ref,這篇文章主要給大家介紹了關(guān)于vue3循環(huán)設(shè)置ref并獲取的解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue.js的靈魂是組件，而組件的靈魂是插槽。借助于插槽，我們能最大程度上實(shí)現(xiàn)組件復(fù)用。本文主要是對(duì)插槽的實(shí)現(xiàn)機(jī)制進(jìn)行詳細(xì)概括總結(jié)，在某些場(chǎng)景中，有一定的用處2021-06-06
vue學(xué)習(xí)筆記之過濾器的基本使用方法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之過濾器的基本使用方法,結(jié)合實(shí)例形式分析了vue.js過濾器的基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue使用Swiper的案例詳解，主要包括引入swiper,創(chuàng)建輪播圖組件CarouselContainer.vue的詳細(xì)代碼，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-06-06
Vue.js中的全局錯(cuò)誤處理函數(shù)errorHandler用法
這篇文章主要介紹了Vue.js中的全局錯(cuò)誤處理函數(shù)errorHandler用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06