vue使用mapbox_使用Vue和Mapbox GL JS构建的邻域指示器仪表板-CSDN博客

vue使用mapbox

生活质量控制台v3 (Quality of Life Dashboard v3)

A dashboard for community data and health.

社区数据和健康状况的仪表板。

View demo 查看演示 Download Source 下载源

开始使用 (Get Started)

This project requires git and NodeJS.

这个项目需要git和NodeJS 。

git clone https://github.com/tobinbradley/quality-of-life-dashboard.git dashboard
cd dashboard
git clone https://github.com/tobinbradley/mecklenburg-quality-of-life-data.git data
npm install
npm run build
npm start

The Dashboard should launch in your default web browser with a live reload server. To build the site for production, run npm run build and copy the public folder contents to your web server.

仪表板应在带有实时重载服务器的默认Web浏览器中启动。要建立生产现场，运行npm run build和复制public文件夹的内容到你的Web服务器。

自定义仪表板 (Customizing the Dashboard)

Most Dashboard customization can be accomplished by creating your own data repository following the directions here. The data repository includes Dashboard meta (title, author, keywords, etc.), map style and configuration settings, data, etc.

可以按照此处的说明通过创建自己的数据存储库来完成大多数仪表板定制。数据存储库包括仪表板元数据(标题，作者，关键字等)，地图样式和配置设置，数据等。

The Dashboard is built using Vue.js, Mapbox GL JS, and Material Design Lite. The business end of things consists of independent Vue.js components in app/js/components. You can very easily create or disable components as needed. Each component has a shared state between all the components, and some components have a private state for things only needed by that component.

仪表板是使用Vue.js，Mapbox GL JS和Material Design Lite构建的。事物的业务端由app / js / components中的独立Vue.js组件组成。您可以根据需要非常轻松地创建或禁用组件。每个组件在所有组件之间都具有共享状态，而某些组件对于该组件仅需要的事物具有私有状态。

The app/js/search.vue component searches for the geography id, zip codes, and addresses. Zip code and address searches use HTTP API's from our Dirt Simple PostGIS HTTP API project with Mecklenburg data and won't work for other areas (only the geography ID search will work). Setting up new searches is fairly straight-forward and you can customize it to meet your needs.

app / js / search.vue组件搜索地理位置ID，邮政编码和地址。邮编和地址搜索使用来自Dirt Simple PostGIS HTTP API项目的HTTP API和梅克伦堡数据，不适用于其他区域(仅地理ID搜索可用)。设置新搜索非常简单，您可以对其进行自定义以满足您的需求。

To disable the non-geography searches, comment out everything but searchNeighborhood in the search method of app/js/search.vue.

要禁用非地理搜索， searchNeighborhood在app/js/search.vue的search方法中app/js/search.vue 。

search: function() {
    let query = this.privateState.query.trim();

    this.searchNeighborhood(query);
    //this.searchAddress(query);
    //this.searchZipcode(query);
},