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