I have exported a vector file in QGIS to GML format and now, Openlayers 3 cannot open that file and display it.
I tried other things like ol.format.GML2() or ol.format.GML3(), but no help.
(OpenLayers can fetch that file from server, but does not displays it. It can display other layers with the same extent).
layer = new ol.layer.Vector({
title: 'myvector',
source: new ol.source.Vector({
url: 'myvector.GML',
format: new ol.format.GML()
})
});
I just tried myself, and it looks like none of the GML flavours generated by QGIS is understood by OpenLayers. My suggestion would be to use GeoJSON instead, which is what I always do.
Related
(Please help I've been struggling with the same problem for more than three days...🤖)
I got GeoJSON file from National Statistical Office, which means it's official data- and the coordinates in this file look like this- :
[959394.1770449197,1948599.8772112513],
... ,
[1140386.5164449196,1684523.5489112514],
It's a GeoJSON object without a member named "crs", and as you can see, it's not using the WGS84 datum. Seems like it's coordinates to draw polygons, which are the shape of each district. I assume that there is no problem with data structure.
I tried to create map using this file with React Leaflet, but failed continuously. To find out if it's the problem of GeoJSON that I'm using, I used other GeoJSON files and it worked fine(meaning that interactive map was created on web) - By comparing the GeoJSON files, I found out that coordinates should be in WGS84 if I want to work with leaflet. So I tried to transform GeoJSON to WGS84 using reproject. In my react app project, I installed reproject, epsg and put the code below:
import * as mapData from '../data/sigunguWithPopGeo.json'
import { toWgs84 } from 'reproject'
import 'epsg'
let epsg = require('epsg');
toWgs84(mapData, undefined, epsg);
And the error was returned:
Error: Unable to detect CRS, GeoJSON has no "crs" property.
Thanks for reading this long intro - Finally here is my question.
Is there any way to reproject GeoJSON without "crs" property to WGS84? I also tried making the coordinates WGS84 with mapshaper.org. Again, I got the error caused by undefined coordinate system of GeoJSON file:
Unable to project -- source coordinate system is unknown
Should I consider adding crs property to GeoJSON? It's my very first time to create the interactive map using GeoJSON with React-leaflet, so any kind of advice from people who experienced similar projects would really help me!
Luckily, solved the problem by myself..!
Instead of keep looking for the methods to convert GeoJSON with undefined coordinate system to WGS84, I visited National Statistical Office's website to figure out the code of coordinate system that was used in src data - which was EPSG 5179. Then I converted GeoJSON file from EPSG 5179 to EPSG 4326(WGS84) on MyGeoData Converter. Before downloading the converted data, I checked on the map to see if the coordinates of data was successfully converted to proper lat, lng values. Hope this solution helps who are struggling with similar problems..👩🔧
The following is my code for building a 3D Earth and showing it:
com.google.ar.sceneform.rendering.Texture.Builder builder= com.google.ar.sceneform.rendering.Texture.builder();
builder.setSource(context,R.drawable.earth);
builder.build().thenAccept(texture ->
MaterialFactory.makeOpaqueWithTexture(context, texture).
thenAccept(material -> {
earthSphereRenderable =
ShapeFactory.makeSphere(0.1f, new Vector3(0.0f, 0.0f, 0.0f), material);
Toast.makeText(context,"All done",Toast.LENGTH_SHORT).show();})
);
The Toast message is coming but I am not able to see any object. Please note that R.drawable.earth is the Earth.jpg file that I put in there, which I want to show in AR.
Here is where I am rendering it
cornerNode = new Node();
cornerNode.setParent(this);
cornerNode.setLocalPosition(localPosition);
cornerNode.setRenderable(earthSphereRenderable);
Moreover, if I replace makeOpaqueWithTexture with makeOpaqueWithColor and but color as Red then the whole thing is working fine (i.e. I can see the sphere)
What must I change here in order to be able to see the sphere with Earth's texture on it?
At this time Google Sceneform 1.8 supports 3D assets in the following formats: .obj, .glTF for which animations not supported) and .fbx with or without animations. Supported textures' formats are: .mtl, .bin, .png and .jpg.
To import a new 3D asset with textures follow these steps:
Verify that your project's app folder contains a sampledata folder. To create the folder, right-click on the app folder in the Project window, then select New > Sample Data Directory.
The sampledata folder is part of your Android Studio project, but its contents will not be included in your APK. Copy your 3D model source asset file (.obj, .fbx, or .gltf), and all of its dependencies in any of the following formats:
.mtl
.bin
.png
.jpg
into the sampledata folder.
Do not copy these source files into your project's assets or res folder, as this will cause them to be included in your APK unnecessarily. Right click the 3D model source asset and select Import Sceneform Asset to begin the import process.
The values are used by the sceneform.asset() entry in the app's build.gradle, and determine where the .sfa and .sfb – ascii and binary asset definition – files (as well as their corresponding texture files .sfm) will be generated in your project. If you're importing a model for the first time, use the default values.
Hope this helps.
Ok, I got the answer to this. It does not accept jpg files but it accepts png files. Weird stuff!
I need to host vector tiles on my local machine but I'm not allowed to run a tile server. So I unpacked an mbtiles database filled with pbf files and I'm accessing them directly with the following VectorTile layer.
var layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ({
tileSize: 512,
minZoom: 4,
maxZoom: 18,
}),
tilePixelRatio: 8,
//url: 'http://localhost:2020/foo/bar/{z}/{x}/{y}.pbf'
url: 'file://C:/ProgramData/foo/bar/{z}/{x}/{y}.pbf'
}),
renderMode: 'vector'
});
All is good unless I navigate to a place in the world where tiles don't exist. The VectorTile source stops trying to load more tiles. It won't even try when I navigate back to a place where I know tiles exist.
How can I make the VectorTile source not give up so easily?
UPDATE:
I modified the code snippet to show the two URLs I've been using. Both are using the same data set. The first url is being served by Caddy and everything is great. The second url is the browser accessing the files directly which works great until I go where tiles don't exist.
We are trying to generate a png in server following this one.
The graphic is drawn correctly, but we cannot hide the navigator. The JSON passed to the script is:
"{\"constr\":\"StockChart\",\"navigator\":\"{enabled:false}\",\"infile\":\"{series: [{data:...
It's caused by: \"navigator\":\"{enabled:false}\", in wrong place. This should be in infile, on the same level as series, xAxis, etc.
Also, shouldn't be there: \"navigator\":{\"enabled\":false}, ?
I am using the OBJLoader to load a large 3D model (described in a .obj file) and I want to display the models name on its surfaces. Though it seems that Three.js can only display English characters. My question is how can I display Chinese characters in Three.js?
there are a couple of ways to display text (https://github.com/mrdoob/three.js/wiki/Text-in-Three.js), but since exporting a chinese font might be more difficult, it might be easier to draw the chinese characters to a canvas texture and use the texture as a material in the scene.
It seem that you can use Facetype.js to get a Chinese font library, for example"YaHei_Regular.typeface.json" , then you can show Chinese characters.
var fontLoader = new THREE.FontLoader();
fontLoader.load("YaHei_Regular.typeface.json", (font)=> {
this.font = font;
});
Another option is using msdf-bmfont-xml. This example uses Microsoft YaHei.
charset.txt —
你好，世界
You may need to install dependencies first. Then:
npm install msdf-bmfont-xml -g
msdf-bmfont -f json yahei.ttf -i charset.txt --pot --square
and finally, use three-bmfont-text to render the text.
Three.js doesn't display Chinese regularly because it doesn't support the charset. You have to load it dynamically.
It seems there're two methods to load: 1, new THREE.TTFLoader().load('*.ttf') , it loads a ttf file that support Chinese charset. But I failed.
2, new THREE.FontLoader().load('*.json') it loads a json file transformed by
the ttf on http://gero3.github.io/facetype.js/ website.
But firstly you have to find a complete ttf file. I tried 方正兰亭超细黑简体 and 方正赵佶瘦金书 which both work, you can google and download ttf file. I found some ttf can't be identified by three.js completely. You perhaps see some Chinese char display normally but others still display '?'.
The final code snippets as following:
const three_font = new THREE.FontLoader();
three_font.load('*.json', function (font_font) {
font=font_font
})
// finally add text with font
const geometry = new THREE.TextGeometry(
{
font: font,
size, height: h, curveSegments: 4, bevelThickness: 2, bevelSize: 2, bevelEnabled: true
});
geometry.computeBoundingSphere();
geometry.computeVertexNormals();
const mesh = new THREE.Mesh(geometry, pool.textMaterial);
mesh.position.set(x * deviation, y, z * deviation);
mesh.rotation.set(rx, ry, rz);
scene.add(mesh);