vue3 maptalks显示特定区域遇到的问题

sweet0806qz

已于 2022-09-04 20:40:10 修改

阅读量246

点赞数

文章标签： vue

于 2022-09-04 20:38:36 首次发布

本文链接：https://blog.csdn.net/sweet0806qz/article/details/126694134

版权

引入boundary.js文件后，还是无法显示画的面，打印出outline发现_coordinates为（0），里面啥也没有，说明boundary文件根本没引入进去。

后来发现，boundary文件中是定义了一个boundary常量，如果要引用，要加上export…
在这里插入图片描述
参考https://www.cnblogs.com/zhangruifeng/p/16449092.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sweet0806qz

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue3 maptalks显示特定区域遇到的问题

vue 定义和引用常量
复制链接

扫一扫

二、maptalks搭载vue3测试demo（11-20）

Bidding

12-13

588

isects、right click menu、infoWindow、image marker、multi image marker...

三、maptalks搭载vue3测试demo（21-30）

Bidding

08-08

551

测试demo地址：https://github.com/Ruthevil/maptalks-test 21、marker wave 22、UIMarker 欢迎各位同僚指正。

1 条评论您还未登录，请先登录后发表或查看评论

vue3+ts使用mapState实现数据响应

最新发布

pengxiangfei666的博客

04-28

290

关键解决思路，结合现有框架用的vuex的mapState方法，实现数据响应式，只需要改变vuex的数据就实现刷新列表和最顶部的登录状态（1.）vuex的mutations里增加了 setUserInfo方法，在登录完成后更新了vuex的state数据(2.)封装了一个监听方法，引用hook.jshook.js文件（3.）页面使用关键。

二、mapbox搭载vue3测试demo（11-20）

Bidding

12-13

146

自定义图标click显示弹出窗、自定义图标hover显示弹出窗、自定义图标显示popper、实时数据更新图标的位置、更新建筑物的样式...

Vue data对象中的属性对maptalks+cesium三维地图项目的性能影响（vue项目三维地图性能优化）

liona_koukou的博客

02-26

4821

这个思考来自于我们的三维项目中当对三维地图的单体进行颜色等的属性修改时发现整个地图操作变得不流畅：左侧结果列表点击某一项-》地图跳转到这一项的位置-》该项对应的三维单体高亮-》从跳转开始变得迟缓然后拖拽地图也变得卡顿最终定位是存放单体属性的变量问题：在把maptalks+cesium的方法（主要是单体高亮的方法，这些方法需要共同维护几个属性和对象值）在vue项目里实现时我理所当然的...

maptalks 开发手册-入门篇

用针戳左手中指指头的博客

01-15

9351

文章目录为何使用maptalksAPI初始化Symbol 属性创建图层放大缩小等工具绘制区域面(几何图形)面的交互（事件监听）绘制mark绘制三维图形注意点锁定视角为何使用maptalks 做过地图的小伙伴们都知道，每个地图框架产商都与自家的地图资源进行绑定，如非常受欢迎的mapBox、高德、百度、腾讯等，你必须注册他们产品，获取key，然后调用的api，才能进行地图的相关操作，虽然带来了便利，但同时这也存在这限制。那么有人可能要问，那这么方便，就用他们的，就不用自己开发了不是，为什么还用其他的呢？

使用vue引入maptalks地图及聚合效果的实现

10-14

主要介绍了使用vue引入maptalks地图及聚合效果的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

maptalks-vue：基于maptalks，threejs 3d地图vue框架

04-02

**maptalks-vue：基于maptalks与threejs的3D地图Vue框架** `maptalks-vue` 是一个专为Vue.js开发者设计的框架，它整合了`maptalks`和`threejs`两个强大的库，为前端开发提供了一个高效、灵活的3D地图解决方案。`...

Vue批量图片显示时遇到的路径被解析问题

10-17

在Vue.js开发中，我们经常会遇到批量加载图片并显示的问题，尤其是在创建轮播图或者其他包含大量图片元素的应用场景。在本文中，我们将深入探讨Vue批量图片显示时遇到的路径被解析问题及其解决方案。首先，当我们...

vue 地图可视化 maptalks 篇

weixin_33851429的博客

05-20

3458

Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发：二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等很认真的优化了绘制性能很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了 ...

关于高德地图只显示一个市的区域、其他区域不显示的解决方案

热门推荐

weixin_43860852的博客

10-26

1万+

直接上效果图如上图，只显示了西安市的区域地图，并且鼠标移动至县区级行政区划会有提示文字，其他区域都是不显示的。下面直接上代码用的是vue template <div class="map" > <div class="map-container" id="container" tabindex="0" ></div> </div> scrpit import AMap from "AMap"; ex

移动地图时地图自动获取当前地图中心地区

Bougie的博客

04-17

1864

原文链接：Bougie的博客使用百度地图时，我们发现百度地图右上角的地区名称是自动变化的。地图整个屏幕是一个矩形，为了方便计算，我们可以把地图每个城市也看成矩形，即为城市的Extent或BBox。分析当前屏幕每个区域的面积占比即可获取当前地图区域。问题来源使用百度地图时，我们发现百度地图右上角的地区名称是自动变化的。解决思路地图整个屏幕是一个矩形，为了方便计算，...

vue使用maptalks绘制地图教程

Sparkling_Y的博客

12-16

1641

官网是html，此文介绍vue框架下的写法

vue中使用maptalks地图，小白自学。

m0_56026377的博客

11-14

2323

vue中使用maptalks地图，小白自学。

maptalks案例之限制地图区域

我们一起学前端

05-29

1727

效果图核心代码 var map = new maptalks.Map('map', { center: [-0.113049, 51.498568], zoom: 14, centerCross: true, baseLayer: new maptalks.TileLayer('base', { urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', subdomains: [

maptalks+VUE 开发（2）-- 绘制多边形

qq_43086723的博客

09-14

1202

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 maptalks+VUE 开发（2）-- 绘制多边形一、效果图二、使用步骤1.引入2.创建VectorLayer（渲染层）一、效果图二、使用步骤 1.引入参照上篇文章 2.创建VectorLayer（渲染层）代码如下（示例）： var setStyle = []; // 用来set对应的图形颜色 var layer = new maptalks.VectorLayer("vector") .setStyle({

maptalks地图控制器、限制拖动区域、marker标记、导出示例

weixin_44453127的博客

09-23

870

// 地图控制器 <template lang="pug"> .main #map.container .pane(@click="save") 导出 </template> <script> import "maptalks/dist/maptalks.css"; import * as maptalks from "maptalks"; export default { data() { return {

一、maptalks搭载vue3测试demo（1-10）

Bidding

08-01

1099

打点、画线、heatmap、marker cluster、animation marker...

maptalks嵌入vue

03-22

MapTalks是一款基于Mapbox的在线地图可视化平台，它提供了丰富的地图组件和交互功能，可以帮助用户轻松地创建出高质量的地图可视化作品。在Vue中嵌入MapTalks可以通过以下步骤实现： 1. 安装MapTalks的Vue插件：首先需要在Vue项目中安装MapTalks的Vue插件，可以通过npm或者yarn进行安装。 npm install @maptalks/vue-maptalks 或者 yarn add @maptalks/vue-maptalks 2. 引入MapTalks组件：在Vue项目中引入MapTalks组件，可以在需要使用MapTalks的组件中通过import引入MapTalks组件。 import { MapComponent } from '@maptalks/vue-maptalks'; 3. 创建MapTalks实例：在需要使用MapTalks的组件中，需要创建一个MapTalks实例，并传入地图的配置信息。 const map = new MapComponent({ el: '#map-container', style: { height: '500px' }, center: [longitude, latitude], zoom: 10, layers: [layerConfig] }); 其中，`#map-container`是地图容器元素的ID，`longitude`和`latitude`是地图的中心坐标，`zoom`是地图的缩放级别，`layers`是地图图层的配置信息。 4. 使用MapTalks组件：在Vue组件中使用MapTalks组件，可以通过模板中的标签将地图展示在页面上。 <map-component></map-component> 这样就可以将MapTalks嵌入到Vue中了。需要注意的是，在使用MapTalks时，需要保证Mapbox API的密钥已经配置好，并且具有访问和创建地图的权限。另外，还需要根据实际需求进行一些额外的配置和样式设置。以上是在Vue中嵌入MapTalks的基本步骤和注意事项，具体实现可能会因项目需求和具体情况而有所不同。建议参考MapTalks和Vue的相关文档和教程，以获得更详细和准确的信息。