Back

vuejs - 使用d3 ，一种非常著名的图片地图渲染组件

发布时间: 2021-04-24 00:34:00

参考：

https://marshal.ohtly.com/2018/09/03/Drow-an-China-Map-With-D3-js/

package.json: 

$ npm install d3

在main.js中：

// 引入d3
import * as d3 from 'd3'
Vue.prototype.$d3 = d3

记得在src/static 目录下，增加 china_map.json , 地址：  https://github.com/yezongyang/china-geojson

对应的vue页面：

<div id='map_by_grid'>

      init_china_map (selector){
        let width = 550
        let height = 420
        let d3 = this.$d3
        console.info('== in mounted',  d3)
        console.info('== in mounted, this.$d3',  this.$d3)
        let svg = d3.select(selector).append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(0,0)")

        let projection = d3.geoMercator()
            .center([104, 38])
            .scale(500)
            .translate([width / 2, height / 2])

        let path = d3.geoPath()
            .projection(projection)

        d3.json("static/china_map.json").then((geojson) => {
            svg.append("path")
                .attr("d", path(geojson))
                .attr('fill', 'Lavender')
                .attr("stroke", "DarkGrey")
                .attr("stroke-width", 1)
        })

调用：

init_china_map("#map_by_grid")

Back