摘要:下面,以貴州省的偽地圖為例,進行代碼的編寫和相應數據的簡單處理。根據問答如何合并區域邊界,訪問在線的地圖數據處理網站,給每個縣市取一個相同的別名,一番輸入輸出,我們就得到了貴州省的外邊界。
進行圖形可視化,難免會遇到地理數據的可視化需求。通常情況下,直接使用echarts對配置項進行處理,就可以滿足大部分需求。當然,更加復雜的定制化需求,可能就需要借助d3、Three.js等工具。如果對詳細的地圖背景有要求的話,又需要將圖形庫與leaflet、maptalks等地圖引擎相結合。
不過也許你的需求和我一樣,沒有那么復雜的交互需求,但對顯示效果卻有一些想法。那么就可以嘗試閱讀本文,使用一種比較偷懶的方法,僅基于maptalks本身,來繪制可交互的偽3d地圖。
下面,以貴州省的偽3d地圖為例,進行代碼的編寫和相應數據的簡單處理。
1.基本的地圖繪制
maptalks(maptalks的git)的官方范例寫得相當親切,我們可以從中找到所有繪制偽3d地圖需要的元素。
首先,從地圖底圖開始。(官方入門示例)
initMapTalk() { let map = new maptalks.Map("mapDom", { center: [121.345, 31.2088], zoom: 9, baseLayer: new maptalks.TileLayer("base", { urlTemplate: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", subdomains: ["a","b","c","d"], attribution: "© OpenStreetMap contributors, ©需要注意的是,除了maptalks.js以外,maptalks.css也是必須引入的。
然后,我們需要借助maptalks.Polygon添加一些地圖區塊(Polygon示例)。雖然地圖看起來和長方體不太一樣,實際上這些區塊也不過是稍微復雜一些的點線集合而已。作為一切繪制的基礎,我們需要找一些GeoJson格式的數據(中國各省市級json,世界主要國家json)。觀察GeoJson,其中,的coordinates屬性,就是地圖邊界的集合。需要注意的是,區域type包含Polygon和MultiPolygon兩類,和maptalks的多邊形函數相對應,在數組的層級上稍有區別。為了減少數據選取的麻煩,這里選擇使用MultiPolygon來進行繪制。
drawPolygons(idx, coordinates, properties) { const polygon = new maptalks.MultiPolygon(coordinates, { symbol: { lineWidth: 1, lineColor: edgeColor, polygonFill: polygonColors[0], polygonOpacity: 0.5 }, properties: { id: properties.id, index: idx, properties: properties } }) .on("mouseenter", function(e) { e.target.updateSymbol({ polygonFill: polygonColors[1] }); }) .on("mouseout", function(e) { e.target.updateSymbol({ polygonFill: polygonColors[0] }); }) this.polygons.push(polygon); }, drawRegion() { const self = this $.getJSON("guizhou.json", "", function(mapData) { const features = mapData.features; features.forEach((g, i) => { const properties = g.properties; const coordinates = g.geometry.coordinates self.drawPolygons(i, coordinates, properties) }); const polygonsLayer = new maptalks.VectorLayer( "vector-polygon", self.polygons, ).addTo(self.mapDom); }) },到現在為止,一切還只是2d的樣子。不過,maptalks允許我們繪制3維的高度面(立體的線)。只需要引入一個altitude屬性,并在底圖上引入pitch屬性使視角稍稍偏移, 我們的2.5d地圖就畫出來了。
drawLimitLines(idx, coordinates, properties) { const outLine = new maptalks.MultiLineString(coordinates, { symbol: { lineColor: edgeColor, lineWidth: 1, textPlacement: "vertex" }, properties: { altitude: altitude, index: idx, id: properties.id, properties: properties } }); this.limitLines.push(outLine); }, drawPolygons(idx, coordinates, properties) { const polygon = new maptalks.MultiPolygon(coordinates, { symbol: { lineWidth: 1, lineColor: edgeColor, polygonFill: polygonColors[0], polygonOpacity: 0.5 }, properties: { altitude: altitude, id: properties.id, index: idx, properties: properties } }) .on("mouseenter", function(e) { e.target.updateSymbol({ polygonFill: polygonColors[1] }); }) .on("mouseout", function(e) { e.target.updateSymbol({ polygonFill: polygonColors[0] }); }) this.polygons.push(polygon); }, drawRegion() { const self = this $.getJSON("guizhou.json", "", function(mapData) { const features = mapData.features; features.forEach((g, i) => { const properties = g.properties; const coordinates = g.geometry.coordinates self.drawPolygons(i, coordinates, properties) const pathCoordinates = g.geometry.type == "MultiPolygon" ? coordinates.map(d => { return d[0] }) : coordinates self.drawLimitLines(i, pathCoordinates, properties) }); const polygonsLayer = new maptalks.VectorLayer( "vector-polygon", self.polygons, { enableAltitude: true } ).addTo(self.mapDom); const limitLinesLayer = new maptalks.VectorLayer( "vector-line", self.limitLines, { enableAltitude: true, drawAltitude: { polygonFill: edgeColor, polygonOpacity: 0.3, lineWidth: 0 } } ).addTo(self.mapDom); }) },2.數據和樣式處理
到這個時候,效果還是不太令人滿意。縣市間的邊界太丑,有沒有什么辦法把他去掉呢?很簡單,直接繪制地圖的外沿就好。不過,網上下載的貴州省邊界好像和現在帶有區縣劃分的精度不太一樣?那么,就來自己處理一下吧。根據問答如何合并區域邊界,訪問在線的地圖數據處理網站http://mapshaper.org/,給每個縣市取一個相同的別名,一番輸入輸出,我們就得到了貴州省的外邊界。drawBorderLines(coordinates, properties) { const outLine = new maptalks.MultiLineString(coordinates, { symbol: { lineColor: edgeColor, lineWidth: 1, textPlacement: "vertex" }, properties: { altitude: altitude, id: properties.id, properties: properties } }); this.limitLines.push(outLine); }, drawWall() { const self = this $.getJSON("guizhou-border.json", "", function(borderMapData) { const borderFeatures = borderMapData.features[0] const properties = borderFeatures.properties; const pathCoordinates = borderFeatures.geometry.coordinates.map(d => { return d[0] }) self.drawBorderLines(pathCoordinates, properties) const limitLinesLayer = new maptalks.VectorLayer( "vector-line", self.limitLines, { enableAltitude: true, drawAltitude: { polygonFill: edgeColor, polygonOpacity: 0.3, lineWidth: 0 } } ).addTo(self.mapDom); }) }當然,mapshaper的功效不止于此,簡直是區域數據處理的一大利器,非常值得探索。
另一個令人不太滿意的是地圖的底圖。打開mapbox,找到Studio然后Start With Basic,一個全新的自配地圖的世界等待著你。這里,就隨便先把英文的區縣名換成中文好了。
完成配置之后,點擊share,你會得到一個鏈接。不過,在用他替換掉Map的urlTemplate之前,還要按照格式進行一下修整。
最后,就得到了本文開頭所示的地圖。相關源碼
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100333.html
摘要:首先利用搭建一個項目,然后寫一段的。如果對項目的創建比較熟悉,可以跳過步驟一,直接看步驟二。輸入保存的模板名字,進入項目初始化構建,等待構建完成。二安裝刪除,新建,輸入如下代碼地圖初始化,應寫在函數中,以保證掛載點先于地圖渲染。 Maptalks 項目是一個 HTML5 的地圖引擎, 基于原生 ES6 Javascript 開發: 二三維一體化地圖, 通過二維地圖的旋轉 /傾斜增加三維視...
摘要:導語大數據呈現應用越來越廣泛支持大數據呈現的,水平較高的有然而在地圖呈現的功能上,大都只能繪制矢量地圖,而不能呈現具有真實效果的地圖鑒于此,本文重點在于如何制作一張,即可以看到真實效果,又能進行交互的矢量地圖先睹為快若有所思技術選擇想實現上 導語 大數據呈現應用越來越廣泛,支持大數據呈現的SDK,水平較高的有echarts、highchart、D3;然而在地圖呈現的功能上,大都只能繪制...
摘要:和代表普通道路和墻,和代表星星和巖漿。用作裁剪接收圖片對象起始坐標和裁剪區域五個參數起始坐標和裁剪區域可選用于創建圖像,可以添加到游戲圖層將指定尺寸按照指定行列進行裁剪,返回一個二維數組生成動畫,每一行為一組動畫。 繪制地圖前準備 在繪制之前,我們先看一下地圖的數據實現 globalData = { mapCol: 11, mapRow: 11, size: 32, f...
入門 Leaflet 之小 Demo 寫在前面 ---- WebGIS 開發基礎之 Leaflet GIS 基本概念:GIS、Map、Layer、Feature、Geometry、Symbol、Data(Point、Polyline、Polygon)、Renderer、Scale、Project、Coordinates; GIS 開發概述:架構模式、常用平臺和 SDK、二維三維 使用 Lea...
閱讀 3070·2021-11-22 13:54
閱讀 834·2021-11-04 16:08
閱讀 4463·2021-10-11 11:09
閱讀 3597·2021-09-22 16:05
閱讀 910·2019-08-30 15:54
閱讀 387·2019-08-30 15:44
閱讀 594·2019-08-30 14:05
閱讀 1014·2019-08-30 12:46