如何做一个点击行政区，后地图切换到不同的行政区边界呢，并且悬浮高亮？（高德地图） |
您所在的位置：网站首页 › mapinfo如何弄地图插件 › 如何做一个点击行政区，后地图切换到不同的行政区边界呢，并且悬浮高亮？（高德地图） |
如何做一个点击行政区，后地图切换到不同的行政区边界呢，并且悬浮高亮？（高德地图）
|
仅提供思路以及部分关键代码
示例：
一、首先使用json-server自定义数据 注：json-server可以自行查询如何配置
全国的省市区json数据地址：http://t.csdn.cn/PMm5K 二、进行高德地图的key值申请自行注册申请，选择WEB端即可
三、安装插件 npm i @amap/amap-jsapi-loader --save npm i axios 四、进行网络请求配置 1、新建utils/result.js import axios from "axios"; axios.defaults.baseURL = "http://localhost:8000/"; export const get = function (url, data, header) { return axios.get(url, { params: data, ...header }); };2、新建network/city.js import { get } from "../utils/request"; //获取城市数据 export const getLocation = function () { return get("/location"); }; 五、页面的划分，左右两块组件新建组件，左侧树状菜单为Menu.vue，右侧地图为Map.vue 且引入至App.vue中 import Menu from "./components/Menu.vue"; import Map from "./components/Map.vue"; export default { name: "App", components: { [Menu.name]: Menu, [Map.name]: Map, }, data() { return { name: "", }; }, methods: { getnowLoc(params) { this.name = params.value; }, }, }; #app { display: flex; } .left-menu { width: 190px; } .right-map { flex: 1; }Menu.vue代码，其中进行了获取我们的json-server数据，并且用element-ui的Tree树状控件展示。 在点击节点后使用$emit进行传递当前行政区的名称 import { getLocation } from "../network/city"; export default { name: "m-menu", data() { return { treeData: [], defaultProps: { children: "children", label: "value", }, }; }, async created() { let res = await getLocation(); this.treeData = res.data; }, methods: { handleNodeClick(data) { this.$emit("handler", data); }, }, }; .menu { height: 100%; overflow-y: scroll; } .menu::-webkit-scrollbar { width: 3px; }Map代码，其中需要注意的点是全局密钥和引入一样，要在全局，这里所用到高德地图的Api为：行政区边界查询-行政区划查询-示例中心-JS API 2.0 示例 | 高德地图API (amap.com) 各位可以自行查阅，进行配置 // 引入AMapLoader import AMapLoader from "@amap/amap-jsapi-loader"; //全局密钥 // 设置安全密钥 window._AMapSecurityConfig = { securityJsCode: "--Web端安全密钥--", }; export default { name: "m-map", props: { name: { type: String, default: "", }, }, data() { return { AMap: null, district: null, polygon: null, }; }, created() { this.initMap(); }, watch: { name() { this.drawBounds(); }, }, methods: { async initMap() { let AMap = await AMapLoader.load({ key: "--Web端Key--", version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ["AMap.DistrictSearch"], // 这里需要使用的的插件列表，如比例尺'AMap.Scale'等 }); this.AMap = AMap; // 初始化地图 this.map = new AMap.Map("bai-du-map", { viewMode: "2D", // 是否为3D地图模式 zoom: 13, // 初始化地图级别 center: [116.397428, 39.90923], //中心点坐标 resizeEnable: true, }); }, drawBounds: function () { //加载行政区划插件 if (!this.district) { //实例化DistrictSearch var opts = { subdistrict: 0, //获取边界不需要返回下级行政区 extensions: "all", //返回行政区边界坐标组等具体信息 level: "district", //查询行政级别为 市 }; this.district = new this.AMap.DistrictSearch(opts); } //行政区查询 this.district.setLevel("district"); this.district.search(this.$props.name, (status, result) => { if (this.polygon) { this.map.remove(this.polygon); //清除上次结果 this.polygon = null; } var bounds = result.districtList[0].boundaries; if (bounds) { //生成行政区划polygon for (var i = 0; i < bounds.length; i += 1) { //构造MultiPolygon的path bounds[i] = [bounds[i]]; } this.polygon = new this.AMap.Polygon({ strokeWeight: 1, path: bounds, fillOpacity: 0.4, fillColor: "#80d8ff", strokeColor: "#0091ea", }); //区域内悬浮 this.polygon.on("mouseover", () => { this.polygon.setOptions({ fillOpacity: 0.7, fillColor: "#7bccc4", }); }); //离开区域 this.polygon.on("mouseout", () => { this.polygon.setOptions({ fillOpacity: 0.5, fillColor: "#ccebc5", }); }); this.map.add(this.polygon); this.map.setFitView(this.polygon); //视口自适应 } }); }, }, };不太会解释代码，如配置过程有问题可以私信，偶尔看 |
【本文地址】
今日新闻 |
推荐新闻 |