vue+思极地图开发

最新推荐文章于 2024-09-10 16:58:00 发布
最新推荐文章于 2024-09-10 16:58:00 发布
阅读量2.8k 收藏 21
点赞数 17
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51771963/article/details/135456793
版权
本文介绍了如何在Vue项目中全局引入思极地图，并展示了在DOM层和JS代码中如何操作地图组件，包括行政区划的展示和marker点的添加。同时提及了现场部署时遇到的https问题及其解决方案：改用http协议加载思极地图js。
摘要由CSDN通过智能技术生成

效果：以扬州市为例

一、App.vue全局引入思极地图js

mounted() {
    // 全局引入思极地图
    const script = document.createElement("script");
    script.src = "http://map-js.sgcc.com.cn/maps?v=3.0.0";
    document.body.appendChild(script);
}

二、DOM层

<template>
    <div class="body">
        <div id="map" style="width: 100%; height: 100%;"></div>
    </div>
</template>

三、js

SGMap.tokenTask.login('申请的appkey', '申请的appsecret').then(function () {
    SGMap.plugin("SGMap.DistrictTask").then(function (res) {
        let districtTask = new SGMap.DistrictTask();
        let map = new SGMap.Map({
            container: "map",
            style: "aegis: //styles/aegis/Streets",
            zoom: 8,
            center: [119.450070009243, 32.81896769039971],
            localIdeographFontFamily: "Microsoft YoHei",
            maxBounds: [[118, 31.8],[121, 33.8],],
        });
        map.on("load", function (e) {
            map.addControl(new SGMap.ScaleControl({
                maxWidth: 80,
                unit: "metric",
            }), "bottom-left");
            // 行政区划面
            map.addLayer({
                id: "power-polygon",
                type: "fill",
                source: {
                    type: "geojson",
                    data: {
                        type: "FeatureCollection",
                        features: [],
                    },
                },
                paint: {
                    "fill-color": "#CCF3FF",
                    "fill-opacity": 0.2,
                },
            });
            //行政区划边界线
            map.addLayer({
                id: "power-line",
                type: "line",
                source: {
                    type: "geojson",
                    data: {
                        type: "FeatureCollection",
                        features: [],
                    },
                },
                paint: {
                    "line-color": "#009587",
                    "line-width": 2,
                },
            });

            //遮罩面
            map.addLayer({
                id: "mask-polygon",
                type: "fill",
                source: {
                    type: "geojson",
                    data: {
                        type: "FeatureCollection",
                        features: [],
                    },
                },
                paint: {
                    "fill-color": "#ffffff",
                    "fill-opacity": 0.5,
                    "fill-outline-color": "#3f61ea",
                },
            });

            //面标注
            map.addLayer({
                id: "power-polygen-symbol",
                type: "symbol",
                source: {
                    type: "geojson",
                    data: {
                        type: "FeatureCollection",
                        features: [],
                    },
                },
                layout: {
                    "text-font": ["Microsoft YaHei Regular"],
                    "text-field": "{name}",
                    "text-size": 16,
                },
                paint: {
                    "text-color": "#009587",
                },
            });
            // 行政区划名称查询行政区划
            districtTask.searchDistrict({
                keyword: "扬州市",
                // 建议直辖市取2，其他省份取1，提升请求速度
                subdistrict: 1,
                extension: true,
            }).then(function (result) {
                var features = [],
                featuresSymbol = [],
                featuresPolygon = [],
                // 外层遮罩方形边界
                outSideShape = [
                    [
                        [109.08605140490641, 46.53186534100985],
                        [123.33266999835769, 46.53186534100985],
                        [123.33266999835769, 20.931139019287684],
                        [109.08605140490641, 20.931139019287684],
                        [109.08605140490641, 46.53186534100985],
                    ],
                ],
                // 主要区分直辖市和其他省份
                district = result.data.districts[0].sub_districts.length == 1
                               ? result.data.districts[0].sub_districts[0]
                               : result.data.districts[0];
                for (var o in district.sub_districts) {
                    if (district.sub_districts[o].shape == undefined) continue;
                    let shape = district.sub_districts[o].shape;
                    let shapeMultiPolygon = [];
                    // 标注
                    featuresSymbol.push({
                        type: "Feature",
                        geometry: {
                            coordinates: district.sub_districts[o].center,
                            type: "Point",
                        },
                        properties: {
                            name: district.sub_districts[o].name,
                        },
                    });
                    // 边界
                    if (shape.type == "MultiPolygon") {
                        for (var o in shape.coordinates) {
                            features = features.concat(shape.coordinates[o]);
                        }
                    } else {
                        features.push(shape.coordinates[0]);
                    }
                }
                // 面数据和遮罩
                if (district.shape.type == "MultiPolygon") {
                    for (var o in district.shape.coordinates) {
                        outSideShape = outSideShape.concat(district.shape.coordinates[o]);
                        featuresPolygon = featuresPolygon.concat(district.shape.coordinates[o]);
                    }
                } else {
                    outSideShape = outSideShape.concat(district.shape.coordinates);
                    featuresPolygon = featuresPolygon.concat(district.shape.coordinates);
                }
                // 更新视图
                // 遮罩
                map.getSource("mask-polygon").setData({
                    type: "FeatureCollection",
                    features: [
                        {
                            type: "Feature",
                            geometry: {
                                type: "MultiPolygon",
                                coordinates: [outSideShape],
                            },
                        },
                    ],
                 });

                 // 行政区划面
                 map.getSource("power-polygon").setData({
                     type: "FeatureCollection",
                     features: [
                         {
                             type: "Feature",
                             geometry: {
                                 type: "Polygon",
                                 coordinates: featuresPolygon,
                             },
                         },
                     ],
                 });

                 // 行政区划边界
                 map.getSource("power-line").setData({
                     type: "FeatureCollection",
                     features: [
                         {
                             type: "Feature",
                             geometry: {
                                 type: "MultiLineString",
                                 coordinates: features,
                             },
                         },
                     ],
                 });

                 //面标注数据
                 map.getSource("power-polygen-symbol").setData({
                     type: "FeatureCollection",
                     features: featuresSymbol,
                 });
              });

              //画marker点
              if(null !=lstSmoke && lstSmoke.length > 0) {
                  lstSmoke.map(item=> {
                      if(item.backStatus == '0' && null != item.coordx && '' != item.coordx) {
                          const x = parseFloat(item.coordx);
                          const y = parseFloat(item.coordy);
                          const el = document.createElement('div');
                          el.className = 'marker';
                          el.style.backgroundImage = 'url("../../../assets/images/ding.gif")';
                          el.style.width = '20px';
                          el.style.height = '20px';
                          el.id = item.id;
                          const marker = new SGMap.Marker(el).setLngLat([x, y]).addTo(map);

                          el.addEventListener('click', clickMarkerPoint);
                       }
                    });
               }

               //画图片点，需要先加载图片 图片路径在页面部署在服务上时可以用相对路径
               map.loadImage("../../../assets/images/ding.png", function (error, image) {
                   //添加图片到map，可以设置图片id
                   map.addImage("poi", image);
                   map.addLayer({
                       'id': "choicePoi",
                       "type": "symbol",
                       "source": {
                           "type": "geojson",
                           "data": {
                               'type': "FeatureCollection",
                               "features": []
                           }
                       },
                       "layout": {
                           "icon-image": "poi",
                           "icon-size": 0.11,
                           //"icon-anchor":"bottom",
                           //"icon-offset":[0,0],
                           "icon-ignore-placement": true,
                           "text-ignore-placement": false,
                           'text-field': '{name}',
                           'text-size': 12,
                           'text-anchor': 'top',
                           'text-allow-overlap': false,
                           'icon-anchor': "bottom",
                           'text-offset': [0, 0],
                           'text-max-width': 8,
                           "text-font": ['Microsoft YaHei Regular']
                        },
                        'paint': {
                           'text-color': "#555252",
                           'text-halo-color': "#FFFFFF",
                           'text-halo-width': 1.33333
                         }
                    });

                    if(null !=lstSmoke && lstSmoke.length > 0) {
                        lstSmoke.map(item=> {
                        if(item.backStatus == '2' && null != item.coordx && '' != item.coordx) {
                            const x = parseFloat(item.coordx);
                            const y = parseFloat(item.coordy);
                            const temp = {
                                'type': 'Feature',
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [x, y]
                                },
                                'properties': {
                                    'id': item.id
                                }
                             };
                             //添加进数组
                             result.features.push(temp);
                         }
                     });
                     map.getSource("choicePoi").setData(result);
                   }
              });

              // 绑定Layer自定义图片点事件
              map.on('click', "choicePoi", clickLayerPoint);
              //画图片点，需要先加载图片 图片路径在页面部署在服务上时可以用相对路径
              map.loadImage("../../../assets/images/noding.png", function (error, image) {
              //添加图片到map，可以设置图片id
              map.addImage("poiOld", image);
              map.addLayer({
                  'id': "choicePoiOld",
                  "type": "symbol",
                  "source": {
                  "type": "geojson",
                  "data": {
                      'type': "FeatureCollection",
                      "features": []
                  }
              },
              "layout": {
                  "icon-image": "poiOld",
                  "icon-size": 0.11,
                  //"icon-anchor":"bottom",
                  //"icon-offset":[0,0],
                  "icon-ignore-placement": true,
                  "text-ignore-placement": false,
                  'text-field': '{name}',
                  'text-size': 12,
                  'text-anchor': 'top',
                  'text-allow-overlap': false,
                  'icon-anchor': "bottom",
                  'text-offset': [0, 0],
                  'text-max-width': 8,
                  "text-font": ['Microsoft YaHei Regular']
               },
               'paint': {
                  'text-color': "#555252",
                  'text-halo-color': "#FFFFFF",
                  'text-halo-width': 1.33333
               }
            });

            if(null !=lstSmoke && lstSmoke.length > 0) {
                lstSmoke.map(item=> {
                    if(item.backStatus == '1' && null != item.coordx && '' != item.coordx) {
                        const x = parseFloat(item.coordx);
                        const y = parseFloat(item.coordy);
                        const temp = {
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [x, y]
                            },
                            'properties': {
                                'id': item.id
                            }
                        };
                        //添加进数组
                        resultOld.features.push(temp);
                     }
                  });
                  map.getSource("choicePoiOld").setData(resultOld);
              }
           });

           // 绑定Layer自定义图片点事件
           map.on('click', "choicePoiOld", clickLayerPoint);
        });
     });
 });

四、遇到的问题

现场部署报如下错：

解决方案：

全局引入的思极地图js用http，不要用https

五、开发文档

思极地图开放平台 | 思极地图API SDKicon-default.png?t=N7T8https://map.sgcc.com.cn/products/epgis_portals/#/

小花没烦恼~
关注
042：cesium加载Eris地图（多种形式）
大剑师兰特的GIS世界
04-04 1214
第042个本示例的目的是介绍如何在vue+cesium中加载加载Eris地图。这里显示4种形式的地图，分别为：World_Imagery、World_Street_Map、World_Terrain_Base、World_Physical_Map。
vue 加载太慢_vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案_个人文章 - SegmentFault 思否...
weixin_39693295的博客
12-21 2350
vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化1,关闭打包时生成的map文件在 config/index.js文件中讲 productionSourceMap设置为 false,再次打包便没有了map文件2,vue-router路由懒加载懒加载的...
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 2263
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
Cesium+Vue实战教程——地图导航
Web_boom的博客
12-31 2638
这个项目其实还有很多完善的地方，比如点击按钮发送请求有一段时间，应该加一个loading的动效，界面过于朴素等等。这里是GIS宇宙我们下期再见最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
从零开始的VUE+ArcGIS API for JS项目——地图标绘（线）
hfhf45_的博客
09-10 634
地图标绘是WebGIS应用的基础应用之一，使用地图标绘共功能，主要是实现在地图上绘制点，线，面等图形，对地图上的重点区域进行标记。绘制过程中可能涉及到的需求包括可以自定义点线面的样式，颜色等，能够保存绘制的记录，能够定位绘制的图形等。
vue使用地图
qq_43840793的博客
09-14 4257
一、达到的效果 展示地图，画出地块，输入框 二、展示地图 1、首先写一个空白区域 <div style="height: 600px; width: 450px;" id="container"></div> 2、在method方法中写一个初始化函数 // 初始化 init() { //天地图 let xyzTileLayer = new AMap.TileLayer({ opacity: 1, zIndex: 4, })
基于vue框架开源地理引擎Cesium+echarts+mapbxgl+openalyers三维可视化项目完整源码+说明.zip
03-28
【资源说明】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用，具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习，也可作为大作业、课程设计、毕设项目、初期项目立项演示等，欢迎下载，互相学习，共同进步！ 基于vue框架开源地理引擎Cesium + echarts + mapbxgl + openalyers三维可视化项目源码+项目说明.zip
vue引入地图，实现搜索添加地图位置点，点击地图获取位置信息
g1437353759的博客
08-12 2273
这里引入的是百度地图，根据下图操作即可（目前用的是PC端也就是浏览器端） 获取ak后把这段代码放在index里 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ak放在这里"></script> ...
vue地图的引用
你好的博客
08-28 1134
<template> <div> <div id="map_canvas" class="allmap"></div> <div class="allputin"> <img src="../../assets/img/xiao.png" alt /> <...
vue3项目使用第三方地图
u010419628的博客
02-02 548
最近发现一个功能很强第三方地图维智地图，示例效果很多，代码也很好理解，准备出一系列项目中常用的效果实战教程。本期内容为初始化地图教程，是后续教程的铺垫。
Google Maps API V3 中文参考文档(JavaScript)
11-20
用于 JavaScript 的 Google Maps API V3 中文参考文档 与官网文档格式基本相同
思维导图-知识地图-运营地图全部横版
03-12
思维导图-知识地图-运营地图全部横版
GIS地图-思极的简单使用
weixin_58735350的博客
07-22 2104
之前项目上有使用gis地图的需要，然后国网的项目又只让使用思极，所以就研究了下，基本满足了他们的使用，在这里分享下。
地图API文档
weixin_30367169的博客
09-19 265
目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API（官网注明是beta版本，可能不稳定，慎用）：... 2 1.2 URL API：... 2 1.3 静态图API：... 2 1.3 JavaScript API V2：... 2 1.4 另外还有Android SDK, Android 定位SDK,和IOS SDK,主...
vite + vue3 —— vue地图大屏项目
热门推荐
技术前端，忠于热爱 @0.活在风浪里
09-22 1万+
0-1 完成大屏中国地图
Vue实现功能齐全的地图组件 - 附效果图及源码
CSU_Zipple的博客
12-22 1万+
这是一个h5页面– 效果图 录图的时候网络条件不是很好，wifi卡了，所以数据加载有点慢。当网络情况不好的时候，这个组件还需要进一步的优化 前置条件 在你的index.html页面上加载百度地图js（获取ak） 正确安装了vue 使用vue-cli可以快速开发 &lt;script type="text/javascript" src="http://api.map.baidu...
vue 开发数据可视化地图
小白兔奶糖の博客
07-08 1907
主要是为了 vue 的数据可视化地图开发，但是不完整，后续会补充！ 其次，补充了自己在 vue 路由及页面跳转过程中遇到的坑！
思极地图怎么移除事件监听
最新发布
09-20
在思极地图（极光Aurora）中，如果你想要移除某个特定的事件监听，通常需要使用`off()`或`removeEventListener()`方法。这个过程会根据不同框架的具体API有所不同，但基本步骤如下： 1. **JavaScript (ES6)**: ```javascript import { Map } from '@dcloudio/aurora'; // 假设你有一个Map实例 map const map = new Map(); const listenerId = map.on('event-name', yourCallbackFunction); // 要移除监听，你可以这样做： map.off('event-name', yourCallbackFunction); // 或者 map.removeEventListener('event-name', listenerId); ``` 2. **React-Aurora** (React 极光组件): ```jsx import { AuroraMap } from 'react-aurora'; const mapRef = useRef(new AuroraMap()); useEffect(() => { function handleEvent() { // ... } mapRef.current.addEventListener('event-name', handleEvent); return () => mapRef.current.removeEventListener('event-name', handleEvent); }, []); // 确保在组件卸载时移除监听 ``` 记得将`event-name`替换为你实际关注的事件名称，`yourCallbackFunction`则是处理该事件的函数。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值