【地图开发】
文章平均质量分 65
web 地图开发
鲸渔
鲸量授渔
展开
-
【高德地图进阶】--- 添加城市版块纹理
在之前的【高德地图进阶】— 自定义地图中,有了解过如果给地图添加纹理. 但是该功能是收费的,这就劝退了不少人.通常的业务都是将城市版块抬高,这部分之前的文章也讲述过.都是在地图上添加覆盖物在高德的api中只有mesh有添加纹理并且可以做抬高版块的功能.但是该功能需要进行计算.对于复杂的城市版块,并不适用. 因此本章我们选择另辟蹊径效果图:制作地图图片这里以河北省为例,首先你需要找到河北省地图,越高清越好.比例一定要是实际比例.我是通过datav 截的图截取该地图之后,找到美工老.原创 2022-01-11 16:12:38 · 1859 阅读 · 1 评论 -
【高德地图进阶】--- 带图片的点(3)
绘制一个带图片的点,既要可点击,还希望点紧贴地图。可以批量管理,个人觉得用SimpleMarker是最佳的解决办法。他没有明显的缺点,除了需要额外引入组件库,用法和marker差不多。1、引入UI组件库<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>2、加载 SimpleMarker(模块名:ui/overlay/SimpleMarker)AMapUI.loadUI(['ove.原创 2022-01-06 15:36:21 · 839 阅读 · 0 评论 -
【高德地图进阶】--- 带图片的点(2)
上一章讲述了AMap.Marker,这一章使用第二种方式Loca来绘制带图片的点。经过测试 ,该api 在点击事件上有些问题。如果你的点会有重叠的可能,请谨慎使用该api。代码<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />.原创 2022-01-06 11:23:05 · 808 阅读 · 0 评论 -
【高德地图进阶】--- 带图片的点(1)
在使用地图开发时相信用的最多的就是点,其中难免需要使用到自定义图片的点。而且点还要具备,可点击,可携带数据等功能。点的绘制绘制带图片的点常见的方式有四种AMap.Marker :使用地图 JS API中的marker,通过其icon属性指定图片链接特点:绘制简单,对图片无要求,可批量管理。缺点:点有高度,不可调。如果不是水滴图,效果不是很好。Loca.IconLayer:使用Loca 数据可视化特点:绘制简单,点无高度,不会有视觉差,对图片无要求,可批量管理。缺点:点重叠,点.原创 2022-01-06 10:39:59 · 1180 阅读 · 0 评论 -
【高德地图进阶】--- 自定义地图
在开发的过程中, 有时候高德官方地图样式无法符合需求,这就需要我们自定义地图的样式了.步骤:登录高德地图–>进入控制台–>自定义地图可以直接创建地图,也可以在模板基础上进行修改可以控制颜色,显隐 ,具体根据需求. 也可以添加纹理,但是需要开通会员.发布地图点击右上角的发布按钮点击下图中按钮获取地图样式id引入自定义地图<!DOCTYPE html><html><head> <meta name="vie.原创 2021-12-26 15:09:33 · 4502 阅读 · 4 评论 -
【高德地图进阶】--- 会动的小汽车(行动轨迹回放)
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8".原创 2021-12-26 11:50:42 · 3876 阅读 · 4 评论 -
【高德地图进阶】--- 3d城市版块之wall
在之前的文章描述了如何通过prism绘制3d城市版块,这篇文章将采用另外的方式来实现3d版块的制作AMap.Object3D.Wallwall 见名知意,这个api就是绘制墙的, 也可以看做是有高度的线. 属性也很简单path: 线的坐标height: 墙的高度color: 墙的颜色通过wall画3d版块 其实就是先通过边界线绘制平面的3d版块,再通过wall把版块抬起来即可绘制版块版块绘制之前的文章讲过 就不再赘述了,直接上代码 const opts = { .原创 2021-12-26 14:32:11 · 1550 阅读 · 4 评论 -
【高德地图进阶】--- 3d城市版块之prism
在【高德地图入门】—通过geoJson绘制 点,线,面一章中,我们学会了如何绘制城市版块的平面。但为了凸显某个城市,一般情况下都会将该城市的版块抬高实现3d效果。现在我们就来学学如何抬高地图版块整理思路想把整个版块抬高,首先我们得知道整个版块边界线的坐标,在之前的课程 我们使用过GeoJson和DistrictSearch 获取到城市版块信息。同样我们基于这两种进行版块的抬高开发。既然知道了边界坐标,那我们该如何将版块提高呢?这里我们既要引入高德地图的另一个api — AMap.Object3D.原创 2021-12-23 17:19:51 · 1125 阅读 · 0 评论 -
【高德地图进阶】--- 通过DistrictLayer绘制城市版块
高德地图 js API v1.4.10 版本正式发布的简易行政区图层。为了满足基于行政区块的数据可视化、行政区边界展示等开发需求,可以通过AMap.DistrictLayer插件提供了一组简易行政区图层包括:世界简易行政区图层 AMap.DistrictLayer.World国家简易行政区图层 AMap.DistrictLayer.Country省市简易行政区图层 AMap.DistrictLayer.Province本章只讲解Province的使用方式 ,其他两个api 用法大致相同,区别只在.原创 2021-12-24 11:42:18 · 3349 阅读 · 0 评论 -
【高德地图进阶】--- 使用DistrictSearch 绘制城市版块
在【高德地图入门】—通过geoJson绘制 点,线,面一章中,我们学会了如何使用GeoJson绘制城市版块。今天我们使用高德自己的api来绘制城市版块DistrictSearchDistrictSearch插件可以通过城市名或城市码查询到城市的区号、城市编码、中心点、边界、下辖区域等详细信息引入插件 <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&a.原创 2021-12-23 15:16:06 · 4931 阅读 · 1 评论 -
【高德地图进阶】--- 通过geoJson绘制城市版块
我们已经学会了如何绘制点,线,面。今天我们就结合geoJson进行绘制 点,线,面。通常的业务场景是希望绘制一个城市的版块,我们可以先拿到一个城市的geoJson(通常是只包含面(MultiPolygon)),然后通过高德的api绘制城市版块如何获取快速城市的GeoJson数据我们可以使用阿里云的DataV可以通过点击选择想要的城市版块,这里以山东省为例。复制链接,我们可以直接在项目中使用全部代码展示 (其中xxxx 高德的秘钥,cccc是高德的key,需要自己申请)<!DOC.原创 2021-12-23 13:42:19 · 4022 阅读 · 0 评论 -
【高德地图入门】--- OverlayGroup 覆盖物组
在之前的文章,讲解了 点,线,面的绘制。每一个物体都是一个对象,在实际开发中难免会对这些对象,进行隐藏和显示操作。如果一个一个隐藏,会非常麻烦,这里我们就可以使用OverlayGroup ,将一个个覆盖物对象添加到OverlayGroup里,通过对OverlayGroup的显隐控制达到,对多个覆盖物的显隐操作。全部代码展示 (其中xxxx 高德的秘钥,cccc是高德的key,需要自己申请)<!DOCTYPE html><html> <head> &.原创 2021-12-23 13:14:46 · 1296 阅读 · 0 评论 -
【高德地图入门】--- 绘制面
高德地图内置了许多遮盖物的api,今天主要就是讲解面的绘制方法创建地图为了更好的展示点的绘制,我们需要先创建一个地图对象<body> <div id="container"></div></body> const map = window.map = new AMap.Map("container", { center: [116.381674, 39.910732], viewMode: "3D",原创 2021-12-23 11:26:50 · 2316 阅读 · 0 评论 -
【高德地图入门】--- 绘制线
高德地图内置了许多遮盖物的api,今天主要就是讲解线的绘制方法点的绘制相对简单,只需要一个坐标数组即可,例: [ 116.396783,39.894813 ]创建地图为了更好的展示线的绘制,我们需要先创建一个地图对象<body> <div id="container"></div></body> const map = window.map = new AMap.Map("container", { cente原创 2021-12-22 17:57:50 · 4405 阅读 · 2 评论 -
【高德地图入门】--- 绘制点
高德地图内置了许多遮盖物的api,今天主要就是讲解常用的点,线,面的绘制方法点的绘制相对简单,只需要一个坐标值即可,例: [ 116.396783,39.894813 ]创建地图为了更好的展示点的绘制,我们需要先创建一个地图对象<body> <div id="container"></div></body> const map = window.map = new AMap.Map("container", {原创 2021-12-22 16:10:59 · 3136 阅读 · 0 评论 -
【高德地图入门】--- 解析geojson
简介GeoJSON是一种用于编码各种地理数据结构的数据。GeoJSON对象可以表示几何、特征或特征集合。GeoJSON支持以下几何类型:点(Point)、线(LineString)、面(Polygon)、多点(MultiPoint)、多线(MultiLineString)、多面(MultiPolygon)和几何集合(GeometryCollection)。GeoJSON中的功能包含几何对象和其他属性,特征集合表示一系列特性。GeoJSON对象GeoJSON总是由一个单独的对象组成。此对象(指的是下原创 2021-12-22 14:19:17 · 16268 阅读 · 0 评论