vue 组件传 map_Vue.js的Choropleth Map组件-CSDN博客

vue 组件传 map

Vue-choropleth (vue-choropleth)

Vue component to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet

Vue组件，用于在给定特定GeoJSON和另一个数据源的情况下显示choropleth映射，以显示信息。使用Vue2Leaflet

View demo 查看演示 Download Source 下载源

如何使用 (How to use)

将ChoroplethMap注册为组件

import ChoroplethMap from 'vue-choropleth'

Vue.component(ChoroplethMap)

Make sure the leaflet.css is included, either via a HTML link tag or in your vue component style

确保通过HTML链接标签或您的Vue组件样式包含leaflet.css

@import "~leaflet/dist/leaflet.css";

On the template:

在模板上：

<ChoroplethMap   
    :geojson="geojson"
    :data="pyDepartmentsData" 
    titleKey="department_name"
    geojsonIdKey="dpto"
    idKey="department_id" 
    :value="value" 
    :extraValues="extraValues" 
    :center="center" 
    :colorScale="colorScale"
    mapStyle="height: 500px;"
    :zoom="6" 
    :mapOptions="mapOptions">
    <template scope="props">
        <InfoControl 
            :item="props.currentItem" 
            :unit="props.unit" 
            title="Department" 
            placeholder="Hover over a department"
            position="topright">
        </InfoControl>
        <ReferenceChart 
            title="Girls school enrolment" 
            :colorScale="colorScale" 
            :min="props.min" 
            :max="props.max" 
            position="bottomright">
        </ReferenceChart>
    </template>
</ChoroplethMap>

ChoroplethMap道具 (ChoroplethMap Props)

geojson: The GeoJSON object to use
geojson ：要使用的GeoJSON对象
data: Data object with the information to show on the map
data ：数据对象，带有要在地图上显示的信息
titleKey: Property of the data object to show when you hover over a certain region of your map (e.g. state_name)
titleKey ：当您将鼠标悬停在地图的某个区域时显示的数据对象的属性(例如state_name)
geojsonIdKey: Property under the properties array of the GeoJSON that serves as identifier of each region of the map.
geojsonIdKey ：GeoJSON的属性数组下的属性，用作地图每个区域的标识符。
idKey: Property of the data object that matches the geojsonIdKey value.
idKey ：与geojsonIdKey值匹配的数据对象的属性。
value: JS object with two properties, key: that maps to the data property that contains the value domain set (e.g. amount) and metric: that maps to the data property that describes the unit that you're working on (e.g. "% of students")
值：具有两个属性JS对象，重点：映射到包含值域集(如量)和指标数据属性：映射到描述的单位，你对正在使用的数据属性(如"% of students" )
extraValues: Array of value objects that show additional information of a certain region of the map.
extraValues ：值对象数组，显示地图某些区域的附加信息。
center: Geographic coordinates of the map initial center (e.g. [-23.752961, -57.854357])
center ：地图初始中心的地理坐标(例如[-23.752961, -57.854357] )
colorScale: Array of hex color codes to fill each region of the map with. At the minimum you need to specify two colors, the one to use with the lowest values and another one to use with the highest values. (e.g. ["e7d090", "de7062"])
colorScale ：用来填充地图每个区域的十六进制颜色代码的数组。至少需要指定两种颜色，一种用于最低值，另一种用于最高值。 (例如["e7d090", "de7062"] )
mapStyle: CSS style of the map.
mapStyle ：地图CSS样式。
zoom: With how much zoom to init the map.
zoom ：以多大比例初始化地图。
mapOptions: Additional leaflet Map options. (e.g. {attributionControl: false})
mapOptions ：其他传单Map选项。 (例如{attributionControl: false} )

The ChoroplethMap component pass the this information through its default slot:

ChoroplethMap组件通过以下默认插槽传递此信息：

currentItem: Current item on focus
currentItem ：当前关注的项目
unit: metric associated with the value
单位：与值关联的指标
min: The lowest value on the domain set
min ：域集上的最小值
max: The highest value on the domain set
max ：域集上的最大值

As seen on the example, usually you'll pass these values to the InfoControl and ReferenceChart components.

如示例所示，通常会将这些值传递给InfoControl和ReferenceChart组件。

InfoControl道具 (InfoControl props)

This is the current item information view.

这是当前的项目信息视图。

item: Item to show information about
item ：显示有关信息的项目
unit: Metric to use while displaying information
单位：显示信息时使用的度量
title: Description about what each item of the map is (e.g. "State")
title ：关于地图上每个项目的描述(例如"State" )
placeholder: Placeholder text to show when no element is currently selected
placeholder ：当当前未选择任何元素时显示的占位符文本
position: Where to render the component. With values allowed here (default: "bottomleft")
position ：渲染组件的位置。此处允许使用值(默认值： "bottomleft" )

ReferenceChart道具 (ReferenceChart props)

title: Short description to show as reference of the information described by the map (e.g. "Population density")
标题：简短说明，以显示地图描述的信息(例如"Population density" )
colorScale: Same prop as used on ChoroplethMap component
colorScale：同托如用在ChoroplethMap部件
min: The lowest value represented on the visualization
min ：可视化表示的最小值
max: The highest value represented on the visualization
max ：可视化中表示的最大值
position: Where to render the component. With values allowed here (default: "topright")
position ：渲染组件的位置。此处允许使用值(默认值： "topright" )