在L7地图里面使用高德地图通过城市名反查边界坐标大概方式

最新推荐文章于 2024-01-22 18:11:45 发布

BrocYu

最新推荐文章于 2024-01-22 18:11:45 发布

阅读量971

点赞数

文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/BrocYu/article/details/120991526

版权

本文介绍如何在React应用中利用L7地图库和高德地图API，通过城市名称反查并展示城市的边界坐标。通过引入相关库，设置地图实例，结合observer和state管理，实现地图的动态交互。

摘要由CSDN通过智能技术生成

import React, { useEffect, useRef, useState } from “react”
import { observer } from “mobx-react”
import { toJS } from “mobx”
import { Scene, PolygonLayer, LineLayer, MarkerLayer, Marker } from “@antv/l7”
import { GaodeMap } from “@antv/l7-maps”
import $state from “./state”

const L7map = () => {

//利用useRef可以跨生命周期的特性,定义标识,为true标识添加过一次图层,就不继续添加图层了
const mapIsInited = useRef()

//销毁时重置标识
useEffect(() => {
    $state.query_city_list() //查询城市名借口
    return () => {
        mapIsInited.current = false
    }
}, [])

//查询到城市名后加载L7地图
useEffect(() => {
    gaodeMapInit($state.cityList)
    mapIsInited.current = true
}, [$state.cityList])

const gaodeMapInit = (citys) => {
    //定义地图
    const scene = new Scene({
        id: 'l7-map-id',
        logoVisible: 'normal',
        map: new GaodeMap.Map({
            pitch: 0,
            style: 'narmal&#