KIKIo_
KIKIo_

在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示

文章目录

    • 1、在vue中引入百度地图的script
    • 2、生成想要的地图样式
    • 3、生成地图
    • 4、创建3d棱柱
    • 5、设置标记点和提示框
    • 6、代码总结

1、在vue中引入百度地图的script

  • 在public/index中引入 
    • <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你自己的key"></script>
      在这里插入图片描述
  • ak的获取
    1、先进入百度地图api的网页，点击控制台
    在这里插入图片描述
    2、创建自己的应用，就可以获得AK
    在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示_第1张图片

2、生成想要的地图样式

1、点击这里的超链接 自定义地图样式编辑器
或者 按照如下步骤
在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示_第2张图片
2、点击新建就可以创建地图，按照自己的想法编辑完成后，下载json文件（在右下角）
在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示_第3张图片

  • 注 因为我自己没有搭建后台，所以直接转换成js文件 import进vue中
    在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示_第4张图片
    在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示_第5张图片

3、生成地图

  • 这里记得设置地图的大小 不然没有显示
<template>
  <div class="drawer">
    <div id="allmap" style="width: 100%; height: 700px"></div>
  </div>
</template>

<script>
import mapstyle from "./mapstyle.js";
export default {
  props: {},
  data() {
    return {
      mapstyle: [],
    };
  },
  mounted() {
    this.getstyle();
    this.mapInit();
  },
  methods: {
    // 获取地图样式
    getstyle() {
      this.mapstyle = mapstyle;
    },
    // 获取标记点信息
    getLocationInfo() {
      this.LocationInfo = LocationInfo;
    },
    mapInit() {
      this.map = new BMapGL.Map("allmap");
      var map = new BMapGL.Map("allmap");
      var point = new BMapGL.Point(114.42586, 23.129122); //中心点经纬度
      map.centerAndZoom(point, 10);
      map.setTilt(60);//倾斜角
      map.enableScrollWheelZoom();
      map.setMapStyleV2({ styleJson: this.mapstyle });
    },
  },
};
</script>
<style scoped>
</style>

在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示_第6张图片

4、创建3d棱柱

  • 这里的能建立3D棱柱的最小单位只能是县区以上，乡镇并不能创建3d棱柱
var bd = new BMapGL.Boundary();
      // 给某一个省 市 县 设置3d棱柱
      bd.get("惠城区", function (rs) {
        var count = rs.boundaries.length; //行政区域的点有多少个
        var pointArray = [];
        for (var i = 0; i < count; i++) {
          var path = [];
          var str = rs.boundaries[i].replace(" ", "");
          var points = str.split(";");
          for (var j = 0; j < points.length; j++) {
            var lng = points[j].split(",")[0];
            var lat = points[j].split(",")[1];
            path.push(new BMapGL.Point(lng, lat));
          }
          var prism = new BMapGL.Prism(path, 5000, {
            topFillColor: "#5679ea",
            topFillOpacity: 0.5,
            sideFillColor: "#5679ea",
            sideFillOpacity: 0.9,
          });
          map.addOverlay(prism);
        }
      });

在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示_第7张图片

5、设置标记点和提示框

      var marker = new Array();
      var sContent = new Array();
      var infoWindow = new Array();
      var label = new Array();
      for (let i in this.LocationInfo) {
        // 创建添加点标记
        marker[i] = new BMapGL.Marker(
          new BMapGL.Point(
            this.LocationInfo[i].positionx,
            this.LocationInfo[i].positiony
          )
        );
        map.addOverlay(marker[i]);
        sContent[i] =
          '

                    
                    
  • uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    
                    
    • 
                    
  • scanf占位符的一些用法
                        阿玉的屋檐
c语言初学者算法数据结构c语言青少年编程学习
                        
    1.限制输入数据的长度intmain(){inta=123456;scanf("%3d",&a);printf("%d",a);return0;}如果输入的值大于3位则最多读取输入的只读取前3位数据。2.匹配特定字符charss[6];scanf("%[abcd]",ss);%[abcd]表示只读取字符abcd，遇到其它的字符就读取结束，如果abcd字符在字符串的中间部分那么就不能正常读取字符。如
    
                    
    • 
                    
  • ffmpeg批量将tif文件转成jpeg格式
                        winfredzhang
图像工具ffmpegtifjpeg转换
                        
    1、cmd2、切换到安装ffmpeg的路径。3、输入命令：ffmpeg-start_number001-i"D:\ocr\%03d.tif"-start_number001-pix_fmtyuv420p-qscale:v1"D:\ocr\%03d.jpg"结果。
    
                    
    • 
                    
  • python画图|同时输出二维和三维图
                        西猫雷婶
python开发语言
                        
    前面已经学习了如何输出二维图和三维图，部分文章详见下述链接：python画图|极坐标下的3Dsurface-CSDN博客python画图|垂线标记系列_如何用pyplot画垂直x轴的线-CSDN博客有时候也需要同时输出二位和三维图，因此有必要学习一下。【1】官网教程首先我们打开官网教程，链接如下。https://matplotlib.org/stable/gallery/mplot3d/mixed
    
                    
    • 
                                
  • 异常的核心类Throwable
                                    无量
java源码异常处理exception
                                    
    java异常的核心是Throwable，其他的如Error和Exception都是继承的这个类 里面有个核心参数是detailMessage，记录异常信息，getMessage核心方法，获取这个参数的值，我们可以自己定义自己的异常类，去继承这个Exception就可以了，方法基本上，用父类的构造方法就OK，所以这么看异常是不是很easy 
 
 
 
package com.natsu;



    
                                
    • 
                                
  • mongoDB 游标（cursor） 实现分页 迭代
                                    开窍的石头
mongodb
                                    
    上篇中我们讲了mongoDB 中的查询函数，现在我们讲mongo中如何做分页查询 
 
     如何声明一个游标 
       var mycursor = db.user.find({_id:{$lte:5}}); 
      迭代显示游标数
    
                                
    • 
                                
  • MySQL数据库INNODB 表损坏修复处理过程
                                    0624chenhong
tomcatmysql
                                    
    最近mysql数据库经常死掉，用命令net stop mysql命令也无法停掉，关闭Tomcat的时候，出现Waiting for N instance(s) to be deallocated 信息。查了下，大概就是程序没有对数据库连接释放，导致Connection泄露了。因为用的是开元集成的平台，内部程序也不可能一下子给改掉的，就验证一下咯。启动Tomcat,用户登录系统，用netstat -
    
                                
    • 
                                
  • 剖析如何与设计人员沟通
                                    不懂事的小屁孩
工作
                                    
    最近做图烦死了，不停的改图，改图……。烦，倒不是因为改，而是反反复复的改，人都会死。很多需求人员不知该如何与设计人员沟通，不明白如何使设计人员知道他所要的效果，结果只能是沟通变成了扯淡，改图变成了应付。 
 
那应该如何与设计人员沟通呢？ 
 
我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说，整天玩的都是点、线、面、配色，哪种构图看起来协调；哪种配色看起来合理心里跟明镜似的，
    
                                
    • 
                                
  • qq空间刷评论工具
                                    换个号韩国红果果
JavaScript
                                    
    

var a=document.getElementsByClassName('textinput');
					var b=[];
					for(var m=0;m<a.length;m++){
						if(a[m].getAttribute('placeholder')!=null)
							b.push(a[m])
					}
					var l
    
                                
    • 
                                
  • S2SH整合之session
                                    灵静志远
springAOPstrutssession
                                    
    错误信息： 
Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped
    
                                
    • 
                                
  • xmp标签
                                    a-john
标签
                                    
    今天在处理数据的显示上遇到一个问题： 
var html = '<li><div class="pl-nr"><span class="user-name">' + user
           + '</span>' + text + '</div></li>';
ulComme
    
                                
    • 
                                
  • Ajax的常用技巧（2）---实现Web页面中的级联菜单
                                    aijuans
Ajax
                                    
    在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。 在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐
    
                                
    • 
                                
  • 天-安-门，好高
                                    atongyeye
情感
                                    
        我是85后，北漂一族，之前房租1100，因为租房合同到期，再续，房租就要涨150。最近网上新闻，地铁也要涨价。算了一下，涨价之后，每次坐地铁由原来2块变成6块。仅坐地铁费用，一个月就要涨200。内心苦痛。 
 
    晚上躺在床上一个人想了很久，很久。 
   
    我生在农
    
                                
    • 
                                
  • android 动画
                                    百合不是茶
android透明度平移缩放旋转
                                    
    android的动画有两种  tween动画和Frame动画 
  
tween动画;,透明度,缩放,旋转,平移效果 
  
Animation   动画 
AlphaAnimation 渐变透明度 
RotateAnimation 画面旋转 
ScaleAnimation 渐变尺寸缩放 
TranslateAnimation 位置移动 
Animation
    
                                
    • 
                                
  • 查看本机网络信息的cmd脚本
                                    bijian1013
cmd
                                    
    @echo 您的用户名是：%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt"
@echo 您的机器名是：%COMPUTERNAME%>>"%userprofile%\网络参数.txt"
@echo ___________________>>"%userprofile%\
    
                                
    • 
                                
  • plsql 清除登录过的用户
                                    征客丶
plsql
                                    
    tools---preferences----logon history---history  把你想要删除的删除 
 
 
-------------------------------------------------------------------- 
若有其他凝问或文中有错误，请及时向我指出， 
我好及时改正，同时也让我们一起进步。 
email ： binary_spac
    
                                
    • 
                                
  • 【Pig一】Pig入门
                                    bit1129
pig
                                    
    Pig安装 
1.下载pig 
  
wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz 
  
2. 解压配置环境变量 
  
   如果Pig使用Map/Reduce模式，那么需要在环境变量中，配置HADOOP_HOME环境变量 
  
expor
    
                                
    • 
                                
  • Java 线程同步几种方式
                                    BlueSkator
volatilesynchronizedThredLocalReenTranLockConcurrent
                                    
    为何要使用同步？       java允许多线程并发控制，当多个线程同时操作一个可共享的资源变量时（如数据的增删改查），        将会导致数据不准确，相互之间产生冲突，因此加入同步锁以避免在该线程没有完成操作之前，被其他线程的调用，        从而保证了该变量的唯一性和准确性。    1.同步方法&
    
                                
    • 
                                
  • StringUtils判断字符串是否为空的方法（转帖）
                                    BreakingBad
nullStringUtils“”
                                    
    转帖地址：http://www.cnblogs.com/shangxiaofei/p/4313111.html 
  
public static boolean isEmpty(String str)      
　　判断某字符串是否为空，为空的标准是 str== 
null  
或 str.length()== 
0    
    
                                
    • 
                                
  • 编程之美-分层遍历二叉树
                                    bylijinnan
java数据结构算法编程之美
                                    
    

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;

public class LevelTraverseBinaryTree {

    /**
     * 编程之美 分层遍历二叉树
     * 之前已经用队列实现过二叉树的层次遍历，但这次要求输出换行，因此要
    
                                
    • 
                                
  • jquery取值和ajax提交复习记录
                                    chengxuyuancsdn
jquery取值ajax提交
                                    
    
// 取值
	// alert($("input[name='username']").val());
	// alert($("input[name='password']").val());
	// alert($("input[name='sex']:checked").val());
	// alert($("
    
                                
    • 
                                
  • 推荐国产工作流引擎嵌入式公式语法解析器-IK Expression
                                    comsci
java应用服务器工作Excel嵌入式
                                    
    这个开源软件包是国内的一位高手自行研制开发的，正如他所说的一样，我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用，并提出意见和建议。。。 
----------转帖--------------------------------------------------- 
 IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言
    
                                
    • 
                                
  • 关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer
                                    daizj
spring
                                    
    1、PropertyPlaceholderConfigurer 
Spring中PropertyPlaceholderConfigurer这个类，它是用来解析Java Properties属性文件值，并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。 
 
基本的使用方法是：(1) 
 
<bean id="propertyConfigurerForWZ&q
    
                                
    • 
                                
  • 二叉树:二叉搜索树
                                    dieslrae
二叉树
                                    
        所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表. 
 
tree代码: 
 

    
                                
    • 
                                
  • C语言字符串函数大全
                                    dcj3sjt126com
cfunction
                                    
    C语言字符串函数大全 
  
  
函数名: stpcpy 
功 能: 拷贝一个字符串到另一个 
用 法: char *stpcpy(char *destin, char *source); 
程序例: 
  
#include <stdio.h> 
#include <string.h> 
  
int main
    
                                
    • 
                                
  • 友盟统计页面技巧
                                    dcj3sjt126com
技巧
                                    
    在基类调用就可以了, 基类ViewController示例代码 
-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]];

    
                                
    • 
                                
  • window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法
                                    flyvszhb
javajdk
                                    
    window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 
 
本机已经安装了jdk1.7，而比较早期的项目需要依赖jdk1.6，于是同时在本机安装了jdk1.6和jdk1.7. 
 安装jdk1.6前，执行java -version得到 
C:\Users\liuxiang2>java -version 
java version "1.7.0_21&quo
    
                                
    • 
                                
  • Java在创建子类对象的同时会不会创建父类对象
                                    happyqing
java创建子类对象父类对象
                                    
      
1.在thingking in java 的第四版第六章中明确的说了，子类对象中封装了父类对象， 
  
2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam
    
                                
    • 
                                
  • 跟我学spring3 目录贴及电子书下载
                                    jinnianshilongnian
spring
                                    
      
  一、《跟我学spring3》电子书下载地址： 
《跟我学spring3》  （1-7 和 8-13） http://jinnianshilongnian.iteye.com/blog/pdf   
  
跟我学spring3系列 word原版 下载 
  
  二、
源代码下载  
最新依
    
                                
    • 
                                
  • 第12章 Ajax（上）
                                    onestopweb
Ajax
                                    
    index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
    
                                
    • 
                                
  • BI and EIM 4.0 at a glance
                                    blueoxygen
BO
                                    
    http://www.sap.com/corporate-en/press.epx?PressID=14787 
  
有机会研究下EIM家族的两个新产品~~~~ 
  
New features of the 4.0 releases of BI and EIM solutions include:  
 
  Real-time in-memory computing – 
    
                                
    • 
                                
  • Java线程中yield与join方法的区别
                                    tomcat_oracle
java
                                    
    长期以来，多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中，我得到了一个机会)，但是理解多线程对增加你的信心很有用。之前，我讨论了一个wait()和sleep()方法区别的问题，这一次，我将会讨论join()和yield()方法的区别。坦白的说，实际上我并没有用过其中任何一个方法，所以，如果你感觉有不恰当的地方，请提出讨论。 
&nb
    
                                
    • 
                                
  • android Manifest.xml选项
                                    阿尔萨斯
Manifest
                                    
    结构 
继承关系 
public final class Manifest extends Objectjava.lang.Objectandroid.Manifest 
内部类 
 
 
 class Manifest.permission权限 
 class Manifest.permission_group权限组 
 构造函数 
 
public Manifest () 详细  androi
    
                                
    • 
                                
  • Oracle实现类split函数的方
                                    zhaoshijie
oracle
                                    
    关键字：Oracle实现类split函数的方 
项目里需要保存结构数据，批量传到后他进行保存，为了减小数据量，子集拼装的格式，使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个，也补全了一下。 
 
CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100); 
 
cr
    
                                
    •